Merge branch 'master' into bug/6779

devops-visual-regression-tests.yml

@@ -21,6 +21,11 @@ jobs:
   steps:
   - checkout: self
 
+  - task: PowerShell@2
+    displayName: 'update Google Chrome to latest'
+    inputs:
+      targetType: 'inline'
+      script: '$Path = $env:TEMP; $Installer = ''chrome_installer.exe''; Invoke-WebRequest -Uri ''http://dl.google.com/chrome/install/375.126/chrome_installer.exe'' -OutFile $Path\$Installer; Start-Process -FilePath $Path\$Installer -Args ''/silent /install'' -Verb RunAs -Wait; Remove-Item -Path $Path\$Installer'
   - task: NodeTool@0
     inputs:
       versionSpec: '14.x'
@@ -76,6 +81,12 @@ jobs:
   steps:
   - checkout: self
 
+  - task: PowerShell@2
+    displayName: 'update Google Chrome to latest'
+    inputs:
+      targetType: 'inline'
+      script: '$Path = $env:TEMP; $Installer = ''chrome_installer.exe''; Invoke-WebRequest -Uri ''http://dl.google.com/chrome/install/375.126/chrome_installer.exe'' -OutFile $Path\$Installer; Start-Process -FilePath $Path\$Installer -Args ''/silent /install'' -Verb RunAs -Wait; Remove-Item -Path $Path\$Installer'
+
   - task: NodeTool@0
     inputs:
       versionSpec: '14.x'
@@ -132,6 +143,12 @@ jobs:
   steps:
   - checkout: self
 
+  - task: PowerShell@2
+    displayName: 'update Google Chrome to latest'
+    inputs:
+      targetType: 'inline'
+      script: '$Path = $env:TEMP; $Installer = ''chrome_installer.exe''; Invoke-WebRequest -Uri ''http://dl.google.com/chrome/install/375.126/chrome_installer.exe'' -OutFile $Path\$Installer; Start-Process -FilePath $Path\$Installer -Args ''/silent /install'' -Verb RunAs -Wait; Remove-Item -Path $Path\$Installer'
+
   - task: NodeTool@0
     inputs:
       versionSpec: '14.x'
@@ -189,6 +206,12 @@ jobs:
       persistCredentials: true
       clean: true
 
+    - task: PowerShell@2
+      displayName: 'update Google Chrome to latest'
+      inputs:
+        targetType: 'inline'
+        script: '$Path = $env:TEMP; $Installer = ''chrome_installer.exe''; Invoke-WebRequest -Uri ''http://dl.google.com/chrome/install/375.126/chrome_installer.exe'' -OutFile $Path\$Installer; Start-Process -FilePath $Path\$Installer -Args ''/silent /install'' -Verb RunAs -Wait; Remove-Item -Path $Path\$Installer'
+
     - task: NodeTool@0
       inputs:
         versionSpec: "14.x"
@@ -269,6 +292,12 @@ jobs:
       persistCredentials: true
       clean: true
 
+    - task: PowerShell@2
+      displayName: 'update Google Chrome to latest'
+      inputs:
+        targetType: 'inline'
+        script: '$Path = $env:TEMP; $Installer = ''chrome_installer.exe''; Invoke-WebRequest -Uri ''http://dl.google.com/chrome/install/375.126/chrome_installer.exe'' -OutFile $Path\$Installer; Start-Process -FilePath $Path\$Installer -Args ''/silent /install'' -Verb RunAs -Wait; Remove-Item -Path $Path\$Installer'
+
     - task: NodeTool@0
       inputs:
         versionSpec: "16.x"

packages/survey-angular-ui/src/comment.component.html

@@ -1,4 +1,4 @@
-<textarea *ngIf="!question.isReadOnlyRenderDiv()" [id]="question.commentId" [attr.maxlength]="question.getOthersMaxLength()"  [attr.aria-required]="question.ariaRequired" [attr.aria-label]="question.ariaLabel" [attr.placeholder]="question.commentPlaceholder" 
+<textarea *ngIf="!question.isReadOnlyRenderDiv()" [id]="question.commentId" [attr.maxlength]="question.getOthersMaxLength()"  [attr.aria-required]="question.ariaRequired" [attr.aria-label]="question.ariaLabel" [attr.placeholder]="question.renderedCommentPlaceholder" 
   [value]="comment"
   [style.resize]="question.resizeStyle"
   [disabled]="question.isInputReadOnly"

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

