Merge commit 'eb971958b844f692abd7464d1ae0f3c0ff331e8d' into issue/74…

…43-Signature-Pad---Uploading-to-a-Storage---Unexpected-behavior-on-an-attempt-to-submit-a-survey-without-sending-a-signature-to-the-server-first

docs/Troubleshooting.md

@@ -6,9 +6,9 @@ description: Common errors that occur when you add Form Library component to you
 
 This help topic describes how to troubleshoot problems that may occur when you use the SurveyJS Form Library in your application.
 
-## The survey doesn't contain visible pages or questions
+## The survey doesn't contain any visible elements.
 
-**Issue**: The survey appears empty, and the following message is displayed: "The survey doesn't contain visible pages or questions".
+**Issue**: The survey appears empty, and the following message is displayed: "The survey doesn't contain any visible elements.".
 
 **Solution**: You may encounter this issue in one of the following cases described below. The solution depends on the case.
 

packages/survey-angular-ui/src/components/survey-header/logo-image.component.html

@@ -1,12 +1,14 @@
 <ng-template #template>
-  <img
-  [class]="survey.css.logoImage"
-  [attr.src]="survey.locLogo.renderedHtml | safeUrl"
-  [style.width]="survey.renderedStyleLogoWidth"
-  [style.height]="survey.renderedStyleLogoHeight"
-  [attr.width]="survey.renderedLogoWidth"
-  [attr.height]="survey.renderedLogoHeight"
-  [attr.alt]="survey.locTitle.renderedHtml"
-  [style.objectFit]="survey.logoFit"
-  />
+  <div [class]="survey.logoClassNames">
+    <img
+    [class]="survey.css.logoImage"
+    [attr.src]="survey.locLogo.renderedHtml | safeUrl"
+    [style.width]="survey.renderedStyleLogoWidth"
+    [style.height]="survey.renderedStyleLogoHeight"
+    [attr.width]="survey.renderedLogoWidth"
+    [attr.height]="survey.renderedLogoHeight"
+    [attr.alt]="survey.locTitle.renderedHtml"
+    [style.objectFit]="survey.logoFit"
+    />
+  </div>
 </ng-template>

packages/survey-angular-ui/src/components/survey-header/survey-header.component.html

@@ -1,6 +1,4 @@
-<div *ngIf="survey.isLogoBefore" [class]="survey.logoClassNames">
-  <ng-template [component]="{ name: survey.getElementWrapperComponentName(survey, 'logo-image'), data: { data: survey.getElementWrapperComponentData(survey, 'logo-image') } }"></ng-template>
-</div>
+<ng-template *ngIf="survey.isLogoBefore" [component]="{ name: survey.getElementWrapperComponentName(survey, 'logo-image'), data: { data: survey.getElementWrapperComponentData(survey, 'logo-image') } }"></ng-template>
 <div
   *ngIf="survey.renderedHasTitle"
   [class]="survey.css.headerText"
@@ -10,7 +8,5 @@
   <h5 *ngIf="survey.renderedHasDescription" [class]="survey.css.description" [model]="survey.locDescription" sv-ng-string></h5>
 </div>
 
-<div *ngIf="survey.isLogoAfter" [class]="survey.logoClassNames">
-  <ng-template [component]="{ name: survey.getElementWrapperComponentName(survey, 'logo-image'), data: { data: survey.getElementWrapperComponentData(survey, 'logo-image') } }"></ng-template>
-</div>
+<ng-template *ngIf="survey.isLogoAfter" [component]="{ name: survey.getElementWrapperComponentName(survey, 'logo-image'), data: { data: survey.getElementWrapperComponentData(survey, 'logo-image') } }"></ng-template>
 <div [class]="survey.css.headerClose"></div>

packages/survey-vue3-ui/src/Header.vue

@@ -1,11 +1,9 @@
 <template>
   <div v-if="survey.renderedHasHeader" :class="survey.css.header" ref="root">
-    <div v-if="survey.isLogoBefore" :class="survey.logoClassNames">
-      <component
-        :is="survey.getElementWrapperComponentName(survey, 'logo-image')"
-        :data="survey.getElementWrapperComponentData(survey, 'logo-image')"
-      ></component>
-    </div>
+    <component v-if="survey.isLogoBefore"
+      :is="survey.getElementWrapperComponentName(survey, 'logo-image')"
+      :data="survey.getElementWrapperComponentData(survey, 'logo-image')"
+    ></component>
 
     <div
       v-if="survey.renderedHasTitle"
