Fixed send rpc and segmented button widgets

ui-ngx/src/app/modules/home/components/widget/config/basic/button/segmented-button-basic-config.component.html

@@ -126,7 +126,6 @@
                                           subscriptSizing="dynamic"
                                           [predefinedValuesButton]="true"
                                           [predefinedValues]="predefinedValues"
-                                          [disabled]="!segmentedButtonWidgetConfigForm.get('leftAppearance').get('showLabel').value"
                                           placeholderText="{{ 'widget-config.set' | translate }}"
                                           formControlName="label"
           ></tb-string-pattern-autocomplete>
@@ -164,7 +163,6 @@
                                           subscriptSizing="dynamic"
                                           [predefinedValuesButton]="true"
                                           [predefinedValues]="predefinedValues"
-                                          [disabled]="!segmentedButtonWidgetConfigForm.get('rightAppearance').get('showLabel').value"
                                           placeholderText="{{ 'widget-config.set' | translate }}"
                                           formControlName="label"
           ></tb-string-pattern-autocomplete>

ui-ngx/src/app/modules/home/components/widget/config/basic/button/segmented-button-basic-config.component.ts

@@ -142,4 +142,52 @@ export class SegmentedButtonBasicConfigComponent extends BasicWidgetConfigCompon
     return this.widgetConfig;
   }
 
+
+  protected validatorTriggers(): string[] {
+    return ['appearance.leftAppearance.showLabel', 'appearance.leftAppearance.showIcon', 'appearance.rightAppearance.showLabel', 'appearance.rightAppearance.showIcon',];
+  }
+
+  protected updateValidators(emitEvent: boolean) {
+    const showLeftLabel: boolean = this.segmentedButtonWidgetConfigForm.get('appearance.leftAppearance.showLabel').value;
+    const showRightLabel: boolean = this.segmentedButtonWidgetConfigForm.get('appearance.rightAppearance.showLabel').value;
+
+    const showLeftIcon: boolean = this.segmentedButtonWidgetConfigForm.get('appearance.leftAppearance.showIcon').value;
+    const showRightIcon: boolean = this.segmentedButtonWidgetConfigForm.get('appearance.rightAppearance.showIcon').value;
+
+    if (showLeftLabel) {
+      this.segmentedButtonWidgetConfigForm.get('appearance.leftAppearance.label').enable({emitEvent});
+      this.segmentedButtonWidgetConfigForm.get('appearance.leftAppearance.labelFont').enable({emitEvent});
+    } else {
+      this.segmentedButtonWidgetConfigForm.get('appearance.leftAppearance.label').disable({emitEvent});
+      this.segmentedButtonWidgetConfigForm.get('appearance.leftAppearance.labelFont').disable({emitEvent});
+    }
+
+    if (showRightLabel) {
+      this.segmentedButtonWidgetConfigForm.get('appearance.rightAppearance.label').enable({emitEvent});
+      this.segmentedButtonWidgetConfigForm.get('appearance.rightAppearance.labelFont').enable({emitEvent});
+    } else {
+      this.segmentedButtonWidgetConfigForm.get('appearance.rightAppearance.label').disable({emitEvent});
+      this.segmentedButtonWidgetConfigForm.get('appearance.rightAppearance.labelFont').disable({emitEvent});
+    }
+
+    if (showLeftIcon) {
+      this.segmentedButtonWidgetConfigForm.get('appearance.leftAppearance.icon').enable({emitEvent});
+      this.segmentedButtonWidgetConfigForm.get('appearance.leftAppearance.iconSize').enable({emitEvent});
+      this.segmentedButtonWidgetConfigForm.get('appearance.leftAppearance.iconSizeUnit').enable({emitEvent});
+    } else {
+      this.segmentedButtonWidgetConfigForm.get('appearance.leftAppearance.icon').disable({emitEvent});
+      this.segmentedButtonWidgetConfigForm.get('appearance.leftAppearance.iconSize').disable({emitEvent});
+      this.segmentedButtonWidgetConfigForm.get('appearance.leftAppearance.iconSizeUnit').disable({emitEvent});
+    }
+
+    if (showRightIcon) {
+      this.segmentedButtonWidgetConfigForm.get('appearance.rightAppearance.icon').enable({emitEvent});
+      this.segmentedButtonWidgetConfigForm.get('appearance.rightAppearance.iconSize').enable({emitEvent});
+      this.segmentedButtonWidgetConfigForm.get('appearance.rightAppearance.iconSizeUnit').enable({emitEvent});
+    } else {
+      this.segmentedButtonWidgetConfigForm.get('appearance.rightAppearance.icon').disable({emitEvent});
+      this.segmentedButtonWidgetConfigForm.get('appearance.rightAppearance.iconSize').disable({emitEvent});
+      this.segmentedButtonWidgetConfigForm.get('appearance.rightAppearance.iconSizeUnit').disable({emitEvent});
+    }
+  }
 }

ui-ngx/src/app/modules/home/components/widget/lib/settings/button/segmented-button-widget-settings.component.html

@@ -117,7 +117,6 @@
                                           brackets="curly"
                                           subscriptSizing="dynamic"
                                           predefinedValuesButton="true"
-                                          [disabled]="!segmentedButtonWidgetSettingsForm.get('leftAppearance').get('showLabel').value"
                                           [predefinedValues]="predefinedValues"
                                           placeholderText="{{ 'widget-config.set' | translate }}"
                                           formControlName="label"
@@ -155,7 +154,6 @@
                                           brackets="curly"
                                           subscriptSizing="dynamic"
                                           predefinedValuesButton="true"
