UI: LwmM2M device provife change style ID parameters

@@ -22,7 +22,7 @@
       [selectable]="!disabled"
       [selectable]="!disabled"
       [removable]="!disabled"
       [removable]="!disabled"
       (removed)="remove(objectLwm2m)">
       (removed)="remove(objectLwm2m)">
-      {{objectLwm2m.name}} <{{objectLwm2m.keyId}}>
+      {{objectLwm2m.name}} #{{objectLwm2m.keyId}}
       <mat-icon matChipRemove *ngIf="!disabled">close</mat-icon>
       <mat-icon matChipRemove *ngIf="!disabled">close</mat-icon>
     </mat-chip>
     </mat-chip>
     <input matInput type="text" placeholder="{{ !disabled ? ('device-profile.lwm2m.object-list' | translate) : '' }}"
     <input matInput type="text" placeholder="{{ !disabled ? ('device-profile.lwm2m.object-list' | translate) : '' }}"

@@ -24,9 +24,9 @@
       [expanded]="isExpend"
       [expanded]="isExpend"
       [disabled]="isExpend">
       [disabled]="isExpend">
       <mat-expansion-panel-header>
       <mat-expansion-panel-header>
-        <mat-panel-title class="tb-panel-title-height" fxLayout="row">
+        <mat-panel-title class="tb-panel" fxLayout="row">
           <div fxFlex="30" fxLayoutAlign="start center">
           <div fxFlex="30" fxLayoutAlign="start center">
-            {{ 'device-profile.lwm2m.instance' | translate }} <<b>{{instances.get('id').value}}</b>>
+            <span class="tb-panel-title">{{ 'device-profile.lwm2m.instance' | translate }}</span>&nbsp;#{{instances.get('id').value}}
           </div>
           </div>
           <div fxLayoutAlign="center center" fxFlex="10">
           <div fxLayoutAlign="center center" fxFlex="10">
             <mat-checkbox color="warn"
             <mat-checkbox color="warn"

