UI: Refactoring css and save color

ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html

@@ -23,7 +23,7 @@
     <fieldset *ngFor="let source of sources" [ngClass]="{'fields-group': settings.showGroupTitle}">
       <legend class="group-title" *ngIf="settings.showGroupTitle">{{ getGroupTitle(source.datasource) }}
       </legend>
-      <div fxLayout="row" class="layout-wrap"
+      <div class="tb-multiple-input-layout layout-wrap"
            [ngClass]="{'vertical-alignment': isVerticalAlignment || changeAlignment}">
         <div *ngFor="let key of visibleKeys(source)"
              [ngStyle]="{width: (isVerticalAlignment || changeAlignment) ? '100%' : inputWidthSettings}">
@@ -173,8 +173,8 @@
             </mat-form-field>
           </div>
 
-          <div class="color-picker-input" *ngIf="key.settings.dataKeyValueType === 'color'">
+          <div class="tb-form-row space-between color-picker-input" *ngIf="key.settings.dataKeyValueType === 'color'">
-            <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+            <div class="label-container">
               <ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon">
                 <mat-icon *ngIf="!key.settings.safeCustomIcon; else customToggleIcon">{{key.settings.icon}}</mat-icon>
                 <ng-template #customToggleIcon>
@@ -183,40 +183,35 @@
               </ng-container>
               {{key.label}}
             </div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
+            <tb-color-input asBoxInput
-              <tb-color-input asBoxInput
+                            [required]="key.settings.required"
-                              [required]="key.settings.required"
+                            [requiredText]="getErrorMessageText(key.settings, 'required')"
-                              [requiredText]="getErrorMessageText(key.settings, 'required')"
+                            openOnInput
-                              (colorChanged)="inputChanged(source, key)"
+                            formControlName="{{key.formId}}">
-                              openOnInput
+            </tb-color-input>
-                              formControlName="{{key.formId}}">
-              </tb-color-input>
-            </div>
           </div>
         </div>
       </div>
     </fieldset>
   </div>
-  <div class="mat-padding" fxLayout="row" fxLayoutAlign="end center"
+  <div class="mat-padding tb-multiple-input--buttons-container"
        *ngIf="entityDetected && isAllParametersValid && settings.showActionButtons">
     <button mat-button color="primary" type="button"
-            (click)="discardAll()" style="max-height: 50px; margin-right:20px;"
+            (click)="discardAll()" class="tb-multiple-input--buttons-container__button"
             [disabled]="!multipleInputFormGroup.dirty">
       {{ resetButtonLabel }}
     </button>
     <button mat-button mat-raised-button color="primary" type="submit"
-            style="max-height: 50px; margin-right:20px;"
+            class="tb-multiple-input--buttons-container__button"
             [disabled]="!multipleInputFormGroup.dirty || multipleInputFormGroup.invalid">
       {{ saveButtonLabel }}
     </button>
   </div>
-  <div class="tb-multiple-input__errors" fxLayout="column" fxLayoutAlign="center center" style="height: 100%;"
+  <div class="tb-multiple-input__errors" *ngIf="(!entityDetected || !isAllParametersValid) && datasourceDetected">
-       *ngIf="(!entityDetected || !isAllParametersValid) && datasourceDetected">
+    <div class="tb-multiple-input__error" [fxHide]="entityDetected">
-    <div style="text-align: center; font-size: 18px; color: #a0a0a0;" [fxHide]="entityDetected">
       {{ 'widgets.input-widgets.no-entity-selected' | translate }}
     </div>
-    <div style="text-align: center; font-size: 18px; color: #a0a0a0;"
+    <div class="tb-multiple-input__error" [fxShow]="entityDetected && !isAllParametersValid">
-         [fxShow]="entityDetected && !isAllParametersValid">
       {{ 'widgets.input-widgets.not-allowed-entity' | translate }}
     </div>
   </div>

ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.scss

@@ -37,17 +37,22 @@
       }
     }
 
-    .color-picker-input {
+    .tb-multiple-input-layout {
-      height: 56px;
       display: flex;
       flex-direction: row;
-      align-items: center;
+      align-items: start;
-      justify-content: space-between;
+    }
-      gap: 16px;
+
+    .color-picker-input {
       padding: 7px 16px 7px 12px;
       margin: 0 10px 22px 0;
-      border: 1px solid rgba(0, 0, 0, 0.4);
+      border-color: rgba(0, 0, 0, 0.4);
-      border-radius: 6px;
+
+      .label-container {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+      }
 
       .mat-icon, img {
         margin-right: 5px;
@@ -78,6 +83,30 @@
     .vertical-alignment {
       flex-direction: column;
     }
+
+    &--buttons-container {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: end;
+      &__button {
+        max-height: 50px;
+        margin-right:20px;
+      }
+    }
+
+    &__errors {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+    &__error {
+      text-align: center;
+      font-size: 18px;
+      color: #a0a0a0;
+    }
   }
 }
 

ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts

@@ -390,6 +390,12 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
               }
             });
           }
+        } else if (key.settings.dataKeyValueType === 'color') {
+          formControl.valueChanges.pipe(
+            takeUntil(this.destroy$)
+          ).subscribe(() => {
+            this.inputChanged(source, key);
+          });
         }
         this.multipleInputFormGroup.addControl(key.formId, formControl);
       }

ui-ngx/src/app/shared/components/color-input.component.ts

@@ -14,17 +14,7 @@
 /// limitations under the License.
 ///
 
-import {
+import { ChangeDetectorRef, Component, forwardRef, Input, OnInit, Renderer2, ViewContainerRef } from '@angular/core';
-  ChangeDetectorRef,
-  Component,
-  EventEmitter,
-  forwardRef,
-  Input,
-  OnInit,
-  Output,
-  Renderer2,
-  ViewContainerRef
-} from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -110,8 +100,6 @@ export class ColorInputComponent extends PageComponent implements OnInit, Contro
   @Input()
   disabled: boolean;
 
-  @Output() colorChanged: EventEmitter<any> = new EventEmitter();
-
   private modelValue: string;
 
   private propagateChange = null;
@@ -174,7 +162,6 @@ export class ColorInputComponent extends PageComponent implements OnInit, Contro
     if (this.modelValue !== color) {
       this.modelValue = color;
       this.propagateChange(this.modelValue);
-      this.colorChanged.emit(color);
     }
   }