-                                          [disabled]="!segmentedButtonWidgetSettingsForm.get('rightAppearance').get('showLabel').value"
                                           [predefinedValues]="predefinedValues"
                                           placeholderText="{{ 'widget-config.set' | translate }}"
                                           formControlName="label"

ui-ngx/src/app/modules/home/components/widget/lib/settings/button/segmented-button-widget-settings.component.ts

@@ -38,6 +38,7 @@ import {
   WidgetButtonToggleState,
   widgetButtonToggleStatesTranslations
 } from '@home/components/widget/lib/button/segmented-button-widget.models';
+import { ValueCardLayout } from '@home/components/widget/lib/cards/value-card-widget.models';
 
 @Component({
   selector: 'tb-segmented-button-widget-settings',
@@ -139,4 +140,52 @@ export class SegmentedButtonWidgetSettingsComponent extends WidgetSettingsCompon
       })
     });
   }
+
+  protected validatorTriggers(): string[] {
+    return ['appearance.leftAppearance.showLabel', 'appearance.leftAppearance.showIcon', 'appearance.rightAppearance.showLabel', 'appearance.rightAppearance.showIcon',];
+  }
+
+  protected updateValidators(emitEvent: boolean) {
+    const showLeftLabel: boolean = this.segmentedButtonWidgetSettingsForm.get('appearance.leftAppearance.showLabel').value;
+    const showRightLabel: boolean = this.segmentedButtonWidgetSettingsForm.get('appearance.rightAppearance.showLabel').value;
+
+    const showLeftIcon: boolean = this.segmentedButtonWidgetSettingsForm.get('appearance.leftAppearance.showIcon').value;
+    const showRightIcon: boolean = this.segmentedButtonWidgetSettingsForm.get('appearance.rightAppearance.showIcon').value;
+
+    if (showLeftLabel) {
+      this.segmentedButtonWidgetSettingsForm.get('appearance.leftAppearance.label').enable({emitEvent});
+      this.segmentedButtonWidgetSettingsForm.get('appearance.leftAppearance.labelFont').enable({emitEvent});
+    } else {
+      this.segmentedButtonWidgetSettingsForm.get('appearance.leftAppearance.label').disable({emitEvent});
+      this.segmentedButtonWidgetSettingsForm.get('appearance.leftAppearance.labelFont').disable({emitEvent});
+    }
+
+    if (showRightLabel) {
+      this.segmentedButtonWidgetSettingsForm.get('appearance.rightAppearance.label').enable({emitEvent});
+      this.segmentedButtonWidgetSettingsForm.get('appearance.rightAppearance.labelFont').enable({emitEvent});
+    } else {
+      this.segmentedButtonWidgetSettingsForm.get('appearance.rightAppearance.label').disable({emitEvent});
+      this.segmentedButtonWidgetSettingsForm.get('appearance.rightAppearance.labelFont').disable({emitEvent});
+    }
+
+    if (showLeftIcon) {
+      this.segmentedButtonWidgetSettingsForm.get('appearance.leftAppearance.icon').enable({emitEvent});
+      this.segmentedButtonWidgetSettingsForm.get('appearance.leftAppearance.iconSize').enable({emitEvent});
+      this.segmentedButtonWidgetSettingsForm.get('appearance.leftAppearance.iconSizeUnit').enable({emitEvent});
+    } else {
+      this.segmentedButtonWidgetSettingsForm.get('appearance.leftAppearance.icon').disable({emitEvent});
+      this.segmentedButtonWidgetSettingsForm.get('appearance.leftAppearance.iconSize').disable({emitEvent});
+      this.segmentedButtonWidgetSettingsForm.get('appearance.leftAppearance.iconSizeUnit').disable({emitEvent});
+    }
+
+    if (showRightIcon) {
+      this.segmentedButtonWidgetSettingsForm.get('appearance.rightAppearance.icon').enable({emitEvent});
+      this.segmentedButtonWidgetSettingsForm.get('appearance.rightAppearance.iconSize').enable({emitEvent});
+      this.segmentedButtonWidgetSettingsForm.get('appearance.rightAppearance.iconSizeUnit').enable({emitEvent});
+    } else {
+      this.segmentedButtonWidgetSettingsForm.get('appearance.rightAppearance.icon').disable({emitEvent});
+      this.segmentedButtonWidgetSettingsForm.get('appearance.rightAppearance.iconSize').disable({emitEvent});
+      this.segmentedButtonWidgetSettingsForm.get('appearance.rightAppearance.iconSizeUnit').disable({emitEvent});
+    }
+  }
 }

ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.html

@@ -18,15 +18,10 @@
 <section class="tb-widget-settings flex flex-col" [formGroup]="sendRpcWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.common-settings</legend>
-    <tb-string-pattern-autocomplete class="mat-block flex-1"
+    <mat-form-field class="mat-block flex-1">
-                                    brackets="curly"
+      <mat-label translate>widgets.rpc.widget-title</mat-label>
-                                    predefinedValuesButton="true"
+      <input matInput formControlName="title">
-                                    label="{{'widgets.rpc.common-settings' | translate }}"
+    </mat-form-field>
-                                    [disabled]="!sendRpcWidgetSettingsForm.get('showLabel').value"
-                                    [predefinedValues]="predefinedValues"
-                                    placeholderText="{{ 'widgets.rpc.widget-title' | translate }}"
-                                    formControlName="title"
-    ></tb-string-pattern-autocomplete>
     <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.button-label</mat-label>
       <input matInput formControlName="buttonText">

ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component } from '@angular/core';
-import { WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
+import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -32,8 +32,6 @@ export class SendRpcWidgetSettingsComponent extends WidgetSettingsComponent {
 
   contentTypes = ContentType;
 
-  predefinedValues = widgetTitleAutocompleteValues;
-
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {
     super(store);