Lwm2m: front: refactoring <mat-expansion-panel-header>

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-profile-transport-configuration.component.html

@@ -60,7 +60,8 @@
                       <mat-form-field fxFlex>
                         <mat-label>{{ 'device-profile.lwm2m.lifetime' | translate }}</mat-label>
                         <input matInput type="number" formControlName="lifetime" required>
-                        <mat-error *ngIf="lwm2mDeviceProfileTransportConfFormGroup.get('lifetime').hasError('required')">
+                        <mat-error
+                          *ngIf="lwm2mDeviceProfileTransportConfFormGroup.get('lifetime').hasError('required')">
                           {{ 'device-profile.lwm2m.lifetime' | translate }}
                           <strong>{{ 'device-profile.lwm2m.required' | translate }}</strong>
                         </mat-error>
@@ -102,13 +103,15 @@
                       class="tb-panel-title">{{ 'device-profile.lwm2m.bootstrap-server' | translate | uppercase }}</div>
                   </mat-panel-title>
                 </mat-expansion-panel-header>
-                <div class="mat-padding">
-                  <tb-profile-lwm2m-device-config-server
-                    [required]="required"
-                    formControlName="bootstrapServer"
-                    [bootstrapServerIs]=true>
-                  </tb-profile-lwm2m-device-config-server>
-                </div>
+                <ng-template matExpansionPanelContent>
+                  <div class="mat-padding">
+                    <tb-profile-lwm2m-device-config-server
+                      [required]="required"
+                      formControlName="bootstrapServer"
+                      [bootstrapServerIs]=true>
+                    </tb-profile-lwm2m-device-config-server>
+                  </div>
+                </ng-template>
               </mat-expansion-panel>
             </mat-accordion>
             <mat-accordion multi="true" class="mat-body-1">
@@ -118,13 +121,15 @@
                     <div class="tb-panel-title">{{ 'device-profile.lwm2m.lwm2m-server' | translate | uppercase }}</div>
                   </mat-panel-title>
                 </mat-expansion-panel-header>
-                <div class="mat-padding">
-                  <tb-profile-lwm2m-device-config-server
-                    [required]="required"
-                    formControlName="lwm2mServer"
-                    [bootstrapServerIs]=false>
-                  </tb-profile-lwm2m-device-config-server>
-                </div>
+                <ng-template matExpansionPanelContent>
+                  <div class="mat-padding">
+                    <tb-profile-lwm2m-device-config-server
+                      [required]="required"
+                      formControlName="lwm2mServer"
+                      [bootstrapServerIs]=false>
+                    </tb-profile-lwm2m-device-config-server>
+                  </div>
+                </ng-template>
               </mat-expansion-panel>
             </mat-accordion>
           </div>

ui-ngx/src/app/modules/home/pages/device/lwm2m/security-config.component.html

@@ -83,13 +83,15 @@
                   <mat-error *ngIf="lwm2mConfigFormGroup.get('clientKey').hasError('pattern')">
                     {{ 'device.lwm2m-security-config.client-key' | translate }}
                     <strong>{{ translate.get('device.lwm2m-security-config.pattern_hex_dec', {
-                      count: 0 }) | async }}</strong>
+                      count: 0
+                    }) | async }}</strong>
                   </mat-error>
                   <mat-error *ngIf="(lwm2mConfigFormGroup.get('clientKey').hasError('maxlength') ||
                     lwm2mConfigFormGroup.get('clientKey').hasError('minlength'))">
                     {{ 'device.lwm2m-security-config.client-key' | translate }}
                     <strong>{{ translate.get('device.lwm2m-security-config.pattern_hex_dec', {
-                      count: lenMaxKeyClient }) | async }}</strong>
+                      count: lenMaxKeyClient
+                    }) | async }}</strong>
                   </mat-error>
                 </mat-form-field>
               </div>
@@ -112,12 +114,14 @@
                         class="tb-panel-title">{{ 'device.lwm2m-security-config.bootstrap-server' | translate | uppercase }}</div>
                     </mat-panel-title>
                   </mat-expansion-panel-header>
-                  <div class="mat-padding">
-                    <tb-security-config-server-lwm2m
-                      [formControlName]="bootstrapServer"
-                      [serverFormGroup]="bootstrapFormGroup">
-                    </tb-security-config-server-lwm2m>
-                  </div>
+                  <ng-template matExpansionPanelContent>
+                    <div class="mat-padding">
+                      <tb-security-config-server-lwm2m
+                        [formControlName]="bootstrapServer"
+                        [serverFormGroup]="bootstrapFormGroup">
+                      </tb-security-config-server-lwm2m>
+                    </div>
+                  </ng-template>
                 </mat-expansion-panel>
               </mat-accordion>
               <mat-accordion multi="true" class="mat-body-1">
@@ -128,12 +132,14 @@
                         class="tb-panel-title">{{ 'device.lwm2m-security-config.lwm2m-server' | translate | uppercase }}</div>
                     </mat-panel-title>
                   </mat-expansion-panel-header>
-                  <div class="mat-padding">
-                    <tb-security-config-server-lwm2m
-                      [formControlName]="lwm2mServer"
-                      [serverFormGroup]="lwm2mServerFormGroup">
-                    </tb-security-config-server-lwm2m>
-                  </div>
+                  <ng-template matExpansionPanelContent>
+                    <div class="mat-padding">
+                      <tb-security-config-server-lwm2m
+                        [formControlName]="lwm2mServer"
+                        [serverFormGroup]="lwm2mServerFormGroup">
+                      </tb-security-config-server-lwm2m>
+                    </div>
+                  </ng-template>
                 </mat-expansion-panel>
               </mat-accordion>
             </div>