Merge pull request #14142 from mtsymbarov-del/fix/label-card-title-translation

Added support autocomplete pattern in title widgets

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

@@ -82,9 +82,16 @@
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [predefinedValues]="predefinedValues"
+                                        [disabled]="!powerButtonWidgetConfigForm.get('showTitle').value"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           clearButton
                           [previewText]="powerButtonWidgetConfigForm.get('title').value"

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

@@ -20,7 +20,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { TargetDevice, WidgetConfig, } from '@shared/models/widget.models';
+import { TargetDevice, WidgetConfig, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { isUndefined } from '@core/utils';
 import { ValueType } from '@shared/models/constants';
@@ -53,6 +53,8 @@ export class PowerButtonBasicConfigComponent extends BasicWidgetConfigComponent
 
   powerButtonWidgetConfigForm: UntypedFormGroup;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private fb: UntypedFormBuilder) {

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

@@ -120,9 +120,16 @@
           {{ 'widgets.button.label' | translate }}
         </mat-slide-toggle>
         <div class="flex flex-1 flex-row items-center justify-start gap-2">
-          <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-            <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
-          </mat-form-field>
+          <tb-string-pattern-autocomplete class="flex-1"
+                                          appearance="outline"
+                                          brackets="curly"
+                                          subscriptSizing="dynamic"
+                                          [predefinedValuesButton]="true"
+                                          [predefinedValues]="predefinedValues"
+                                          [disabled]="!segmentedButtonWidgetConfigForm.get('leftAppearance').get('showLabel').value"
+                                          placeholderText="{{ 'widget-config.set' | translate }}"
+                                          formControlName="label"
+          ></tb-string-pattern-autocomplete>
           <tb-font-settings formControlName="labelFont"
                             [previewText]="segmentedButtonWidgetConfigForm.get('appearance.leftAppearance.label').value">
           </tb-font-settings>
@@ -151,9 +158,16 @@
           {{ 'widgets.button.label' | translate }}
         </mat-slide-toggle>
         <div class="flex flex-1 flex-row items-center justify-start gap-2">
-          <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-            <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
-          </mat-form-field>
+          <tb-string-pattern-autocomplete class="flex-1"
+                                          appearance="outline"
+                                          brackets="curly"
+                                          subscriptSizing="dynamic"
+                                          [predefinedValuesButton]="true"
+                                          [predefinedValues]="predefinedValues"
+                                          [disabled]="!segmentedButtonWidgetConfigForm.get('rightAppearance').get('showLabel').value"
+                                          placeholderText="{{ 'widget-config.set' | translate }}"
+                                          formControlName="label"
+          ></tb-string-pattern-autocomplete>
           <tb-font-settings formControlName="labelFont"
                             [previewText]="segmentedButtonWidgetConfigForm.get('appearance.rightAppearance.label').value">
           </tb-font-settings>

ui-ngx/src/app/modules/home/components/widget/config/basic/button/segmented-button-basic-config.component.ts

@@ -20,7 +20,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { Datasource, TargetDevice, } from '@shared/models/widget.models';
+import { Datasource, TargetDevice, widgetTitleAutocompleteValues, } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { ValueType } from '@shared/models/constants';
 import { getTargetDeviceFromDatasources } from '@shared/models/widget-settings.models';
@@ -48,7 +48,7 @@ export class SegmentedButtonBasicConfigComponent extends BasicWidgetConfigCompon
     const datasources: Datasource[] = this.segmentedButtonWidgetConfigForm.get('datasources').value;
     return getTargetDeviceFromDatasources(datasources);
   }
-
+  predefinedValues = widgetTitleAutocompleteValues;
   segmentedButtonAppearanceType: SegmentedButtonAppearanceType = 'first';
   segmentedButtonColorStylesType: SegmentedButtonColorStylesType = 'selected';
 

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

@@ -92,9 +92,16 @@
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [predefinedValues]="predefinedValues"
+                                        [disabled]="!toggleButtonWidgetConfigForm.get('showTitle').value"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           clearButton
                           [previewText]="toggleButtonWidgetConfigForm.get('title').value"

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

@@ -20,7 +20,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { TargetDevice, TargetDeviceType, WidgetConfig, } from '@shared/models/widget.models';
+import { TargetDevice, TargetDeviceType, WidgetConfig, widgetTitleAutocompleteValues, } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { isUndefined } from '@core/utils';
 import { ValueType } from '@shared/models/constants';
