From 3f8ef73de0d684e1b2a092c56736c79123d0d395 Mon Sep 17 00:00:00 2001
From: ArtemDzhereleiko <dgerik2015@gmail.com>
Date: Wed, 27 Oct 2021 19:12:23 +0300
Subject: [PATCH] Change position advanced settings and add lazy loadin for
 expansion panel

---
 .../widget/widget-config.component.html       | 62 ++++++++++---------
 1 file changed, 33 insertions(+), 29 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
index 7e69ca704a..4f379d95d4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
@@ -310,21 +310,6 @@
               <input matInput formControlName="titleTooltip">
             </mat-form-field>
           </div>
-          <mat-expansion-panel class="tb-settings">
-            <mat-expansion-panel-header>
-              <mat-panel-description fxLayoutAlign="end" translate>
-                widget-config.advanced-settings
-              </mat-panel-description>
-            </mat-expansion-panel-header>
-            <div fxFlex>
-              <tb-json-object-edit
-                [editorStyle]="{minHeight: '100px'}"
-                required
-                label="{{ 'widget-config.title-style' | translate }}"
-                formControlName="titleStyle"
-              ></tb-json-object-edit>
-            </div>
-          </mat-expansion-panel>
           <fieldset class="fields-group" fxLayout="column" fxLayoutGap="8px">
             <legend class="group-title" translate>widget-config.title-icon</legend>
             <mat-slide-toggle formControlName="showTitleIcon">
@@ -347,6 +332,21 @@
               </mat-form-field>
             </div>
           </fieldset>
+          <mat-expansion-panel class="tb-settings">
+            <mat-expansion-panel-header>
+              <mat-panel-description fxLayoutAlign="end" translate>
+                widget-config.advanced-settings
+              </mat-panel-description>
+            </mat-expansion-panel-header>
+              <ng-template matExpansionPanelContent>
+                <tb-json-object-edit
+                  [editorStyle]="{minHeight: '100px'}"
+                  required
+                  label="{{ 'widget-config.title-style' | translate }}"
+                  formControlName="titleStyle"
+                ></tb-json-object-edit>
+              </ng-template>
+          </mat-expansion-panel>
         </fieldset>
         <fieldset class="fields-group" fxLayout="column" fxLayoutGap="8px">
           <legend class="group-title" translate>widget-config.widget-style</legend>
@@ -391,14 +391,14 @@
                 widget-config.advanced-settings
               </mat-panel-description>
             </mat-expansion-panel-header>
-            <div fxFlex>
+            <ng-template matExpansionPanelContent>
               <tb-json-object-edit
                 [editorStyle]="{minHeight: '100px'}"
                 required
                 label="{{ 'widget-config.widget-style' | translate }}"
                 formControlName="widgetStyle"
               ></tb-json-object-edit>
-            </div>
+            </ng-template>
           </mat-expansion-panel>
         </fieldset>
         <fieldset class="fields-group fields-group-slider" fxLayout="column" fxLayoutGap="8px">
@@ -414,7 +414,9 @@
                 widget-config.advanced-settings
               </mat-panel-description>
             </mat-expansion-panel-header>
-            <tb-legend-config formControlName="legendConfig"></tb-legend-config>
+            <ng-template matExpansionPanelContent>
+              <tb-legend-config formControlName="legendConfig"></tb-legend-config>
+            </ng-template>
           </mat-expansion-panel>
         </fieldset>
         <fieldset [formGroup]="layoutSettings" class="fields-group fields-group-slider" fxLayout="column" fxLayoutGap="8px">
@@ -430,17 +432,19 @@
                 widget-config.advanced-settings
               </mat-panel-description>
             </mat-expansion-panel-header>
-            <div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center"
-                 fxLayoutGap="8px">
-              <mat-form-field fxFlex>
-                <mat-label translate>widget-config.order</mat-label>
-                <input matInput formControlName="mobileOrder" type="number" step="1">
-              </mat-form-field>
-              <mat-form-field fxFlex>
-                <mat-label translate>widget-config.height</mat-label>
-                <input matInput formControlName="mobileHeight" type="number" min="1" max="10" step="1">
-              </mat-form-field>
-            </div>
+            <ng-template matExpansionPanelContent>
+              <div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center"
+                   fxLayoutGap="8px">
+                <mat-form-field fxFlex>
+                  <mat-label translate>widget-config.order</mat-label>
+                  <input matInput formControlName="mobileOrder" type="number" step="1">
+                </mat-form-field>
+                <mat-form-field fxFlex>
+                  <mat-label translate>widget-config.height</mat-label>
+                  <input matInput formControlName="mobileHeight" type="number" min="1" max="10" step="1">
+                </mat-form-field>
+              </div>
+            </ng-template>
           </mat-expansion-panel>
         </fieldset>
         <div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center"