Merge branch 'master' into bug/C4484-memory-leaks

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/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/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

@@ -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 {
@@ -1840,6 +1851,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 +2203,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 +2345,7 @@ function makeNameValid(str: string): string {
   }
   return str;
 }
+
 Serializer.addClass("question", [
   { name: "!name", onSettingValue: (obj: any, val: any): any => { return makeNameValid(val); } },
   {

src/question_matrixdropdownbase.ts

@@ -358,14 +358,14 @@ implements ISurveyData, ISurveyImpl, ILocalizableOwner {
     }
     values[MatrixDropdownRowModelBase.IndexVariableName] = this.rowIndex;
     values[MatrixDropdownRowModelBase.RowValueVariableName] = this.rowName;
-    if (!properties) properties = {};
-    properties[MatrixDropdownRowModelBase.RowVariableName] = this;
+    const newProps = Helpers.createCopy(properties);
+    newProps[MatrixDropdownRowModelBase.RowVariableName] = this;
     for (var i = 0; i < this.cells.length; i++) {
       values[MatrixDropdownRowModelBase.RowVariableName] = this.value;
-      this.cells[i].runCondition(values, properties);
+      this.cells[i].runCondition(values, newProps);
     }
     if (!!this.detailPanel) {
-      this.detailPanel.runCondition(values, properties);
+      this.detailPanel.runCondition(values, newProps);
     }
   }
   public clearValue() {
@@ -1378,9 +1378,9 @@ export class QuestionMatrixDropdownModelBase extends QuestionMatrixBaseModel<Mat
   private checkColumnsVisibility() {
     var hasChanged = false;
     for (var i = 0; i < this.visibleColumns.length; i++) {
-      if (!this.visibleColumns[i].visibleIf) continue;
-      hasChanged =
-        this.isColumnVisibilityChanged(this.visibleColumns[i]) || hasChanged;
+      const column = this.visibleColumns[i];
+      if (!column.visibleIf && !column.isFilteredMultipleColumns) continue;
+      hasChanged = this.isColumnVisibilityChanged(column) || hasChanged;
     }
     if (hasChanged) {
       this.resetRenderedTable();
@@ -1402,25 +1402,43 @@ export class QuestionMatrixDropdownModelBase extends QuestionMatrixBaseModel<Mat
     }
   }
   private isColumnVisibilityChanged(column: MatrixDropdownColumn): boolean {
-    var curVis = column.hasVisibleCell;
-    var hasVisCell = false;
-    var rows = this.generatedVisibleRows;
-    for (var i = 0; i < rows.length; i++) {
-      var cell = rows[i].cells[column.index];
-      if (!!cell && !!cell.question && cell.question.isVisible) {
+    const curVis = column.hasVisibleCell;
+    const isMultipleColumnsVisibility = column.isFilteredMultipleColumns;
+    const curVisibleChoices = isMultipleColumnsVisibility ? column.getVisibleChoicesInCell : [];
+    const newVisibleChoices = new Array<any>();
+    let hasVisCell = false;
+    const rows = this.generatedVisibleRows;
+    for (let i = 0; i < rows.length; i++) {
+      const cell = rows[i].cells[column.index];
+      const q = cell?.question;
+      if (!!q && q.isVisible) {
         hasVisCell = true;
-        break;
+        if(isMultipleColumnsVisibility) {
+          this.updateNewVisibleChoices(q, newVisibleChoices);
+        } else break;
       }
     }
     if (curVis != hasVisCell) {
       column.hasVisibleCell = hasVisCell;
     }
+    if(isMultipleColumnsVisibility) {
+      column.setVisibleChoicesInCell(newVisibleChoices);
+      if(!Helpers.isArraysEqual(curVisibleChoices, newVisibleChoices, true, false, false)) return true;
+    }
     return curVis != hasVisCell;
   }
+  private updateNewVisibleChoices(q: Question, dest: Array<any>): void {
+    const choices = q.visibleChoices;
+    if(!Array.isArray(choices)) return;
+    for(let i = 0; i < choices.length; i ++) {
+      const ch = choices[i];
+      if(dest.indexOf(ch.value) < 0) dest.push(ch.value);
+    }
+  }
   protected runTotalsCondition(
     values: HashTable<any>,
     properties: HashTable<any>
-  ) {
+  ): void {
     if (!this.generatedTotalRow) return;
     this.generatedTotalRow.runCondition(
       this.getRowConditionValues(values),

src/question_matrixdropdowncolumn.ts

@@ -124,6 +124,7 @@ export class MatrixDropdownColumn extends Base
   private indexValue = -1;
   private _isVisible = true;
   private _hasVisibleCell = true;
+  private _visiblechoices: Array<any>;
 
   constructor(name: string, title: string = null) {
     super();
@@ -209,16 +210,44 @@ export class MatrixDropdownColumn extends Base
   public get isVisible() {
     return this._isVisible;
   }
-  public setIsVisible(newVal: boolean) {
+  public setIsVisible(newVal: boolean): void {
     this._isVisible = newVal;
   }
-  public get hasVisibleCell() {
+  public get hasVisibleCell(): boolean {
     return this._hasVisibleCell;
   }
   public set hasVisibleCell(newVal: boolean) {
     this._hasVisibleCell = newVal;
   }
-  public get name() {
+  public getVisibleMultipleChoices(): Array<ItemValue> {
+    const choices = this.templateQuestion.visibleChoices;
+    if(!Array.isArray(choices)) return [];
+    if(!Array.isArray(this._visiblechoices)) return choices;
+    const res = new Array<ItemValue>();
+    for(let i = 0; i < choices.length; i ++) {
+      const item = choices[i];
+      if(this._visiblechoices.indexOf(item.value) > -1) res.push(item);
+    }
+    return res;
+  }
+  public get getVisibleChoicesInCell(): Array<any> {
+    if(Array.isArray(this._visiblechoices)) return this._visiblechoices;
+    const res = this.templateQuestion.visibleChoices;
+    return Array.isArray(res) ? res : [];
+  }
+  public setVisibleChoicesInCell(val: Array<any>): void {
+    this._visiblechoices = val;
+  }
+  public get isFilteredMultipleColumns(): boolean {
+    if(!this.showInMultipleColumns) return false;
+    const choices = this.templateQuestion.choices;
+    if(!Array.isArray(choices)) return false;
+    for(let i = 0; i < choices.length; i ++) {
+      if(choices[i].visibleIf) return true;
+    }
+    return false;
+  }
+  public get name(): string {
     return this.templateQuestion.name;
   }
   public set name(val: string) {