@@ -18,12 +16,10 @@
       </h5>
     </div>
 
-    <div v-if="survey.isLogoAfter" :class="survey.logoClassNames">
-      <component
-        :is="survey.getElementWrapperComponentName(survey, 'logo-image')"
-        :data="survey.getElementWrapperComponentData(survey, 'logo-image')"
-      ></component>
-    </div>
+    <component v-if="survey.isLogoAfter"
+      :is="survey.getElementWrapperComponentName(survey, 'logo-image')"
+      :data="survey.getElementWrapperComponentData(survey, 'logo-image')"
+    ></component>
 
     <div :class="survey.css.headerClose"></div>
   </div>

packages/survey-vue3-ui/src/Logo.vue

@@ -1,16 +1,18 @@
 <template>
-  <img
-    :class="survey.css.logoImage"
-    :src="logoUrl"
-    :width="survey.renderedLogoWidth"
-    :height="survey.renderedLogoHeight"
-    :alt="survey.locTitle.renderedHtml"
-    :style="{
-          objectFit: survey.logoFit as any,
-          width: survey.renderedStyleLogoWidth,
-          height: survey.renderedStyleLogoHeight,
-        }"
-  />
+  <div :class="survey.logoClassNames">
+    <img
+      :class="survey.css.logoImage"
+      :src="logoUrl"
+      :width="survey.renderedLogoWidth"
+      :height="survey.renderedLogoHeight"
+      :alt="survey.locTitle.renderedHtml"
+      :style="{
+            objectFit: survey.logoFit as any,
+            width: survey.renderedStyleLogoWidth,
+            height: survey.renderedStyleLogoHeight,
+          }"
+    />
+  </div>
 </template>
 <script lang="ts" setup>
 import type { SurveyModel } from "survey-core";

src/base-interfaces.ts

@@ -297,7 +297,7 @@ export interface IQuestion extends IElement, ISurveyErrorOwner {
   hasTitle: boolean;
   isEmpty(): boolean;
   onSurveyValueChanged(newValue: any): any;
-  updateValueFromSurvey(newValue: any): any;
+  updateValueFromSurvey(newValue: any, clearData: boolean): void;
   updateCommentFromSurvey(newValue: any): any;
   supportGoNextPageAutomatic(): boolean;
   clearUnusedValues(): any;

src/defaultV2-theme/blocks/sd-imagepicker.scss

@@ -35,6 +35,15 @@
   align-items: center;
 }
 
+.sd-imagepicker__label {
+  position: relative;
+
+  .sd-visuallyhidden {
+    height: 100%;
+    margin: 0;
+  }
+}
+
 .sd-imagepicker__image-container {
   position: relative;
 }

src/localization/english.ts

@@ -16,7 +16,7 @@ export var englishStrings = {
   panelDynamicProgressText: "{0} of {1}",
   panelDynamicTabTextFormat: "Panel {panelIndex}",
   questionsProgressText: "Answered {0}/{1} questions",
-  emptySurvey: "The survey doesn't contain visible pages or questions.",
+  emptySurvey: "The survey doesn't contain any visible elements.",
   completingSurvey: "Thank you for completing the survey",
   completingSurveyBefore:
     "Our records show that you have already completed this survey.",

src/localization/hungarian.ts

@@ -15,7 +15,7 @@ export var hungarianSurveyStrings = {
   panelDynamicProgressText: "{0} / {1} rekord",
   panelDynamicTabTextFormat: "Panel {panelIndex}",
   questionsProgressText: "Válaszolt kérdések: {0} / {1}",
-  emptySurvey: "The survey doesn't contain visible pages or questions.",
+  emptySurvey: "The survey doesn't contain any visible elements.",
   completingSurvey: "Köszönjük, hogy kitöltötte felmérésünket!",
   completingSurveyBefore: "Már kitöltötte a felmérést.",
   loadingSurvey: "Felmérés betöltése...",

src/question.ts

@@ -2280,7 +2280,7 @@ export class Question extends SurveyElement<Question>
     return makeNameValid(name);
   }
   //IQuestion
-  updateValueFromSurvey(newValue: any): void {
+  updateValueFromSurvey(newValue: any, clearData: boolean = false): void {
     newValue = this.getUnbindValue(newValue);
     if (!!this.valueFromDataCallback) {
       newValue = this.valueFromDataCallback(newValue);
@@ -2293,6 +2293,9 @@ export class Question extends SurveyElement<Question>
       });
     } else {
       this.updateValueFromSurveyCore(newValue, <any>this.data !== <any>this.getSurvey());
+      if(clearData && isEmpty) {
+        this.isValueChangedDirectly = false;
+      }
     }
     this.updateDependedQuestions();
     this.updateIsAnswered();

src/question_baseselect.ts

@@ -1235,7 +1235,7 @@ export class QuestionSelectBase extends Question {
       this.onVisibleChoicesChanged();
     }
   }
