Merge commit '272f39ecd28a0d4d0f27f126b7ecf8a0a31ca51c' into issue/66…

…42-Matrix-wrong-paddings

docs/survey-localization.md

@@ -17,7 +17,9 @@ This article describes how to localize UI elements and contents of your survey.
 
 ### Available Languages
 
-Survey UI is translated into over 50 languages. We ship translated strings as [dictionary files](https://github.com/surveyjs/survey-library/tree/master/src/localization). They are supported by the community and may be incomplete. Feel free to add missing translations to existing dictionaries or create new dictionaries for other languages. You can use English as a base dictionary: copy the file, replace English translations in it, and submit a pull request with the resulting file to the [survey-library](https://github.com/surveyjs/survey-library) repository.
+Survey UI is translated into over 50 languages. We ship translated strings as [dictionary files](https://github.com/surveyjs/survey-library/tree/master/src/localization). They are supported by the community and may contain untranslated strings. To fill the gap, these strings are translated by <a href="https://learn.microsoft.com/en-us/azure/ai-services/translator/" target="_blank">Azure AI Translator by Microsoft</a>. Each dictionary file contains a log of machine translations at the end. You can use it to find individual machine-translated strings and revise them if required. Delete revised strings from the log to exclude them from machine translation.
+
+You can also create new dictionaries for unsupported languages. Use English as a base dictionary: copy the file, replace English translations in it, and submit a pull request with the resulting file to the [survey-library](https://github.com/surveyjs/survey-library) repository.
 
 ### Enable Localization and Switch Between Locales
 

packages/survey-angular-ui/src/components/dropdown/dropdown.component.ts

@@ -46,7 +46,7 @@ export class DropdownComponent extends BaseAngular implements OnInit {
       if (!!this.inputElementRef?.nativeElement) {
         const control: any = this.inputElementRef.nativeElement;
         const newValue = this.model.inputStringRendered;
-        if (!Helpers.isTwoValueEquals(newValue, control.value, false, true)) {
+        if (!Helpers.isTwoValueEquals(newValue, control.value, false, true, false)) {
           control.value = this.model.inputStringRendered || "";
         }
       }

packages/survey-angular-ui/src/questions/file.component.html

@@ -41,11 +41,11 @@
           tabindex="0"
           [class]="model.getChooseFileCss()"
           [attr.for]="model.inputId"
-          [attr.aria-label]="model.chooseButtonCaption"
+          [attr.aria-label]="model.chooseButtonText"
           [key2click]
           >
-          <span>{{ model.chooseButtonCaption }}</span>
-          <svg *ngIf="model.cssClasses.chooseFileIconId" [title]="model.chooseButtonCaption" [iconName]="model.cssClasses.chooseFileIconId" [size]="'auto'" sv-ng-svg-icon></svg>
+          <span>{{ model.chooseButtonText }}</span>
+          <svg *ngIf="model.cssClasses.chooseFileIconId" [title]="model.chooseButtonText" [iconName]="model.cssClasses.chooseFileIconId" [size]="'auto'" sv-ng-svg-icon></svg>
         </label>
         <span
           [class]="model.cssClasses.noFileChosen"

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

@@ -44,13 +44,13 @@
             tabindex="0"
             :class="question.getChooseFileCss()"
             :for="question.inputId"
-            v-bind:aria-label="question.chooseButtonCaption"
+            v-bind:aria-label="question.chooseButtonText"
             v-key2click
           >
-            <span>{{ question.chooseButtonCaption }}</span>
+            <span>{{ question.chooseButtonText }}</span>
             <sv-svg-icon
               v-if="question.cssClasses.chooseFileIconId"
-              :title="question.chooseButtonCaption"
+              :title="question.chooseButtonText"
               :iconName="question.cssClasses.chooseFileIconId"
               :size="'auto'"
             ></sv-svg-icon>

packages/survey-vue3-ui/src/components/dropdown/Dropdown.vue

@@ -144,7 +144,9 @@ const updateInputDomElement = () => {
   if (inputElement.value) {
     const control: any = inputElement.value;
     const newValue = model.value.inputStringRendered;
-    if (!Helpers.isTwoValueEquals(newValue, control.value)) {
+    if (
+      !Helpers.isTwoValueEquals(newValue, control.value, false, true, false)
+    ) {
       control.value = model.value.inputStringRendered;
     }
   }

src/calculatedValue.ts

@@ -145,7 +145,7 @@ export class CalculatedValue extends Base {
     if (!!this.expressionRunner) return;
     this.expressionRunner = new ExpressionRunner(this.expression);
     this.expressionRunner.onRunComplete = newValue => {
-      if (!Helpers.isTwoValueEquals(newValue, this.value, false, true)) {
+      if (!Helpers.isTwoValueEquals(newValue, this.value, false, true, false)) {
         this.setValue(newValue);
       }
       this.unlocCalculation();

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

@@ -10,6 +10,10 @@
   margin-top: calcSize(2);
 }
 
+.sd-page__row.sd-row--compact {
+  margin-top: var(--sd-base-vertical-padding);
+}
+
 .sd-row:first-of-type {
   margin-top: 0;
 }

src/dropdownListModel.ts

@@ -350,6 +350,7 @@ export class DropdownListModel extends Base {
   }
 
   public onClick(event: any): void {
+    if(this.question.readOnly) return;
     this._popupModel.toggleVisibility();
     this.focusItemOnClickAndPopup();
     if (this.searchEnabled && !!event && !!event.target) {

src/knockout/koquestion_file.ts

@@ -27,13 +27,18 @@ class QuestionFileImplementor extends QuestionImplementor {
         return [];
       })
     );
+    this.setObservaleObj("ko", ko.observable<string>());
     this.setObservaleObj("koInputTitle", ko.observable<string>());
     this.setObservaleObj(
       "koChooseFileCss",
       ko.pureComputed(() => {
         return this.question.getChooseFileCss();
       })
     );
+    this.setCallbackFunc("koGetChooseButtonText", () => {
+      this.question.koState();
+      return this.question.chooseButtonText;
+    });
     this.setCallbackFunc("ondrop", (data: any, event: any) => {
       this.question.onDrop(getOriginalEvent(event));
     });

src/knockout/templates/question-file.html

@@ -11,10 +11,10 @@
           <span data-bind="css: question.cssClasses.dragAreaPlaceholder, text: question.dragAreaPlaceholder"></span>
           <div data-bind="css: question.cssClasses.wrapper">
             <!-- ko ifnot: isReadOnly -->
-            <label tabindex="0" role="button" data-bind="css: question.koChooseFileCss, key2click, attr: { for: question.inputId, 'aria-label': question.chooseButtonCaption }">
-              <span data-bind="text: question.chooseButtonCaption"></span>
+            <label tabindex="0" role="button" data-bind="css: question.koChooseFileCss, key2click, attr: { for: question.inputId, 'aria-label': question.koGetChooseButtonText() }">
+              <span data-bind="text: question.koGetChooseButtonText()"></span>
               <!-- ko if: question.cssClasses.chooseFileIconId -->
-                  <!-- ko component: { name: 'sv-svg-icon', params: { title: question.chooseButtonCaption, iconName: question.cssClasses.chooseFileIconId, size: 'auto' } } --><!-- /ko -->
+                  <!-- ko component: { name: 'sv-svg-icon', params: { title: question.koGetChooseButtonText(), iconName: question.cssClasses.chooseFileIconId, size: 'auto' } } --><!-- /ko -->
               <!-- /ko -->
             </label>
             <!-- /ko -->

src/localization/english.ts

@@ -81,6 +81,7 @@ export var englishStrings = {
   clearCaption: "Clear",
   signaturePlaceHolder: "Sign here",
   chooseFileCaption: "Choose file",
+  replaceFileCaption: "Replace file",
   removeFileCaption: "Remove this file",
   booleanCheckedLabel: "Yes",
   booleanUncheckedLabel: "No",

src/panel.ts

@@ -149,7 +149,6 @@ export class QuestionRowModel extends Base {
     var preSetWidthElements = [];
     for (var i = 0; i < this.elements.length; i++) {
       var el = this.elements[i];
-      this.setElementMaxMinWidth(el);
 
       if (el.isVisible) {
         (<any>el).isSingleInRow = isSingleInRow;
@@ -182,16 +181,6 @@ export class QuestionRowModel extends Base {
       }
     }
   }
-  public setElementMaxMinWidth(el: IElement): void {
-    if (
-      el.width &&
-      typeof el.width === "string" &&
-      el.width.indexOf("%") === -1
-    ) {
-      el.minWidth = el.width;
-      el.maxWidth = el.width;
-    }
-  }
 
   private getRenderedCalcWidth(
     el: IElement,

src/question.ts

@@ -78,6 +78,7 @@ export class Question extends SurveyElement<Question>
   private locProcessedTitle: LocalizableString;
   protected isReadyValue: boolean = true;
   private commentElements: Array<HTMLElement>;
+  private dependedQuestions: Array<Question> = [];
 
   /**
    * An event that is raised when the question's ready state has changed (expressions are evaluated, choices are loaded from a web resource specified by the `choicesByUrl` property, etc.).
@@ -268,6 +269,24 @@ export class Question extends SurveyElement<Question>
       this.removeSelfFromList(this.parent.elements);
     }
   }
+  protected addDependedQuestion(question: Question): void {
+    if (!question || this.dependedQuestions.indexOf(question) > -1) return;
+    this.dependedQuestions.push(question);
+  }
+  protected removeDependedQuestion(question: Question): void {
+    if (!question) return;
+    var index = this.dependedQuestions.indexOf(question);
+    if (index > -1) {
+      this.dependedQuestions.splice(index, 1);
+    }
+  }
+  protected updateDependedQuestions(): void {
+    for (var i = 0; i < this.dependedQuestions.length; i++) {
+      this.dependedQuestions[i].updateDependedQuestion();
+    }
+  }
+  protected updateDependedQuestion(): void {}
+  protected resetDependedQuestion(): void {}
   public get isFlowLayout(): boolean {
     return this.getLayoutType() === "flow";
   }
@@ -1264,6 +1283,7 @@ export class Question extends SurveyElement<Question>
     this.setPropertyValue("comment", val);
     this.fireCallback(this.commentChangedCallback);
   }
+  public get isValueArray(): boolean { return false; }
   /**
    * Gets or sets the question value.
    * @see SurveyModel.setValue
@@ -1389,7 +1409,7 @@ export class Question extends SurveyElement<Question>
       if (res) return res;
     }
     value = value == undefined ? this.createValueCopy() : value;
-    if (this.isValueEmpty(value)) return this.getDisplayValueEmpty();
+    if (this.isValueEmpty(value, !this.allowSpaceAsAnswer)) return this.getDisplayValueEmpty();
     return this.getDisplayValueCore(keysAsText, value);
   }
   protected getDisplayValueCore(keyAsText: boolean, value: any): any {
@@ -1578,7 +1598,7 @@ export class Question extends SurveyElement<Question>
     return this.defaultValue;
   }
   protected isDefaultValueEmpty(): boolean {
-    return !this.defaultValueExpression && this.isValueEmpty(this.defaultValue);
+    return !this.defaultValueExpression && this.isValueEmpty(this.defaultValue, !this.allowSpaceAsAnswer);
   }
   protected getDefaultRunner(runner: ExpressionRunner, expression: string): ExpressionRunner {
     if (!runner && !!expression) {
@@ -1690,7 +1710,7 @@ export class Question extends SurveyElement<Question>
    * Returns `true` if the question value is an empty string, array, or object or if it equals `undefined` or `null`.
    */
   public isEmpty(): boolean {
-    return this.isValueEmpty(this.value);
+    return this.isValueEmpty(this.value, !this.allowSpaceAsAnswer);
   }
   public get isAnswered(): boolean {
     return this.getPropertyValue("isAnswered");
@@ -1906,11 +1926,12 @@ export class Question extends SurveyElement<Question>
       this.onCompletedAsyncValidators = null;
     }
   }
+  public allowSpaceAsAnswer: boolean;
   private isValueChangedInSurvey = false;
   protected allowNotifyValueChanged = true;
   protected setNewValue(newValue: any): void {
     if(this.isNewValueEqualsToValue(newValue)) return;
-    if(!this.isValueEmpty(newValue) && !this.isNewValueCorrect(newValue)) {
+    if(!this.isValueEmpty(newValue, !this.allowSpaceAsAnswer) && !this.isNewValueCorrect(newValue)) {
       ConsoleWarnings.inCorrectQuestionValue(this.name, newValue);
       return;
     }
@@ -1926,7 +1947,7 @@ export class Question extends SurveyElement<Question>
   }
   protected isNewValueEqualsToValue(newValue: any): boolean {
     const val = this.value;
-    if(!this.isTwoValueEquals(newValue, val)) return false;
+    if(!this.isTwoValueEquals(newValue, val, false, false)) return false;
     const isObj = newValue === val && !!val && (Array.isArray(val) || typeof val === "object");
     return !isObj;
   }
@@ -2234,8 +2255,11 @@ export class Question extends SurveyElement<Question>
       this.renderAs = this.getDesktopRenderAs();
     }
   }
-  public dispose() {
+  public dispose(): void {
     super.dispose();
+    for (var i = 0; i < this.dependedQuestions.length; i++) {
+      this.dependedQuestions[i].resetDependedQuestion();
+    }
     this.destroyResizeObserver();
   }
 }