Merge pull request #9442 from ArtemDzhereleiko/AD/improvement/font-settings/line-height

Improvement for font settings panel added settings to disabled and hide line height

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

@@ -73,7 +73,7 @@
       </mat-select>
     </mat-form-field>
   </div>
-  <div class="tb-form-row no-border no-padding">
+  <div class="tb-form-row no-border no-padding" [fxHide]="disabledLineHeight">
     <div class="fixed-title-width" translate>widgets.widget-font.line-height</div>
     <mat-form-field *ngIf="!autoScale" fxFlex appearance="outline" subscriptSizing="dynamic">
       <input matInput formControlName="lineHeight" placeholder="{{ 'widget-config.set' | translate }}">

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

@@ -69,6 +69,10 @@ export class FontSettingsPanelComponent extends PageComponent implements OnInit
   @coerceBoolean()
   autoScale = false;
 
+  @Input()
+  @coerceBoolean()
+  disabledLineHeight = false;
+
   @Input()
   popover: TbPopoverComponent<FontSettingsPanelComponent>;
 
@@ -106,7 +110,7 @@ export class FontSettingsPanelComponent extends PageComponent implements OnInit
         family: [this.font?.family, []],
         weight: [this.font?.weight, []],
         style: [this.font?.style, []],
-        lineHeight: [{ value: this.font?.lineHeight, disabled: this.autoScale }, []]
+        lineHeight: [{ value: this.font?.lineHeight, disabled: this.autoScale || this.disabledLineHeight }, []]
       }
     );
     this.updatePreviewStyle(this.font);

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

@@ -54,6 +54,10 @@ export class FontSettingsComponent implements OnInit, ControlValueAccessor {
   @coerceBoolean()
   autoScale = false;
 
+  @Input()
+  @coerceBoolean()
+  disabledLineHeight = false;
+
   private modelValue: Font;
 
   private propagateChange = null;
@@ -92,7 +96,8 @@ export class FontSettingsComponent implements OnInit, ControlValueAccessor {
         font: this.modelValue,
         initialPreviewStyle: this.initialPreviewStyle,
         clearButton: this.clearButton,
-        autoScale: this.autoScale
+        autoScale: this.autoScale,
+        disabledLineHeight: this.disabledLineHeight
       };
       if (isDefinedAndNotNull(this.previewText)) {
         const previewText = typeof this.previewText === 'string' ? this.previewText : this.previewText();