From c94d5041a6b5c80e5f02a292332cbebf2928d0b6 Mon Sep 17 00:00:00 2001
From: rusikv <rvasylkiv@thingsboard.io>
Date: Mon, 27 Mar 2023 17:08:23 +0300
Subject: [PATCH] Moved sparkplug hint to string items list attribute, added
 subscriptSizing

---
 ...-profile-transport-configuration.component.html | 14 +++++++-------
 .../components/string-items-list.component.html    |  2 +-
 .../components/string-items-list.component.ts      |  5 ++++-
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html
index ecc9d1923d..ac91bf3de3 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html
@@ -22,14 +22,14 @@
   <div *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('sparkplug').value"
        class="tb-hint" innerHTML="{{ 'device-profile.mqtt-device-topic-filters-spark-plug-hint' | translate }}"></div>
   <tb-string-items-list *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('sparkplug').value"
-    editable
-    label="{{ 'device-profile.mqtt-device-topic-filters-spark-plug-attribute-metric-names' | translate }}"
-    placeholder="{{'device-profile.mqtt-device-topic-filters-spark-plug-attribute-metric-names' | translate}}"
-    floatLabel="always"
-    formControlName="sparkplugAttributesMetricNames">
+                        editable
+                        label="{{ 'device-profile.mqtt-device-topic-filters-spark-plug-attribute-metric-names' | translate }}"
+                        placeholder="{{'device-profile.mqtt-device-topic-filters-spark-plug-attribute-metric-names' | translate}}"
+                        hint="{{ 'device-profile.mqtt-device-topic-filters-spark-plug-attribute-metric-names-hint' | translate }}"
+                        floatLabel="always"
+                        subscriptSizing="dynamic"
+                        formControlName="sparkplugAttributesMetricNames">
   </tb-string-items-list>
-  <div *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('sparkplug').value"
-       class="tb-hint" innerHTML="{{ 'device-profile.mqtt-device-topic-filters-spark-plug-attribute-metric-names-hint' | translate }}"></div>
 </form>
 <form [formGroup]="mqttDeviceProfileTransportConfigurationFormGroup" style="padding-bottom: 16px;" *ngIf="!mqttDeviceProfileTransportConfigurationFormGroup.get('sparkplug').value">
   <fieldset class="fields-group">
diff --git a/ui-ngx/src/app/shared/components/string-items-list.component.html b/ui-ngx/src/app/shared/components/string-items-list.component.html
index a3820211b6..f1f9f0d118 100644
--- a/ui-ngx/src/app/shared/components/string-items-list.component.html
+++ b/ui-ngx/src/app/shared/components/string-items-list.component.html
@@ -16,7 +16,7 @@
 
 -->
 <section [formGroup]="stringItemsForm">
-  <mat-form-field fxFlex class="mat-block" [floatLabel]="floatLabel" [appearance]="appearance">
+  <mat-form-field fxFlex class="mat-block" [floatLabel]="floatLabel" [appearance]="appearance" [subscriptSizing]="subscriptSizing">
     <mat-label *ngIf="label">{{ label }}</mat-label>
     <mat-chip-grid #itemsChipList formControlName="items" [required]="required">
       <mat-chip-row *ngFor="let item of stringItemsList"
diff --git a/ui-ngx/src/app/shared/components/string-items-list.component.ts b/ui-ngx/src/app/shared/components/string-items-list.component.ts
index 161c8169e3..3fdea38bbe 100644
--- a/ui-ngx/src/app/shared/components/string-items-list.component.ts
+++ b/ui-ngx/src/app/shared/components/string-items-list.component.ts
@@ -18,7 +18,7 @@ import { Component, forwardRef, Input } from '@angular/core';
 import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 import { MatChipInputEvent } from '@angular/material/chips';
 import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes';
-import { FloatLabelType, MatFormFieldAppearance } from '@angular/material/form-field';
+import { FloatLabelType, MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
 import { coerceBoolean } from '@shared/decorators/coerce-boolean';
 
 @Component({
@@ -79,6 +79,9 @@ export class StringItemsListComponent implements ControlValueAccessor{
   @coerceBoolean()
   editable = false;
 
+  @Input()
+  subscriptSizing: SubscriptSizing = 'fixed'
+
   private propagateChange = (v: any) => { };
 
   constructor(private fb: FormBuilder) {