@@ -10,7 +10,7 @@
     :class="question.cssClasses.other || commentClass"
     :value="question.comment"
     :maxlength="question.getOthersMaxLength()"
-    :placeholder="question.commentPlaceholder"
+    :placeholder="question.renderedCommentPlaceholder"
     :aria-label="question.ariaLabel"
     :aria-required="question.ariaRequired"
     v-bind:style="{ resize: question.resizeStyle }"

src/base-interfaces.ts

@@ -369,3 +369,11 @@ export interface ISurveyLayoutElement {
   template?: string;
   data?: any;
 }
+export interface IPlainDataOptions {
+  includeEmpty?: boolean;
+  includeQuestionTypes?: boolean;
+  includeValues?: boolean;
+  calculations?: Array<{
+    propertyName: string,
+  }>;
+}

src/common-styles/sv-ranking.scss

@@ -227,6 +227,9 @@
   .sv-ranking__container--empty {
     padding-top: calcSize(1);
     padding-bottom: calcSize(1);
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 }
 
@@ -243,15 +246,23 @@
 
   .sv-ranking__container--empty {
     &.sv-ranking__container--to {
-      padding-right: calcSize(3);
+      //padding-right: calcSize(3);
 
       .sv-ranking-item {
         left: initial;
       }
+
+      .sv-ranking__container-placeholder {
+        padding-left: calcSize(5);
+      }
     }
 
     &.sv-ranking__container--from {
-      padding-left: calcSize(3);
+      //padding-left: calcSize(3);
+
+      .sv-ranking__container-placeholder {
+        padding-right: calcSize(5);
+      }
     }
   }
 }
@@ -263,17 +274,17 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 100%;
+  //width: 100%;
   height: 100%;
 }
 
 .sv-ranking__container {
   flex: 1;
-  max-width: 100%;
+  //max-width: 100%;
 }
 
 .sv-ranking__container--empty {
-  padding: calcSize(8);
+  //padding: calcSize(8);
   box-sizing: border-box;
   text-align: center;
 }

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

@@ -29,4 +29,36 @@
 
 .sv-ranking-item__content.sd-ranking-item__content {
   line-height: calcLineHeight(1.5);
+}
+
+.sv-dragdrop-movedown {
+  transform: translate(0, 0);
+  animation: svdragdropmovedown 0.1s;
+  animation-timing-function: ease-in-out;
+}
+
+@keyframes svdragdropmovedown {
+  0% {
+    transform: translate(0, -50px);
+  }
+
+  100% {
+    transform: translate(0, 0);
+  }
+}
+
+.sv-dragdrop-moveup {
+  transform: translate(0, 0);
+  animation: svdragdropmoveup 0.1s;
+  animation-timing-function: ease-in-out;
+}
+
+@keyframes svdragdropmoveup {
+  0% {
+    transform: translate(0, 50px);
+  }
+
+  100% {
+    transform: translate(0, 0);
+  }
 }

src/dragdrop/choices.ts