-  updateValueFromSurvey(newValue: any) {
+  updateValueFromSurvey(newValue: any, clearData: boolean): void {
     var newComment = "";
     if (
       this.hasOther &&
@@ -1250,7 +1250,7 @@ export class QuestionSelectBase extends Question {
         newComment = this.data.getComment(this.getValueName());
       }
     }
-    super.updateValueFromSurvey(newValue);
+    super.updateValueFromSurvey(newValue, clearData);
     if((this.isRunningChoices || this.choicesByUrl.isRunning) && !this.isEmpty()) {
       this.cachedValueForUrlRequests = this.value;
     }

src/question_checkbox.ts

@@ -301,8 +301,8 @@ export class QuestionCheckboxModel extends QuestionCheckboxBase {
       .append(this.cssClasses.itemSelectAll, options.isSelectAllItem)
       .toString();
   }
-  updateValueFromSurvey(newValue: any): void {
-    super.updateValueFromSurvey(newValue);
+  updateValueFromSurvey(newValue: any, clearData: boolean): void {
+    super.updateValueFromSurvey(newValue, clearData);
     this.invisibleOldValues = {};
   }
   protected setDefaultValue() {

src/question_expression.ts

@@ -134,8 +134,8 @@ export class QuestionExpressionModel extends Question {
   protected onValueChanged() {
     this.updateFormatedValue();
   }
-  updateValueFromSurvey(newValue: any): void {
-    super.updateValueFromSurvey(newValue);
+  updateValueFromSurvey(newValue: any, clearData: boolean): void {
+    super.updateValueFromSurvey(newValue, clearData);
     this.updateFormatedValue();
   }
   protected getDisplayValueCore(keysAsText: boolean, value: any): any {

src/question_matrixdropdownbase.ts

@@ -1767,6 +1767,7 @@ export class QuestionMatrixDropdownModelBase extends QuestionMatrixBaseModel<Mat
     var questionPlainData = super.getPlainData(options);
     if (!!questionPlainData) {
       questionPlainData.isNode = true;
+      const prevData = Array.isArray(questionPlainData.data) ? [].concat(questionPlainData.data) : [];
       questionPlainData.data = this.visibleRows.map(
         (row: MatrixDropdownRowModelBase) => {
           var rowDataItem = <any>{
@@ -1791,6 +1792,7 @@ export class QuestionMatrixDropdownModelBase extends QuestionMatrixBaseModel<Mat
           return rowDataItem;
         }
       );
+      questionPlainData.data = questionPlainData.data.concat(prevData);
     }
     return questionPlainData;
   }

src/question_paneldynamic.ts

@@ -1979,6 +1979,7 @@ export class QuestionPanelDynamicModel extends Question
     var questionPlainData = super.getPlainData(options);
     if (!!questionPlainData) {
       questionPlainData.isNode = true;
+      const prevData = Array.isArray(questionPlainData.data) ? [].concat(questionPlainData.data) : [];
       questionPlainData.data = this.panels.map(
         (panel: PanelModel, index: number) => {
           var panelDataItem = <any>{
@@ -2001,6 +2002,7 @@ export class QuestionPanelDynamicModel extends Question
           return panelDataItem;
         }
       );
+      questionPlainData.data = questionPlainData.data.concat(prevData);
     }
     return questionPlainData;
   }

src/survey.ts

@@ -74,6 +74,7 @@ import { PopupModel } from "./popup";
 import { Cover } from "./header";
 import { surveyTimerFunctions } from "./surveytimer";
 import { QuestionSignaturePadModel } from "./question_signaturepad";
+import { SurveyTaskManagerModel } from "./surveyTaskManager";
 
 /**
  * The `SurveyModel` object contains properties and methods that allow you to control the survey and access its elements.
@@ -2741,7 +2742,7 @@ export class SurveyModel extends SurveyElementCore
   }
   public set data(data: any) {
     this.valuesHash = {};
-    this.setDataCore(data);
+    this.setDataCore(data, !data);
   }
   /**
    * Merges a specified data object with the object from the [`data`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#data) property.
@@ -2757,17 +2758,20 @@ export class SurveyModel extends SurveyElementCore
     this.mergeValues(data, newData);
     this.setDataCore(newData);
   }
-  public setDataCore(data: any): void {
+  public setDataCore(data: any, clearData: boolean = false): void {
+    if(clearData) {
+      this.valuesHash = {};
+    }
     if (data) {
       for (var key in data) {
         this.setDataValueCore(this.valuesHash, key, data[key]);
       }
     }
-    this.updateAllQuestionsValue();
+    this.updateAllQuestionsValue(clearData);
     this.notifyAllQuestionsOnValueChanged();
     this.notifyElementsOnAnyValueOrVariableChanged("");
     this.runConditions();
-    this.updateAllQuestionsValue();
+    this.updateAllQuestionsValue(clearData);
   }
   public getStructuredData(includePages: boolean = true, level: number = -1): any {
     if (level === 0) return this.data;
@@ -3331,8 +3335,7 @@ export class SurveyModel extends SurveyElementCore
     this.isLoading = false;
     this.completedByTriggers = undefined;
     if (clearData) {
-      this.data = null;
-      this.variablesHash = {};
+      this.setDataCore(null, true);
     }
     this.timerModel.spent = 0;
     for (var i = 0; i < this.pages.length; i++) {
@@ -5058,11 +5061,15 @@ export class SurveyModel extends SurveyElementCore
     if (this.onUploadFiles.isEmpty) {
       callback("error", this.getLocString("noUploadFilesHandler"));
     } else {
+      const task = this.taskManager.taskStarted("file");
       this.onUploadFiles.fire(this, {
         question: question,
         name: name,
         files: files || [],
-        callback: callback,
+        callback: (status, data) => {
+          this.taskManager.taskFinished(task);
+          callback(status, data);
+        },
       });
     }
     if (this.surveyPostId) {
@@ -5492,7 +5499,7 @@ export class SurveyModel extends SurveyElementCore
           (qValue === newValue && Array.isArray(qValue) && !!this.editingObj) ||
           !this.isTwoValueEquals(qValue, newValue)
         ) {
-          questions[i].updateValueFromSurvey(newValue);
+          questions[i].updateValueFromSurvey(newValue, false);
         }
       }
     }
@@ -5589,12 +5596,12 @@ export class SurveyModel extends SurveyElementCore
       this.locStrsChanged();
     }
   }
-  private updateAllQuestionsValue() {
+  private updateAllQuestionsValue(clearData: boolean) {
     var questions = this.getAllQuestions();
     for (var i: number = 0; i < questions.length; i++) {
       var q = <Question>questions[i];
       var valName = q.getValueName();
-      q.updateValueFromSurvey(this.getValue(valName));
+      q.updateValueFromSurvey(this.getValue(valName), clearData);
       if (q.requireUpdateCommentValue) {
         q.updateCommentFromSurvey(this.getComment(valName));
       }
@@ -6037,6 +6044,7 @@ export class SurveyModel extends SurveyElementCore
     const navComplete = new Action({
       id: "sv-nav-complete",
       visible: <any>new ComputedUpdater<boolean>(() => this.isCompleteButtonVisible),
+      enabled: <any>new ComputedUpdater<boolean>(() => !this.taskManager.hasActiveTasks),
       visibleIndex: 50,
       data: {
         mouseDown: () => this.navigationMouseDown(),
@@ -7429,6 +7437,8 @@ export class SurveyModel extends SurveyElementCore
     this.getAllQuestions().forEach(q => q.themeChanged(theme));
   }
 
+  private taskManager: SurveyTaskManagerModel = new SurveyTaskManagerModel();
+
   /**
    * Disposes of the survey model.
    *