Merge pull request #5233 from vvlladd28/improvement/datasource-detected

[3.3.2] UI: Fixed - widgets showed two errors at the same time.

@@ -122,7 +122,7 @@
     </div>
   </div>
   <div class="tb-multiple-input__errors" fxLayout="column" fxLayoutAlign="center center" style="height: 100%;"
-       *ngIf="!entityDetected || !isAllParametersValid">
+       *ngIf="(!entityDetected || !isAllParametersValid) && datasourceDetected">
     <div style="text-align: center; font-size: 18px; color: #a0a0a0;" [fxHide]="entityDetected">
       {{ 'widgets.input-widgets.no-entity-selected' | translate }}
     </div>

@@ -117,6 +117,7 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
   resetButtonLabel: string;
 
   entityDetected = false;
+  datasourceDetected = false;
   isAllParametersValid = true;
 
   multipleInputFormGroup: FormGroup;
@@ -203,7 +204,8 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
   }
 
   private updateDatasources() {
-    if (this.datasources && this.datasources.length) {
+    this.datasourceDetected = this.datasources?.length !== 0;
+    if (this.datasourceDetected) {
       this.entityDetected = true;
       let keyIndex = 0;
       this.datasources.forEach((datasource) => {

@@ -17,6 +17,8 @@
 -->
 <div fxLayout="column" fxLayoutAlign="center center" style="width: 100%; height: 100%;">
   <canvas fxFlex #canvas [ngStyle]="{display: qrCodeText && !invalidQrCodeText ? 'block' : 'none'}"></canvas>
-  <div *ngIf="!qrCodeText && !invalidQrCodeText" translate>entity.no-data</div>
-  <div *ngIf="invalidQrCodeText" translate>widgets.invalid-qr-code-text</div>
+  <div *ngIf="datasourceDetected">
+    <div *ngIf="!qrCodeText && !invalidQrCodeText" style="text-align: center" translate>entity.no-data</div>
+    <div *ngIf="invalidQrCodeText" style="text-align: center" translate>widgets.invalid-qr-code-text</div>
+  </div>
 </div>

@@ -54,6 +54,7 @@ export class QrCodeWidgetComponent extends PageComponent implements OnInit, Afte
 
   qrCodeText: string;
   invalidQrCodeText = false;
+  datasourceDetected = false;
 
   private viewInited: boolean;
   private scheduleUpdateCanvas: boolean;
@@ -95,6 +96,8 @@ export class QrCodeWidgetComponent extends PageComponent implements OnInit, Afte
           data: []
         }
       ];
+    } else {
+      this.datasourceDetected = false;
     }
     if (initialData) {
       const data = parseData(initialData);
@@ -103,6 +106,7 @@ export class QrCodeWidgetComponent extends PageComponent implements OnInit, Afte
         safeExecute(this.qrCodeTextFunction, [dataSourceData]) : this.settings.qrCodeTextPattern;
       const replaceInfo = processPattern(pattern, dataSourceData);
       qrCodeText = fillPattern(pattern, replaceInfo, dataSourceData);
+      this.datasourceDetected = true;
     }
     this.updateQrCodeText(qrCodeText);
   }

@@ -45,6 +45,7 @@ $error-height: 14px !default;
       font-weight: 500;
       color: #757575;
       white-space: nowrap;
+      z-index: 1;
 
       .off-label {
         color: #b7b5b5;
@@ -86,6 +87,8 @@ $error-height: 14px !default;
 :host ::ng-deep {
   .tb-switch {
     .switch {
+      z-index: 1;
+
       mat-slide-toggle {
         position: absolute;
         top: 0;