@@ -106,7 +106,13 @@ export class DragDropChoices extends DragDropCore<QuestionSelectBase> {
 
   private getVisibleChoices() {
     const parent = this.parentElement;
-    if (parent.getType() === "ranking") return <QuestionRankingModel>parent.rankingChoices;
+    if (parent.getType() === "ranking") {
+      if (parent.selectToRankEnabled) {
+        return parent.visibleChoices;
+      } else {
+        return <QuestionRankingModel>parent.rankingChoices;
+      }
+    }
     return parent.visibleChoices;
   }
 

src/dragdrop/core.ts

@@ -113,9 +113,12 @@ export abstract class DragDropCore<T> implements IDragDropEngine {
   protected doBanDropHere = (): void => { };
 
   protected findDropTargetNodeFromPoint(clientX: number, clientY: number): HTMLElement {
-    this.domAdapter.draggedElementShortcut.hidden = true;
+    const displayProp = this.domAdapter.draggedElementShortcut.style.display;
+    //this.domAdapter.draggedElementShortcut.hidden = true;
+    this.domAdapter.draggedElementShortcut.style.display = "none";
     let dragOverNode = <HTMLElement>document.elementFromPoint(clientX, clientY);
-    this.domAdapter.draggedElementShortcut.hidden = false;
+    // this.domAdapter.draggedElementShortcut.hidden = false;
+    this.domAdapter.draggedElementShortcut.style.display = displayProp || "block";
 
     if (!dragOverNode) return null;
 

src/dragdrop/dom-adapter.ts

@@ -38,8 +38,8 @@ export class DragDropDOMAdapter implements IDragDropDOMAdapter {
   private savedTargetNode: any;
   private scrollIntervalId: number = null;
 
-  constructor(private dd: IDragDropEngine, private longTap?: boolean) {
-  }
+  constructor(private dd: IDragDropEngine, private longTap: boolean = true) {}
+
   private get rootElement() {
     if(isShadowDOM(settings.environment.root)) {
       return settings.environment.root.host;
@@ -105,7 +105,7 @@ export class DragDropDOMAdapter implements IDragDropDOMAdapter {
       }
 
       this.stopLongTap();
-    }, this.longTap? 500: 0);
+    }, this.longTap ? 500: 0);
 
     document.addEventListener("pointerup", this.stopLongTap);
     document.addEventListener("pointermove", this.stopLongTapIfMoveEnough);

src/entries/chunks/model.ts

@@ -72,6 +72,7 @@ export {
   ISurveyData,
   ITitleOwner,
   ISurveyLayoutElement,
+  IPlainDataOptions as IPlainData,
   IShortcutText
 } from "../../base-interfaces";
 export { SurveyError } from "../../survey-error";
@@ -199,6 +200,7 @@ export {
   SurveyTriggerVisible,
   SurveyTriggerCopyValue,
   SurveyTriggerRunExpression,
+  SurveyTriggerSkip,
   Trigger
 } from "../../trigger";
 export { PopupSurveyModel, SurveyWindowModel } from "../../popup-survey";

src/knockout/templates/comment.html

@@ -1,6 +1,6 @@
 <script type="text/html" id="survey-comment">
   <!--ko if: !question.isReadOnlyRenderDiv() -->
-<textarea data-bind="attr: { id: question.commentId, maxLength: question.getOthersMaxLength(), 'aria-required': question.ariaRequired, 'aria-label': question.ariaLabel, placeholder: question.commentPlaceholder }, 
+<textarea data-bind="attr: { id: question.commentId, maxLength: question.getOthersMaxLength(), 'aria-required': question.ariaRequired, 'aria-label': question.ariaLabel, placeholder: question.renderedCommentPlaceholder }, 
         event: { input: function(s, e) { $data.question.onCommentInput(s, e); } }, 
         value: $data.question.comment, 
         visible: $data.visible,

src/question.ts

@@ -1,7 +1,7 @@
 import { HashTable, Helpers } from "./helpers";
 import { JsonObject, Serializer, property } from "./jsonobject";
 import { Base, EventBase } from "./base";
-import { IElement, IQuestion, IPanel, IConditionRunner, ISurveyImpl, IPage, ITitleOwner, IProgressInfo, ISurvey } from "./base-interfaces";
+import { IElement, IQuestion, IPanel, IConditionRunner, ISurveyImpl, IPage, ITitleOwner, IProgressInfo, ISurvey, IPlainDataOptions } from "./base-interfaces";
 import { SurveyElement } from "./survey-element";
 import { surveyLocalization } from "./surveyStrings";
 import { AnswerRequiredError, CustomError } from "./error";
@@ -464,6 +464,7 @@ export class Question extends SurveyElement<Question>
     if (isLight !== true) {
       this.runConditions();
     }
+    this.calcRenderedCommentPlaceholder();
   }
   /**
    * Returns a survey element (panel or page) that contains the question and allows you to move this question to a different survey element.
@@ -685,14 +686,21 @@ export class Question extends SurveyElement<Question>
    * @see comment
    * @see commentText
    */
-  @property({ localizable: true }) commentPlaceholder: string;
+  @property({ localizable: true, onSet: (val, target) => target.calcRenderedCommentPlaceholder() }) commentPlaceholder: string;
 
   public get commentPlaceHolder(): string {
     return this.commentPlaceholder;
   }
   public set commentPlaceHolder(newValue: string) {
     this.commentPlaceholder = newValue;
   }
+  public get renderedCommentPlaceholder(): string {
+    return this.getPropertyValue("renderedCommentPlaceholder");
+  }
+  private calcRenderedCommentPlaceholder() {
+    const res = !this.isReadOnly ? this.commentPlaceHolder : undefined;
+    this.setPropertyValue("renderedCommentPlaceholder", res);
+  }
   public getAllErrors(): Array<SurveyError> {
     return this.errors.slice();
   }
@@ -712,8 +720,9 @@ export class Question extends SurveyElement<Question>
   public updateCustomWidget(): void {
     this.customWidgetValue = CustomWidgetCollection.Instance.getCustomWidget(this);
   }
-  public localeChanged() {
+  public localeChanged(): void {
     super.localeChanged();
+    this.calcRenderedCommentPlaceholder();
     if (!!this.localeChangedCallback) {
       this.localeChangedCallback();
     }
@@ -1195,6 +1204,7 @@ export class Question extends SurveyElement<Question>
     this.setPropertyValue("isInputReadOnly", this.isInputReadOnly);
     super.onReadOnlyChanged();
     this.updateQuestionCss();
+    this.calcRenderedCommentPlaceholder();
   }
   /**
    * A Boolean expression. If it evaluates to `false`, this question becomes read-only.
@@ -1254,6 +1264,7 @@ export class Question extends SurveyElement<Question>
     if (this.isEmpty()) {
       this.initDataFromSurvey();
     }
+    this.calcRenderedCommentPlaceholder();
     this.onIndentChanged();
   }
   protected onSetData(): void {
@@ -1517,15 +1528,7 @@ export class Question extends SurveyElement<Question>
    *
    * Pass an object with the `includeEmpty` property set to `false` if you want to skip empty answers.
    */
-  public getPlainData(
-    options?: {
-      includeEmpty?: boolean,
-      includeQuestionTypes?: boolean,
-      calculations?: Array<{
-        propertyName: string,
-      }>,
-    }
-  ): IQuestionPlainData {
+  public getPlainData(options?: IPlainDataOptions): IQuestionPlainData {
     if (!options) {
       options = { includeEmpty: true, includeQuestionTypes: false };
     }
@@ -1543,9 +1546,7 @@ export class Question extends SurveyElement<Question>
         questionPlainData.questionType = this.getType();
       }
       (options.calculations || []).forEach((calculation) => {
-        questionPlainData[calculation.propertyName] = this[
-          calculation.propertyName
-        ];
+        questionPlainData[calculation.propertyName] = this.getPlainDataCalculatedValue(calculation.propertyName);
       });
       if (this.hasComment) {
         questionPlainData.isNode = true;
@@ -1566,6 +1567,9 @@ export class Question extends SurveyElement<Question>
     }
     return undefined;
   }
+  protected getPlainDataCalculatedValue(propName: string): any {
+    return this[propName];
+  }
   /**
    * A correct answer to this question. Specify this property if you want to [create a quiz](https://surveyjs.io/form-library/documentation/design-survey-create-a-quiz).
    * @see SurveyModel.getCorrectAnswerCount
@@ -1840,6 +1844,9 @@ export class Question extends SurveyElement<Question>
         this.survey.beforeSettingQuestionErrors(this, errors);
       }
       this.errors = errors;
+      if(this.errors !== errors) {
+        this.errors.forEach(er => er.locText.strChanged());
+      }
     }
     this.updateContainsErrors();
     if (oldHasErrors != errors.length > 0) {
@@ -2189,6 +2196,12 @@ export class Question extends SurveyElement<Question>
     this.survey.processPopupVisiblityChanged(this, popupModel, visible);
   }
 
+  protected onTextKeyDownHandler(event: any) {
+    if (event.keyCode === 13) {
+      (this.survey as SurveyModel).questionEditFinishCallback(this, event);
+    }
+  }
+
   public transformToMobileView(): void { }
   public transformToDesktopView(): void { }
   public needResponsiveWidth() {
@@ -2325,6 +2338,7 @@ function makeNameValid(str: string): string {
   }
   return str;
 }
+
 Serializer.addClass("question", [
   { name: "!name", onSettingValue: (obj: any, val: any): any => { return makeNameValid(val); } },
   {