@@ -14,8 +14,12 @@
  * limitations under the License.
  * limitations under the License.
  */
  */
 :host{
 :host{
-  .tb-panel-title-height {
+  .tb-panel {
     min-height: 42px;
     min-height: 42px;
+
+    .tb-panel-title {
+      font-weight: 500;
+    }
   }
   }
 
 
   .instance-row {
   .instance-row {

@@ -211,7 +211,7 @@ export class Lwm2mObserveAttrTelemetryInstancesComponent implements ControlValue
   }
   }
 
 
   getNameInstance(instance: Instance): string {
   getNameInstance(instance: Instance): string {
-    return `${this.translate.instant('device-profile.lwm2m.instance')} <${instance.id}>`;
+    return `${this.translate.instant('device-profile.lwm2m.instance')} #${instance.id}`;
   }
   }
 
 
   disableObserveInstance = (instance: AbstractControl): boolean => {
   disableObserveInstance = (instance: AbstractControl): boolean => {

@@ -38,7 +38,7 @@
     *ngFor="let resourceLwM2M of resourcesFormArray.controls; let $index = index; trackBy: trackByParams">
     *ngFor="let resourceLwM2M of resourcesFormArray.controls; let $index = index; trackBy: trackByParams">
     <div [formGroupName]="$index" fxLayout="row" fxLayoutAlign="start center" class="resource-list">
     <div [formGroupName]="$index" fxLayout="row" fxLayoutAlign="start center" class="resource-list">
       <div class="resource-name" fxFlex="30">
       <div class="resource-name" fxFlex="30">
-        <<b>{{resourceLwM2M.get('id').value}}</b>> <b>{{resourceLwM2M.get('name').value}}</b>
+        #{{resourceLwM2M.get('id').value}} <span class="name">{{resourceLwM2M.get('name').value}}</span>
       </div>
       </div>
       <div fxFlex="10" fxLayoutAlign="center center">
       <div fxFlex="10" fxLayoutAlign="center center">
         <mat-checkbox formControlName="attribute" color="warn">
         <mat-checkbox formControlName="attribute" color="warn">

@@ -18,6 +18,10 @@
     white-space: nowrap;
     white-space: nowrap;
     overflow: hidden;
     overflow: hidden;
     text-overflow: ellipsis;
     text-overflow: ellipsis;
+
+    .name {
+      font-weight: 500;
+    }
   }
   }
 
 
   .checkbox-column-title {
   .checkbox-column-title {

@@ -105,6 +105,8 @@ export class Lwm2mObserveAttrTelemetryResourcesComponent implements ControlValue
       this.resourcesFormGroup.disable({emitEvent: false});
       this.resourcesFormGroup.disable({emitEvent: false});
     } else {
     } else {
       this.resourcesFormArray.controls.forEach(resource => {
       this.resourcesFormArray.controls.forEach(resource => {
+        resource.get('id').enable({emitEvent: false});
+        resource.get('name').enable({emitEvent: false});
         resource.get('keyName').enable({emitEvent: false});
         resource.get('keyName').enable({emitEvent: false});
         resource.get('attribute').enable({emitEvent: false});
         resource.get('attribute').enable({emitEvent: false});
         resource.get('telemetry').enable({onlySelf: true});
         resource.get('telemetry').enable({onlySelf: true});
@@ -124,7 +126,7 @@ export class Lwm2mObserveAttrTelemetryResourcesComponent implements ControlValue
   }
   }
 
 
   getNameResourceLwm2m(resourceLwM2M: ResourceLwM2M): string {
   getNameResourceLwm2m(resourceLwM2M: ResourceLwM2M): string {
-    return `<${resourceLwM2M.id}> ${resourceLwM2M.name}`;
+    return `#${resourceLwM2M.id} ${resourceLwM2M.name}`;
   }
   }
 
 
   private updatedResources(resources: ResourceLwM2M[]): void {
   private updatedResources(resources: ResourceLwM2M[]): void {

@@ -22,7 +22,7 @@
       [formGroupName]="$index">
       [formGroupName]="$index">
       <mat-expansion-panel-header >
       <mat-expansion-panel-header >
         <mat-panel-title fxLayoutAlign="start center" >
         <mat-panel-title fxLayoutAlign="start center" >
-          <b><i>{{ objectLwM2M.get('name').value}}</i></b>&nbsp;&lt;{{ objectLwM2M.get('id').value}}>
+          <span class="tb-panel-title">{{ objectLwM2M.get('name').value}}</span>&nbsp;#{{ objectLwM2M.get('keyId').value}}
           <span fxFlex></span>
           <span fxFlex></span>
           <tb-profile-lwm2m-attributes
           <tb-profile-lwm2m-attributes
             formControlName="attributes"
             formControlName="attributes"

@@ -18,8 +18,7 @@
     padding: 2px;
     padding: 2px;
   }
   }
 
 
-  .tb-panel-title-height {
-    user-select: none;
-    min-height: 32px;
+  .tb-panel-title {
+    font-weight: 500;
   }
   }
 }
 }

@@ -264,6 +264,6 @@ export class Lwm2mObserveAttrTelemetryComponent implements ControlValueAccessor,
   }
   }
 
 
   getNameObject = (objectLwM2M: ObjectLwM2M): string => {
   getNameObject = (objectLwM2M: ObjectLwM2M): string => {
-    return `${objectLwM2M.name} <${objectLwM2M.id}>`;
+    return `${objectLwM2M.name} #${objectLwM2M.keyId}`;
   }
   }
 }
 }

@@ -1233,7 +1233,7 @@
             "instances-input": "Input Instance Id value",
             "instances-input": "Input Instance Id value",
             "instances-input-holder": "Input Instance number...",
             "instances-input-holder": "Input Instance number...",
             "instance": "Instance",
             "instance": "Instance",
-            "resource-label": "<id> Resource name",
+            "resource-label": "#ID Resource name",
             "observe-label": "Observe",
             "observe-label": "Observe",
             "attribute-label": "Attribute",
             "attribute-label": "Attribute",
             "telemetry-label": "Telemetry",
             "telemetry-label": "Telemetry",