@@ -49,6 +49,8 @@ export class ToggleButtonBasicConfigComponent extends BasicWidgetConfigComponent
 
   toggleButtonWidgetConfigForm: UntypedFormGroup;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private fb: UntypedFormBuilder) {

ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.html

@@ -39,9 +39,16 @@
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [predefinedValues]="predefinedValues"
+                                        [disabled]="!aggregatedValueCardWidgetConfigForm.get('showTitle').value"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           clearButton
                           [previewText]="aggregatedValueCardWidgetConfigForm.get('title').value"
@@ -78,9 +85,16 @@
         {{ 'widgets.aggregated-value-card.subtitle' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="subtitle" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        [predefinedValuesButton]="true"
+                                        [predefinedValues]="predefinedValues"
+                                        [disabled]="!aggregatedValueCardWidgetConfigForm.get('showSubtitle').value"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="subtitle"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="subtitleFont"
                           clearButton
                           [previewText]="aggregatedValueCardWidgetConfigForm.get('subtitle').value">

ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.ts

@@ -20,7 +20,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { ComparisonResultType, DataKey, Datasource, WidgetConfig, } from '@shared/models/widget.models';
+import { ComparisonResultType, DataKey, Datasource, WidgetConfig, widgetTitleAutocompleteValues, } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import {
@@ -80,6 +80,8 @@ export class AggregatedValueCardBasicConfigComponent extends BasicWidgetConfigCo
 
   datePreviewFn = this._datePreviewFn.bind(this);
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private cd: ChangeDetectorRef,

ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-value-card-basic-config.component.html

@@ -41,9 +41,16 @@
         {{ 'widgets.label-card.label' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [disabled]="!labelValueCardWidgetConfigForm.get('showLabel').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="label"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="labelFont"
                           [previewText]="labelValueCardWidgetConfigForm.get('label').value">
         </tb-font-settings>

ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-value-card-basic-config.component.ts

@@ -25,6 +25,7 @@ import {
   datasourcesHasAggregation,
   datasourcesHasOnlyComparisonAggregation,
   WidgetConfig,
+  widgetTitleAutocompleteValues,
 } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { formatValue, isUndefined } from '@core/utils';
@@ -60,6 +61,8 @@ export class LabelValueCardBasicConfigComponent extends BasicWidgetConfigCompone
 
   valuePreviewFn = this._valuePreviewFn.bind(this);
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private fb: UntypedFormBuilder) {

ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html

@@ -52,9 +52,16 @@
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [predefinedValues]="predefinedValues"
+                                        [disabled]="!progressBarWidgetConfigForm.get('showTitle').value"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           clearButton
                           [previewText]="progressBarWidgetConfigForm.get('title').value"

ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.ts

@@ -25,6 +25,7 @@ import {
   datasourcesHasAggregation,
   datasourcesHasOnlyComparisonAggregation,
   WidgetConfig,
+  widgetTitleAutocompleteValues,
 } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
@@ -72,6 +73,8 @@ export class ProgressBarBasicConfigComponent extends BasicWidgetConfigComponent
 
   valuePreviewFn = this._valuePreviewFn.bind(this);
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private fb: UntypedFormBuilder) {

ui-ngx/src/app/modules/home/components/widget/config/basic/cards/simple-card-basic-config.component.html

@@ -32,9 +32,15 @@
     <div class="tb-form-panel-title" translate>widget-config.appearance</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" translate>widgets.simple-card.label</div>
-      <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
-        <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
-      </mat-form-field>
+      <tb-string-pattern-autocomplete class="flex-1" 
+                                      appearance="outline"
+                                      brackets="curly" 
+                                      subscriptSizing="dynamic"
+                                      predefinedValuesButton="true"
+                                      [predefinedValues]="predefinedValues"
+                                      placeholderText="{{ 'widget-config.set' | translate }}"
+                                      formControlName="label"
+        ></tb-string-pattern-autocomplete>
     </div>
     <div class="tb-form-row space-between">
       <div translate>widgets.simple-card.label-position</div>

ui-ngx/src/app/modules/home/components/widget/config/basic/cards/simple-card-basic-config.component.ts

@@ -25,6 +25,7 @@ import {
   datasourcesHasAggregation,
   datasourcesHasOnlyComparisonAggregation,
   WidgetConfig,
+  widgetTitleAutocompleteValues,
 } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
@@ -54,6 +55,8 @@ export class SimpleCardBasicConfigComponent extends BasicWidgetConfigComponent {
 
   simpleCardWidgetConfigForm: UntypedFormGroup;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private fb: UntypedFormBuilder) {

ui-ngx/src/app/modules/home/components/widget/config/basic/cards/timeseries-table-basic-config.component.html

@@ -44,9 +44,16 @@
         {{ 'widget-config.card-title' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [disabled]="!timeseriesTableWidgetConfigForm.get('showTitle').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           clearButton
                           [previewText]="timeseriesTableWidgetConfigForm.get('title').value"

ui-ngx/src/app/modules/home/components/widget/config/basic/cards/timeseries-table-basic-config.component.ts

@@ -20,7 +20,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { DataKey, Datasource, WidgetConfig } from '@shared/models/widget.models';
+import { DataKey, Datasource, WidgetConfig, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import { deepClone, isUndefined } from '@core/utils';
@@ -47,6 +47,8 @@ export class TimeseriesTableBasicConfigComponent extends BasicWidgetConfigCompon
 
   timeseriesTableWidgetConfigForm: UntypedFormGroup;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private fb: UntypedFormBuilder) {

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

@@ -53,9 +53,16 @@
         {{ 'widgets.value-card.label' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [disabled]="!valueCardWidgetConfigForm.get('showLabel').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="label"
+          ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="labelFont"
                           [previewText]="valueCardWidgetConfigForm.get('label').value">
         </tb-font-settings>

ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.ts

@@ -25,6 +25,7 @@ import {
   datasourcesHasAggregation,
   datasourcesHasOnlyComparisonAggregation,
   WidgetConfig,
+  widgetTitleAutocompleteValues,
 } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
@@ -84,6 +85,8 @@ export class ValueCardBasicConfigComponent extends BasicWidgetConfigComponent {
     return layout !== ValueCardLayout.simplified;
   }
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private cd: ChangeDetectorRef,

ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.html

@@ -51,9 +51,16 @@
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [disabled]="!valueChartCardWidgetConfigForm.get('showTitle').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           clearButton
                           [previewText]="valueChartCardWidgetConfigForm.get('title').value"

ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.ts

@@ -20,7 +20,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { DataKey, Datasource, WidgetConfig, } from '@shared/models/widget.models';
+import { DataKey, Datasource, WidgetConfig, widgetTitleAutocompleteValues, } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import {
@@ -63,6 +63,8 @@ export class ValueChartCardBasicConfigComponent extends BasicWidgetConfigCompone
 
   valuePreviewFn = this._valuePreviewFn.bind(this);
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private fb: UntypedFormBuilder) {

ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-basic-config.component.ts

@@ -19,7 +19,7 @@ import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { DataKey } from '@shared/models/widget.models';
+import { DataKey, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import {
@@ -40,6 +40,8 @@ export class BarChartBasicConfigComponent extends LatestChartBasicConfigComponen
   @ViewChild('barChart')
   barChartConfigTemplate: TemplateRef<any>;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               protected fb: UntypedFormBuilder) {

ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html

@@ -49,9 +49,16 @@
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [disabled]="!barChartWidgetConfigForm.get('showTitle').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           clearButton
                           [previewText]="barChartWidgetConfigForm.get('title').value"

ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.ts

@@ -26,6 +26,7 @@ import {
   legendPositions,
   legendPositionTranslationMap,
   WidgetConfig,
+  widgetTitleAutocompleteValues,
 } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
@@ -73,6 +74,8 @@ export class BarChartWithLabelsBasicConfigComponent extends BasicWidgetConfigCom
 
   tooltipDatePreviewFn = this._tooltipDatePreviewFn.bind(this);
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private $injector: Injector,

ui-ngx/src/app/modules/home/components/widget/config/basic/chart/doughnut-basic-config.component.ts

@@ -19,7 +19,7 @@ import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { DataKey } from '@shared/models/widget.models';
+import { DataKey, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import {
@@ -41,6 +41,8 @@ export class DoughnutBasicConfigComponent extends LatestChartBasicConfigComponen
   @ViewChild('doughnutChart')
   doughnutChartConfigTemplate: TemplateRef<any>;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               protected fb: UntypedFormBuilder) {

ui-ngx/src/app/modules/home/components/widget/config/basic/chart/flot-basic-config.component.html

@@ -44,9 +44,16 @@
         {{ 'widget-config.card-title' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [disabled]="!flotWidgetConfigForm.get('showTitle').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           clearButton
                           [previewText]="flotWidgetConfigForm.get('title').value"

ui-ngx/src/app/modules/home/components/widget/config/basic/chart/flot-basic-config.component.ts

@@ -20,7 +20,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { DataKey, Datasource, WidgetConfig } from '@shared/models/widget.models';
+import { DataKey, Datasource, WidgetConfig, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import { isUndefined } from '@core/utils';
@@ -47,6 +47,8 @@ export class FlotBasicConfigComponent extends BasicWidgetConfigComponent {
 
   flotWidgetConfigForm: UntypedFormGroup;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private fb: UntypedFormBuilder) {

ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.html

@@ -50,9 +50,16 @@
         {{ 'widget-config.card-title' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [disabled]="!latestChartWidgetConfigForm.get('showTitle').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           clearButton
                           [previewText]="latestChartWidgetConfigForm.get('title').value"

ui-ngx/src/app/modules/home/components/widget/config/basic/chart/pie-chart-basic-config.component.ts

@@ -19,7 +19,7 @@ import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { DataKey } from '@shared/models/widget.models';
+import { DataKey, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import {
@@ -40,6 +40,8 @@ export class PieChartBasicConfigComponent extends LatestChartBasicConfigComponen
   @ViewChild('pieChart')
   pieChartConfigTemplate: TemplateRef<any>;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               protected fb: UntypedFormBuilder) {

ui-ngx/src/app/modules/home/components/widget/config/basic/chart/polar-area-chart-basic-config.component.ts

@@ -19,7 +19,7 @@ import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { DataKey } from '@shared/models/widget.models';
+import { DataKey, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import {
@@ -40,6 +40,8 @@ export class PolarAreaChartBasicConfigComponent extends LatestChartBasicConfigCo
   @ViewChild('polarAreaChart')
   polarAreaChartConfigTemplate: TemplateRef<any>;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               protected fb: UntypedFormBuilder) {

ui-ngx/src/app/modules/home/components/widget/config/basic/chart/radar-chart-basic-config.component.ts

@@ -19,7 +19,7 @@ import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { DataKey } from '@shared/models/widget.models';
+import { DataKey, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import {
@@ -40,6 +40,8 @@ export class RadarChartBasicConfigComponent extends LatestChartBasicConfigCompon
   @ViewChild('radarChart')
   radarChartConfigTemplate: TemplateRef<any>;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               protected fb: UntypedFormBuilder) {

ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html

@@ -33,9 +33,16 @@
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [disabled]="!rangeChartWidgetConfigForm.get('showTitle').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           clearButton
                           [previewText]="rangeChartWidgetConfigForm.get('title').value"

ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.ts

@@ -26,6 +26,7 @@ import {
   legendPositions,
   legendPositionTranslationMap,
   WidgetConfig,
+  widgetTitleAutocompleteValues,
 } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
@@ -102,6 +103,8 @@ export class RangeChartBasicConfigComponent extends BasicWidgetConfigComponent {
 
   tooltipDatePreviewFn = this._tooltipDatePreviewFn.bind(this);
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private $injector: Injector,

ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html

@@ -123,9 +123,16 @@
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [disabled]="!timeSeriesChartWidgetConfigForm.get('showTitle').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           clearButton
                           [previewText]="timeSeriesChartWidgetConfigForm.get('title').value"

ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.ts

@@ -27,6 +27,7 @@ import {
   legendPositions,
   legendPositionTranslationMap,
   WidgetConfig,
+  widgetTitleAutocompleteValues,
 } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
@@ -93,6 +94,8 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
 
   seriesMode = 'series';
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private $injector: Injector,

ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entities-table-basic-config.component.html

@@ -44,9 +44,16 @@
         {{ 'widget-config.card-title' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [disabled]="!entitiesTableWidgetConfigForm.get('showTitle').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+          ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           clearButton
                           [previewText]="entitiesTableWidgetConfigForm.get('title').value"

ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entities-table-basic-config.component.ts

@@ -24,7 +24,8 @@ import {
   DataKey,
   Datasource,
   datasourcesHasAggregation,
-  datasourcesHasOnlyComparisonAggregation, WidgetConfig
+  datasourcesHasOnlyComparisonAggregation, WidgetConfig,
+  widgetTitleAutocompleteValues
 } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
@@ -62,6 +63,8 @@ export class EntitiesTableBasicConfigComponent extends BasicWidgetConfigComponen
 
   entitiesTableWidgetConfigForm: UntypedFormGroup;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private fb: UntypedFormBuilder) {

ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entity-count-basic-config.component.html

@@ -26,7 +26,7 @@
   </tb-datasources>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widget-config.appearance</div>
-    <tb-count-widget-settings alarmElseEntity="false" formControlName="settings"></tb-count-widget-settings>
+    <tb-count-widget-settings alarmElseEntity="false" formControlName="settings" [predefinedValues]="predefinedValues"></tb-count-widget-settings>
   </div>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widget-config.card-appearance</div>

ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entity-count-basic-config.component.ts

@@ -20,7 +20,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { DatasourceType, WidgetConfig, } from '@shared/models/widget.models';
+import { DatasourceType, WidgetConfig, widgetTitleAutocompleteValues, } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import { isUndefined } from '@core/utils';
@@ -36,6 +36,8 @@ export class EntityCountBasicConfigComponent extends BasicWidgetConfigComponent
 
   entityCountWidgetConfigForm: UntypedFormGroup;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private utils: UtilsService,

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

@@ -53,9 +53,16 @@
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [disabled]="!batteryLevelWidgetConfigForm.get('showTitle').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           clearButton
                           [previewText]="batteryLevelWidgetConfigForm.get('title').value"

ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.ts

@@ -26,6 +26,7 @@ import {
   datasourcesHasAggregation,
   datasourcesHasOnlyComparisonAggregation,
   WidgetConfig,
+  widgetTitleAutocompleteValues,
 } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
@@ -85,6 +86,8 @@ export class BatteryLevelBasicConfigComponent extends BasicWidgetConfigComponent
     }
   }
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private fb: UntypedFormBuilder) {

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

@@ -35,9 +35,16 @@
         {{ 'widgets.liquid-level-card.title' | translate }}
       </mat-slide-toggle>
       <div class="tb-flex row flex-start align-center">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [disabled]="!levelCardWidgetConfigForm.get('showTitle').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           [previewText]="levelCardWidgetConfigForm.get('title').value">
         </tb-font-settings>

ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.ts

@@ -27,6 +27,7 @@ import {
   datasourcesHasOnlyComparisonAggregation,
   DatasourceType,
   WidgetConfig,
+  widgetTitleAutocompleteValues,
 } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
@@ -126,6 +127,8 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon
 
   datePreviewFn = this._datePreviewFn.bind(this);
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   private keySearchText: string;
   private latestKeySearchTextResult: Array<string>;
 

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

@@ -47,9 +47,16 @@
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [disabled]="!signalStrengthWidgetConfigForm.get('showTitle').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           clearButton
                           [previewText]="signalStrengthWidgetConfigForm.get('title').value"

ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.ts

@@ -25,6 +25,7 @@ import {
   datasourcesHasAggregation,
   datasourcesHasOnlyComparisonAggregation,
   WidgetConfig,
+  widgetTitleAutocompleteValues,
 } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
@@ -76,6 +77,8 @@ export class SignalStrengthBasicConfigComponent extends BasicWidgetConfigCompone
   tooltipValuePreviewFn = this._tooltipValuePreviewFn.bind(this);
   tooltipDatePreviewFn = this._tooltipDatePreviewFn.bind(this);
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private $injector: Injector,

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

@@ -33,9 +33,16 @@
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [disabled]="!mapWidgetConfigForm.get('showTitle').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           clearButton
                           [previewText]="mapWidgetConfigForm.get('title').value"

ui-ngx/src/app/modules/home/components/widget/config/basic/map/map-basic-config.component.ts

@@ -24,7 +24,7 @@ import { WidgetConfigComponentData } from '@home/models/widget-component.models'
 import { isDefinedAndNotNull, isUndefined, mergeDeep, mergeDeepIgnoreArray } from '@core/utils';
 import { mapWidgetDefaultSettings, MapWidgetSettings } from '@home/components/widget/lib/maps/map-widget.models';
 import { cssSizeToStrSize, resolveCssSize } from '@shared/models/widget-settings.models';
-import { WidgetConfig } from '@shared/models/widget.models';
+import { WidgetConfig, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import {
   getTimewindowConfig,
   setTimewindowConfig
@@ -41,6 +41,8 @@ export class MapBasicConfigComponent extends BasicWidgetConfigComponent {
 
   trip = false;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private $injector: Injector,

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

@@ -20,7 +20,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { TargetDevice, WidgetConfig, } from '@shared/models/widget.models';
+import { TargetDevice, WidgetConfig } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { isUndefined } from '@core/utils';
 import {

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

@@ -76,9 +76,16 @@
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [disabled]="!sliderWidgetConfigForm.get('showTitle').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           clearButton
                           [previewText]="sliderWidgetConfigForm.get('title').value"

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

@@ -20,7 +20,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { TargetDevice, WidgetConfig, } from '@shared/models/widget.models';
+import { TargetDevice, WidgetConfig, widgetTitleAutocompleteValues, } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { formatValue, isUndefined } from '@core/utils';
 import { ValueType } from '@shared/models/constants';
@@ -59,6 +59,8 @@ export class SliderBasicConfigComponent extends BasicWidgetConfigComponent {
 
   valuePreviewFn = this._valuePreviewFn.bind(this);
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private fb: UntypedFormBuilder) {

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

@@ -35,9 +35,16 @@
           {{ 'widget-config.title' | translate }}
         </mat-slide-toggle>
         <div class="flex flex-1 flex-row items-center justify-start gap-2">
-          <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-            <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-          </mat-form-field>
+          <tb-string-pattern-autocomplete class="flex-1"
+                                          appearance="outline"
+                                          brackets="curly"
+                                          subscriptSizing="dynamic"
+                                          predefinedValuesButton="true"
+                                          [disabled]="!scadaSymbolWidgetConfigForm.get('showTitle').value"
+                                          [predefinedValues]="predefinedValues"
+                                          placeholderText="{{ 'widget-config.set' | translate }}"
+                                          formControlName="title"
+          ></tb-string-pattern-autocomplete>
           <tb-font-settings formControlName="titleFont"
                             clearButton
                             [previewText]="scadaSymbolWidgetConfigForm.get('title').value"

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

@@ -20,7 +20,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { TargetDevice, WidgetConfig, } from '@shared/models/widget.models';
+import { TargetDevice, WidgetConfig, widgetTitleAutocompleteValues, } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import {
   scadaSymbolWidgetDefaultSettings,
@@ -42,6 +42,8 @@ export class ScadaSymbolBasicConfigComponent extends BasicWidgetConfigComponent
 
   scadaSymbolWidgetConfigForm: UntypedFormGroup;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private fb: UntypedFormBuilder) {

ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html

@@ -95,9 +95,16 @@
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [disabled]="!windSpeedDirectionWidgetConfigForm.get('showTitle').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           clearButton
                           [previewText]="windSpeedDirectionWidgetConfigForm.get('title').value"

ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.ts

@@ -26,6 +26,7 @@ import {
   datasourcesHasAggregation,
   datasourcesHasOnlyComparisonAggregation,
   WidgetConfig,
+  widgetTitleAutocompleteValues,
 } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
@@ -90,6 +91,8 @@ export class WindSpeedDirectionBasicConfigComponent extends BasicWidgetConfigCom
     return layout === WindSpeedDirectionLayout.advanced;
   }
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private $injector: Injector,

ui-ngx/src/app/modules/home/components/widget/lib/cards/label-card-widget.component.html

@@ -24,7 +24,7 @@
   <div #labelCardContent class="tb-label-card-content">
     <div #labelCardRow class="tb-label-card-row">
       <tb-icon *ngIf="showIcon" [style]="iconStyle">{{ icon }}</tb-icon>
-      <div [class.tb-label-card-label]="!settings.autoScale" [style]="labelStyle" [innerHTML]="label | safe:'html'"></div>
+      <div [class.tb-label-card-label]="!settings.autoScale" [style]="labelStyle" [innerHTML]="label | customTranslate  | safe:'html'"></div>
     </div>
   </div>
 </div>

ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts

@@ -143,7 +143,6 @@ export class TbCanvasDigitalGauge {
       ticks: this.localSettings.ticks,
 
       title: this.localSettings.title,
-
       fontTitleSize: this.localSettings.titleFont.size,
       fontTitleStyle: this.localSettings.titleFont.style,
       fontTitleWeight: this.localSettings.titleFont.weight,

ui-ngx/src/app/modules/home/components/widget/lib/maps/map.ts

@@ -951,7 +951,7 @@ export abstract class TbMap<S extends BaseMapSettings> {
     this.updateTripsAnchors();
     this.updateBounds();
     this.updateEditButtonsStates();
-
+    this.ctx.updateLabelPatterns();
   }
 
   private updateTrips(subscription: IWidgetSubscription) {

ui-ngx/src/app/modules/home/components/widget/lib/settings/button/segmented-button-widget-settings.component.html

@@ -112,9 +112,16 @@
           {{ 'widgets.button.label' | translate }}
         </mat-slide-toggle>
         <div class="flex flex-1 flex-row items-center justify-start gap-2">
-          <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-            <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
-          </mat-form-field>
+          <tb-string-pattern-autocomplete class="flex-1"
+                                          appearance="outline"
+                                          brackets="curly"
+                                          subscriptSizing="dynamic"
+                                          predefinedValuesButton="true"
+                                          [disabled]="!segmentedButtonWidgetSettingsForm.get('leftAppearance').get('showLabel').value"
+                                          [predefinedValues]="predefinedValues"
+                                          placeholderText="{{ 'widget-config.set' | translate }}"
+                                          formControlName="label"
+          ></tb-string-pattern-autocomplete>
           <tb-font-settings formControlName="labelFont"
                             [previewText]="segmentedButtonWidgetSettingsForm.get('appearance.leftAppearance.label').value">
           </tb-font-settings>
@@ -143,9 +150,16 @@
           {{ 'widgets.button.label' | translate }}
         </mat-slide-toggle>
         <div class="flex flex-1 flex-row items-center justify-start gap-2">
-          <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-            <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
-          </mat-form-field>
+          <tb-string-pattern-autocomplete class="flex-1"
+                                          appearance="outline"
+                                          brackets="curly"
+                                          subscriptSizing="dynamic"
+                                          predefinedValuesButton="true"
+                                          [disabled]="!segmentedButtonWidgetSettingsForm.get('rightAppearance').get('showLabel').value"
+                                          [predefinedValues]="predefinedValues"
+                                          placeholderText="{{ 'widget-config.set' | translate }}"
+                                          formControlName="label"
+          ></tb-string-pattern-autocomplete>
           <tb-font-settings formControlName="labelFont"
                             [previewText]="segmentedButtonWidgetSettingsForm.get('appearance.rightAppearance.label').value">
           </tb-font-settings>

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

@@ -15,7 +15,13 @@
 ///
 
 import { Component } from '@angular/core';
-import { TargetDevice, WidgetSettings, WidgetSettingsComponent, widgetType } from '@shared/models/widget.models';
+import {
+  TargetDevice,
+  WidgetSettings,
+  WidgetSettingsComponent,
+  widgetTitleAutocompleteValues,
+  widgetType
+} from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -67,6 +73,8 @@ export class SegmentedButtonWidgetSettingsComponent extends WidgetSettingsCompon
 
   segmentedButtonWidgetSettingsForm: UntypedFormGroup;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {
     super(store);

ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.html

@@ -28,9 +28,16 @@
         {{ 'widgets.aggregated-value-card.subtitle' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="subtitle" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        [predefinedValuesButton]="true"
+                                        [disabled]="!aggregatedValueCardWidgetSettingsForm.get('showSubtitle').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="subtitle"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="subtitleFont"
                           clearButton
                           [previewText]="aggregatedValueCardWidgetSettingsForm.get('subtitle').value">

ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component, Injector } from '@angular/core';
-import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import {WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues} from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -33,6 +33,8 @@ export class AggregatedValueCardWidgetSettingsComponent extends WidgetSettingsCo
 
   datePreviewFn = this._datePreviewFn.bind(this);
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(protected store: Store<AppState>,
               private $injector: Injector,
               private fb: UntypedFormBuilder) {

ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-value-card-widget-settings.component.html

@@ -28,9 +28,16 @@
         {{ 'widgets.label-card.label' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        [predefinedValuesButton]="true"
+                                        [disabled]="!labelValueCardWidgetSettingsForm.get('showLabel').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="label"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="labelFont"
                           [previewText]="labelValueCardWidgetSettingsForm.get('label').value">
         </tb-font-settings>

ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-value-card-widget-settings.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component } from '@angular/core';
-import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import {WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues} from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -34,6 +34,8 @@ export class LabelValueCardWidgetSettingsComponent extends WidgetSettingsCompone
 
   valuePreviewFn = this._valuePreviewFn.bind(this);
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {
     super(store);

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-appearance.component.html

@@ -37,9 +37,16 @@
     <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
       {{ 'widgets.button.label' | translate }}
     </mat-slide-toggle>
-    <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-      <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
-    </mat-form-field>
+    <tb-string-pattern-autocomplete class="flex-1"
+                                    appearance="outline"
+                                    brackets="curly"
+                                    subscriptSizing="dynamic"
+                                    predefinedValuesButton="true"
+                                    [disabled]="!appearanceFormGroup.get('showLabel').value"
+                                    [predefinedValues]="predefinedValues"
+                                    placeholderText="{{ 'widget-config.set' | translate }}"
+                                    formControlName="label"
+    ></tb-string-pattern-autocomplete>
   </div>
   <div class="tb-form-row">
     <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">

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

@@ -26,6 +26,7 @@ import {
 import { merge } from 'rxjs';
 import { coerceBoolean } from '@shared/decorators/coercion';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 
 @Component({
   selector: 'tb-widget-button-appearance',
@@ -71,6 +72,8 @@ export class WidgetButtonAppearanceComponent implements OnInit, ControlValueAcce
 
   appearanceFormGroup: UntypedFormGroup;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   private propagateChange = (_val: any) => {};
 
   constructor(private fb: UntypedFormBuilder,

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.html

@@ -38,9 +38,22 @@
       {{ 'widgets.count.label' | translate }}
     </mat-slide-toggle>
     <div class="flex flex-1 flex-row items-center justify-start gap-2">
-      <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-        <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
-      </mat-form-field>
+      @if (!predefinedValues) {
+        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
+          <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+      }@else {
+        <tb-string-pattern-autocomplete class="flex-1"
+                                      appearance="outline"
+                                      brackets="curly"
+                                      subscriptSizing="dynamic"
+                                      predefinedValuesButton="true"
+                                      [disabled]="!countWidgetConfigForm.get('showLabel').value"
+                                      [predefinedValues]="predefinedValues"
+                                      placeholderText="{{ 'widget-config.set' | translate }}"
+                                      formControlName="label"
+        ></tb-string-pattern-autocomplete>
+      }
       <tb-font-settings formControlName="labelFont"
                         [previewText]="countWidgetConfigForm.get('label').value">
       </tb-font-settings>

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

@@ -61,6 +61,9 @@ export class CountWidgetSettingsComponent extends PageComponent implements OnIni
   @Input()
   alarmElseEntity: boolean;
 
+  @Input()
+  predefinedValues: string[];
+  
   private propagateChange = null;
 
   countCardLayouts = countCardLayouts;
@@ -69,7 +72,6 @@ export class CountWidgetSettingsComponent extends PageComponent implements OnIni
   countCardLayoutImageMap: Map<CountCardLayout, string>;
 
   countWidgetConfigForm: UntypedFormGroup;
-
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder,
               private destroyRef: DestroyRef) {

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component.html

@@ -21,9 +21,16 @@
       {{ 'widgets.status-widget.label' | translate }}
     </mat-slide-toggle>
     <div class="flex flex-1 flex-row items-center justify-start gap-2">
-      <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-        <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
-      </mat-form-field>
+      <tb-string-pattern-autocomplete class="flex-1"
+                                      appearance="outline"
+                                      brackets="curly"
+                                      subscriptSizing="dynamic"
+                                      predefinedValuesButton="true"
+                                      [disabled]="!stateSettingsFormGroup.get('showLabel').value"
+                                      [predefinedValues]="predefinedValues"
+                                      placeholderText="{{ 'widget-config.set' | translate }}"
+                                      formControlName="label"
+      ></tb-string-pattern-autocomplete>
       <tb-font-settings formControlName="labelFont"
                         [previewText]="stateSettingsFormGroup.get('label').value">
       </tb-font-settings>

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

@@ -22,6 +22,7 @@ import {
   StatusWidgetStateSettings
 } from '@home/components/widget/lib/indicator/status-widget.models';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { widgetTitleAutocompleteValues } from '@app/shared/public-api';
 
 @Component({
   selector: 'tb-status-widget-state-settings',
@@ -51,6 +52,8 @@ export class StatusWidgetStateSettingsComponent implements OnInit, OnChanges, Co
 
   public stateSettingsFormGroup: UntypedFormGroup;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(private fb: UntypedFormBuilder,
               private destroyRef: DestroyRef) {
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.html

@@ -18,10 +18,15 @@
 <section class="tb-widget-settings flex flex-col" [formGroup]="sendRpcWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.common-settings</legend>
-    <mat-form-field class="mat-block flex-1">
-      <mat-label translate>widgets.rpc.widget-title</mat-label>
-      <input matInput formControlName="title">
-    </mat-form-field>
+    <tb-string-pattern-autocomplete class="mat-block flex-1"
+                                    brackets="curly"
+                                    predefinedValuesButton="true"
+                                    label="{{'widgets.rpc.common-settings' | translate }}"
+                                    [disabled]="!sendRpcWidgetSettingsForm.get('showLabel').value"
+                                    [predefinedValues]="predefinedValues"
+                                    placeholderText="{{ 'widgets.rpc.widget-title' | translate }}"
+                                    formControlName="title"
+    ></tb-string-pattern-autocomplete>
     <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.button-label</mat-label>
       <input matInput formControlName="buttonText">

ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component } from '@angular/core';
-import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -32,6 +32,8 @@ export class SendRpcWidgetSettingsComponent extends WidgetSettingsComponent {
 
   contentTypes = ContentType;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {
     super(store);

ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html

@@ -86,9 +86,16 @@
         {{ 'widgets.single-switch.label' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex flex-1"
+                                      appearance="outline"
+                                      brackets="curly"
+                                      subscriptSizing="dynamic"
+                                      predefinedValuesButton="true"
+                                      [disabled]="!singleSwitchWidgetSettingsForm.get('showLabel').value"
+                                      [predefinedValues]="predefinedValues"
+                                      placeholderText="{{ 'widget-config.set' | translate }}"
+                                      formControlName="label"
+       ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="labelFont"
                           [previewText]="singleSwitchWidgetSettingsForm.get('label').value">
         </tb-font-settings>

ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component } from '@angular/core';
-import { TargetDevice, WidgetSettings, WidgetSettingsComponent, widgetType } from '@shared/models/widget.models';
+import { TargetDevice, WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues, widgetType } from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -51,6 +51,8 @@ export class SingleSwitchWidgetSettingsComponent extends WidgetSettingsComponent
 
   singleSwitchWidgetSettingsForm: UntypedFormGroup;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {
     super(store);

ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.html

@@ -18,10 +18,14 @@
 <section class="tb-widget-settings flex flex-col" [formGroup]="slideToggleWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.common-settings</legend>
-    <mat-form-field class="mat-block flex-1">
-      <mat-label translate>widgets.rpc.slide-toggle-label</mat-label>
-      <input matInput formControlName="title">
-    </mat-form-field>
+    <tb-string-pattern-autocomplete class="mat-block flex-1" 
+                                    brackets="curly" 
+                                    predefinedValuesButton="true"
+                                    label="{{'widgets.rpc.slide-toggle-label' | translate }}"
+                                    [predefinedValues]="predefinedValues"
+                                    placeholderText="{{ 'widget-config.set' | translate }}"
+                                    formControlName="title"
+    ></tb-string-pattern-autocomplete>
     <section class="flex flex-row xs:flex-col gt-xs:gap-2">
       <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.rpc.label-position</mat-label>

ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component } from '@angular/core';
-import { TargetDevice, WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { TargetDevice, WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -31,6 +31,8 @@ export class SlideToggleWidgetSettingsComponent extends WidgetSettingsComponent
 
   slideToggleWidgetSettingsForm: UntypedFormGroup;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {
     super(store);

ui-ngx/src/app/modules/home/components/widget/lib/settings/control/update-device-attribute-widget-settings.component.html

@@ -18,10 +18,14 @@
 <section class="tb-widget-settings flex flex-col" [formGroup]="updateDeviceAttributeWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.common-settings</legend>
-    <mat-form-field class="mat-block flex-1">
-      <mat-label translate>widgets.rpc.widget-title</mat-label>
-      <input matInput formControlName="title">
-    </mat-form-field>
+    <tb-string-pattern-autocomplete class="mat-block flex-1" 
+                                    brackets="curly" 
+                                    predefinedValuesButton="true"
+                                    label="{{'widgets.rpc.widget-title' | translate }}"
+                                    [predefinedValues]="predefinedValues"
+                                    placeholderText="{{ 'widget-config.set' | translate }}"
+                                    formControlName="title"
+    ></tb-string-pattern-autocomplete>
     <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.button-label</mat-label>
       <input matInput formControlName="buttonText">

ui-ngx/src/app/modules/home/components/widget/lib/settings/control/update-device-attribute-widget-settings.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component } from '@angular/core';
-import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -32,6 +32,8 @@ export class UpdateDeviceAttributeWidgetSettingsComponent extends WidgetSettings
 
   contentTypes = ContentType;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {
     super(store);

ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-widget-settings.component.html

@@ -20,9 +20,15 @@
     <div class="tb-form-panel-title" translate>widgets.table.table-header</div>
     <div class="tb-form-row">
       <div class="fixed-title-width">{{ 'widgets.table.entities-table-title' | translate }}</div>
-      <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
-        <input matInput formControlName="entitiesTitle" placeholder="{{ 'widget-config.set' | translate }}">
-      </mat-form-field>
+      <tb-string-pattern-autocomplete class="flex-1" 
+                                        appearance="outline"
+                                        brackets="curly" 
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="entitiesTitle"
+      ></tb-string-pattern-autocomplete>
     </div>
     <div class="tb-form-row">
       <mat-slide-toggle class="mat-slide"  formControlName="enableStickyHeader">

ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-widget-settings.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component } from '@angular/core';
-import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -31,6 +31,8 @@ export class EntitiesTableWidgetSettingsComponent extends WidgetSettingsComponen
   entitiesTableWidgetSettingsForm: UntypedFormGroup;
   pageStepSizeValues = [];
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {
     super(store);

ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entity-count-widget-settings.component.html

@@ -18,6 +18,6 @@
 <ng-container [formGroup]="entityCountWidgetSettingsForm">
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.entity-count.entity-count-card-style</div>
-    <tb-count-widget-settings alarmElseEntity="false" formControlName="entityCountSettings"></tb-count-widget-settings>
+    <tb-count-widget-settings alarmElseEntity="false" [predefinedValues]="predefinedValues" formControlName="entityCountSettings"></tb-count-widget-settings>
   </div>
 </ng-container>

ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entity-count-widget-settings.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component } from '@angular/core';
-import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -29,6 +29,8 @@ import { countDefaultSettings } from '@home/components/widget/lib/count/count-wi
 export class EntityCountWidgetSettingsComponent extends WidgetSettingsComponent {
 
   entityCountWidgetSettingsForm: UntypedFormGroup;
+  
+  predefinedValues = widgetTitleAutocompleteValues;
 
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {

ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-single-device-widget-settings.component.html

@@ -16,10 +16,15 @@
 
 -->
 <section class="tb-widget-settings flex flex-col" [formGroup]="gatewayConfigSingleDeviceWidgetSettingsForm">
-  <mat-form-field class="mat-block flex-1">
-    <mat-label translate>widgets.gateway.gateway-title</mat-label>
-    <input matInput formControlName="gatewayTitle">
-  </mat-form-field>
+  <tb-string-pattern-autocomplete class="mat-block flex-1" 
+                                  brackets="curly" 
+                                  subscriptSizing="fixed"
+                                  predefinedValuesButton="true"
+                                  label="{{ 'widgets.gateway.gateway-title' | translate }}"
+                                  [predefinedValues]="predefinedValues"
+                                  placeholderText="{{ 'widget-config.set' | translate }}"
+                                  formControlName="gatewayTitle"
+  ></tb-string-pattern-autocomplete>
   <mat-slide-toggle formControlName="readOnly" class="slide-block">
     {{ 'widgets.gateway.read-only' | translate }}
   </mat-slide-toggle>

ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-single-device-widget-settings.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component } from '@angular/core';
-import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -28,6 +28,8 @@ import { AppState } from '@core/core.state';
 export class GatewayConfigSingleDeviceWidgetSettingsComponent extends WidgetSettingsComponent {
 
   gatewayConfigSingleDeviceWidgetSettingsForm: UntypedFormGroup;
+  
+  predefinedValues = widgetTitleAutocompleteValues;
 
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {

ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-widget-settings.component.html

@@ -18,10 +18,15 @@
 <section class="tb-widget-settings flex flex-col" [formGroup]="gatewayConfigWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.gateway.general-settings</legend>
-    <mat-form-field class="mat-block flex-1">
-      <mat-label translate>widgets.gateway.widget-title</mat-label>
-      <input matInput formControlName="widgetTitle">
-    </mat-form-field>
+    <tb-string-pattern-autocomplete class="mat-block flex-1" 
+                                    brackets="curly" 
+                                    subscriptSizing="fixed"
+                                    predefinedValuesButton="true"
+                                    label="{{ 'widgets.gateway.widget-title' | translate }}"
+                                    [predefinedValues]="predefinedValues"
+                                    placeholderText="{{ 'widget-config.set' | translate }}"
+                                    formControlName="widgetTitle"
+    ></tb-string-pattern-autocomplete>
     <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.gateway.default-archive-file-name</mat-label>
       <input matInput formControlName="archiveFileName">

ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-widget-settings.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component } from '@angular/core';
-import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -28,6 +28,8 @@ import { AppState } from '@core/core.state';
 export class GatewayConfigWidgetSettingsComponent extends WidgetSettingsComponent {
 
   gatewayConfigWidgetSettingsForm: UntypedFormGroup;
+  
+  predefinedValues = widgetTitleAutocompleteValues;
 
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {

ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-events-widget-settings.component.html

@@ -16,10 +16,15 @@
 
 -->
 <section class="tb-widget-settings flex flex-col" [formGroup]="gatewayEventsWidgetSettingsForm">
-  <mat-form-field class="mat-block flex-1">
-    <mat-label translate>widgets.gateway.events-title</mat-label>
-    <input matInput formControlName="eventsTitle">
-  </mat-form-field>
+  <tb-string-pattern-autocomplete class="mat-block flex-1" 
+                                  brackets="curly" 
+                                  subscriptSizing="fixed"
+                                  predefinedValuesButton="true"
+                                  label="{{ 'widgets.gateway.events-title' | translate }}"
+                                  [predefinedValues]="predefinedValues"
+                                  placeholderText="{{ 'widget-config.set' | translate }}"
+                                  formControlName="eventsTitle"
+  ></tb-string-pattern-autocomplete>
   <mat-form-field class="mat-block flex-1" floatLabel="always">
     <mat-label translate>widgets.gateway.events-filter</mat-label>
     <mat-chip-grid #chipList formControlName="eventsReg">

ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-events-widget-settings.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component } from '@angular/core';
-import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -32,6 +32,8 @@ export class GatewayEventsWidgetSettingsComponent extends WidgetSettingsComponen
   separatorKeysCodes = [ENTER, COMMA, SEMICOLON];
 
   gatewayEventsWidgetSettingsForm: UntypedFormGroup;
+  
+  predefinedValues = widgetTitleAutocompleteValues;
 
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {

ui-ngx/src/app/modules/home/components/widget/lib/settings/input/photo-camera-input-widget-settings.component.html

@@ -20,9 +20,16 @@
     <div class="tb-form-panel-title" translate>widgets.input-widgets.general-settings</div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" translate>widgets.input-widgets.widget-title</div>
-      <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
-        <input matInput formControlName="widgetTitle" placeholder="{{ 'widget-config.set' | translate }}">
-      </mat-form-field>
+      <tb-string-pattern-autocomplete class="flex-1"
+                                      brackets="curly"
+                                      subscriptSizing="dynamic"
+                                      predefinedValuesButton="true"
+                                      appearance="outline"
+                                      label="{{ 'widgets.input-widgets.widget-title' | translate }}"
+                                      [predefinedValues]="predefinedValues"
+                                      placeholderText="{{ 'widget-config.set' | translate }}"
+                                      formControlName="widgetTitle"
+      ></tb-string-pattern-autocomplete>
     </div>
   </div>
   <div class="tb-form-panel">

ui-ngx/src/app/modules/home/components/widget/lib/settings/input/photo-camera-input-widget-settings.component.ts

@@ -16,9 +16,9 @@
 
 import { Component } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { AppState } from '@core/core.state';
 import { Store } from '@ngrx/store';
-import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
 
 @Component({
   selector: 'tb-photo-camera-input-widget-settings',
@@ -29,6 +29,8 @@ export class PhotoCameraInputWidgetSettingsComponent extends WidgetSettingsCompo
 
   photoCameraInputWidgetSettingsForm: UntypedFormGroup;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {
     super(store);

ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-attribute-general-settings.component.html

@@ -18,10 +18,15 @@
 <section class="tb-widget-settings" [formGroup]="updateAttributeGeneralSettingsFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field class="mat-block flex-1">
-      <mat-label translate>widgets.input-widgets.widget-title</mat-label>
-      <input matInput formControlName="widgetTitle">
-    </mat-form-field>
+    <tb-string-pattern-autocomplete class="mat-block flex-1" 
+                                              brackets="curly" 
+                                              subscriptSizing="fixed"
+                                              predefinedValuesButton="true"
+                                              label="{{ 'widgets.input-widgets.widget-title' | translate }}"
+                                              [predefinedValues]="predefinedValues"
+                                              placeholderText="{{ 'widget-config.set' | translate }}"
+                                              formControlName="widgetTitle"
+    ></tb-string-pattern-autocomplete>
     <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
       <mat-slide-toggle class="flex-1 gt-xs:max-w-25% gt-xs:flex-full" formControlName="showLabel">
         {{ 'widgets.input-widgets.show-label' | translate }}

ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-attribute-general-settings.component.ts

@@ -29,6 +29,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { TranslateService } from '@ngx-translate/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { widgetTitleAutocompleteValues } from '@app/shared/public-api';
 
 export interface UpdateAttributeGeneralSettings {
   widgetTitle: string;
@@ -77,6 +78,8 @@ export class UpdateAttributeGeneralSettingsComponent extends PageComponent imple
 
   @Input()
   hasLabelValue = true;
+  
+  predefinedValues = widgetTitleAutocompleteValues;
 
   private modelValue: UpdateAttributeGeneralSettings;
 

ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-boolean-attribute-widget-settings.component.html

@@ -18,10 +18,15 @@
 <section class="tb-widget-settings" [formGroup]="updateBooleanAttributeWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field class="mat-block flex-1">
-      <mat-label translate>widgets.input-widgets.widget-title</mat-label>
-      <input matInput formControlName="widgetTitle">
-    </mat-form-field>
+    <tb-string-pattern-autocomplete class="mat-block flex-1" 
+                                              brackets="curly" 
+                                              subscriptSizing="fixed"
+                                              predefinedValuesButton="true"
+                                              label="{{ 'widgets.input-widgets.widget-title' | translate }}"
+                                              [predefinedValues]="predefinedValues"
+                                              placeholderText="{{ 'widget-config.set' | translate }}"
+                                              formControlName="widgetTitle"
+    ></tb-string-pattern-autocomplete>
     <mat-slide-toggle formControlName="showResultMessage" class="slide-block">
       {{ 'widgets.input-widgets.show-result-message' | translate }}
     </mat-slide-toggle>

ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-boolean-attribute-widget-settings.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component } from '@angular/core';
-import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -28,6 +28,8 @@ import { AppState } from '@core/core.state';
 export class UpdateBooleanAttributeWidgetSettingsComponent extends WidgetSettingsComponent {
 
   updateBooleanAttributeWidgetSettingsForm: UntypedFormGroup;
+  
+  predefinedValues = widgetTitleAutocompleteValues;
 
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {

ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-image-attribute-widget-settings.component.html

@@ -18,10 +18,15 @@
 <section class="tb-widget-settings" [formGroup]="updateImageAttributeWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field class="mat-block flex-1">
-      <mat-label translate>widgets.input-widgets.widget-title</mat-label>
-      <input matInput formControlName="widgetTitle">
-    </mat-form-field>
+    <tb-string-pattern-autocomplete class="mat-block flex-1" 
+                                              brackets="curly" 
+                                              subscriptSizing="fixed"
+                                              predefinedValuesButton="true"
+                                              label="{{ 'widgets.input-widgets.widget-title' | translate }}"
+                                              [predefinedValues]="predefinedValues"
+                                              placeholderText="{{ 'widget-config.set' | translate }}"
+                                              formControlName="widgetTitle"
+    ></tb-string-pattern-autocomplete>
     <mat-slide-toggle formControlName="showResultMessage" class="slide-block">
       {{ 'widgets.input-widgets.show-result-message' | translate }}
     </mat-slide-toggle>

ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-image-attribute-widget-settings.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component } from '@angular/core';
-import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -28,6 +28,8 @@ import { AppState } from '@core/core.state';
 export class UpdateImageAttributeWidgetSettingsComponent extends WidgetSettingsComponent {
 
   updateImageAttributeWidgetSettingsForm: UntypedFormGroup;
+  
+  predefinedValues = widgetTitleAutocompleteValues;
 
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {

ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-json-attribute-widget-settings.component.html

@@ -18,10 +18,15 @@
 <section class="tb-widget-settings" [formGroup]="updateJsonAttributeWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field class="mat-block flex-1">
-      <mat-label translate>widgets.input-widgets.widget-title</mat-label>
-      <input matInput formControlName="widgetTitle">
-    </mat-form-field>
+    <tb-string-pattern-autocomplete class="mat-block flex-1" 
+                                              brackets="curly" 
+                                              subscriptSizing="fixed"
+                                              predefinedValuesButton="true"
+                                              label="{{ 'widgets.input-widgets.widget-title' | translate }}"
+                                              [predefinedValues]="predefinedValues"
+                                              placeholderText="{{ 'widget-config.set' | translate }}"
+                                              formControlName="widgetTitle"
+    ></tb-string-pattern-autocomplete>
     <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
       <mat-slide-toggle class="flex-1 gt-xs:max-w-25% gt-xs:flex-full" formControlName="showLabel">
         {{ 'widgets.input-widgets.show-label' | translate }}

ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-json-attribute-widget-settings.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component } from '@angular/core';
-import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -28,6 +28,8 @@ import { AppState } from '@core/core.state';
 export class UpdateJsonAttributeWidgetSettingsComponent extends WidgetSettingsComponent {
 
   updateJsonAttributeWidgetSettingsForm: UntypedFormGroup;
+  
+  predefinedValues = widgetTitleAutocompleteValues;
 
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {

ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-location-attribute-widget-settings.component.html

@@ -18,10 +18,15 @@
 <section class="tb-widget-settings" [formGroup]="updateLocationAttributeWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field class="mat-block flex-1">
-      <mat-label translate>widgets.input-widgets.widget-title</mat-label>
-      <input matInput formControlName="widgetTitle">
-    </mat-form-field>
+    <tb-string-pattern-autocomplete class="mat-block flex-1" 
+                                              brackets="curly" 
+                                              subscriptSizing="fixed"
+                                              predefinedValuesButton="true"
+                                              label="{{ 'widgets.input-widgets.widget-title' | translate }}"
+                                              [predefinedValues]="predefinedValues"
+                                              placeholderText="{{ 'widget-config.set' | translate }}"
+                                              formControlName="widgetTitle"
+    ></tb-string-pattern-autocomplete>
     <mat-slide-toggle formControlName="showResultMessage" class="slide-block">
       {{ 'widgets.input-widgets.show-result-message' | translate }}
     </mat-slide-toggle>

ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-location-attribute-widget-settings.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component } from '@angular/core';
-import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -28,6 +28,8 @@ import { AppState } from '@core/core.state';
 export class UpdateLocationAttributeWidgetSettingsComponent extends WidgetSettingsComponent {
 
   updateLocationAttributeWidgetSettingsForm: UntypedFormGroup;
+  
+  predefinedValues = widgetTitleAutocompleteValues;
 
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {

ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.html

@@ -18,10 +18,15 @@
 <section class="tb-widget-settings" [formGroup]="updateMultipleAttributesWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field class="mat-block flex-1">
-      <mat-label translate>widgets.input-widgets.widget-title</mat-label>
-      <input matInput formControlName="widgetTitle">
-    </mat-form-field>
+    <tb-string-pattern-autocomplete class="mat-block flex-1" 
+                                              brackets="curly" 
+                                              subscriptSizing="fixed"
+                                              predefinedValuesButton="true"
+                                              label="{{ 'widgets.input-widgets.widget-title' | translate }}"
+                                              [predefinedValues]="predefinedValues"
+                                              placeholderText="{{ 'widget-config.set' | translate }}"
+                                              formControlName="widgetTitle"
+    ></tb-string-pattern-autocomplete>
     <mat-slide-toggle formControlName="showResultMessage" class="slide-block">
       {{ 'widgets.input-widgets.show-result-message' | translate }}
     </mat-slide-toggle>

ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component } from '@angular/core';
-import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -28,6 +28,8 @@ import { AppState } from '@core/core.state';
 export class UpdateMultipleAttributesWidgetSettingsComponent extends WidgetSettingsComponent {
 
   updateMultipleAttributesWidgetSettingsForm: UntypedFormGroup;
+  
+  predefinedValues = widgetTitleAutocompleteValues;
 
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {