Merge branch 'master' into feature/7827-interchange-switch-labels

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

@@ -1,6 +1,6 @@
 <div [class]="model.fileRootCss" #contentElement>
   <input [class]="model.cssClasses.fileInput" *ngIf="!model.isReadOnly && model.hasFileUI" tabindex="-1" type="file"
-    [attr.id]="model.inputId" (change)="model.doChange($event)" [attr.aria-required]="model.ariaRequired"
+    [attr.id]="model.inputId" [attr.aria-required]="model.ariaRequired"
     [attr.aria-label]="model.ariaLabel" [attr.aria-invalid]="model.ariaInvalid"
     [attr.aria-describedby]="model.ariaDescribedBy" [attr.multiple]="model.multipleRendered"
     [attr.title]="model.inputTitle" [attr.accept]="model.acceptedTypes" [attr.capture]="model.renderCapture" />

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

@@ -6,7 +6,6 @@
       tabindex="-1"
       type="file"
       :id="question.inputId"
-      @change="question.doChange"
       :aria-required="question.ariaRequired"
       :aria-label="question.ariaLabel"
       :aria-invalid="question.ariaInvalid"

src/common-styles/sv-ranking.scss

@@ -296,6 +296,7 @@
   height: 100%;
   padding-top: calcSize(0.5);
   padding-bottom: calcSize(0.5);
+  box-sizing: border-box;
 }
 
 .sv-ranking__container {

src/common-styles/window.scss

@@ -87,7 +87,7 @@
     margin-right: calcSize(1);;
     display: flex;
     gap: calcSize(1);
-    z-index: 1;
+    z-index: 10000;
 }
 
 .sv_window_button {

src/dragdrop/core.ts

@@ -32,15 +32,15 @@ export abstract class DragDropCore<T> implements IDragDropEngine {
     return `[data-sv-drop-target-${this.draggedElementType}]`;
   }
   protected get survey(): SurveyModel {
-    return this.surveyValue || this.creator.survey;
+    return this.surveyValue || this.creator?.survey;
   }
 
   public prevDropTarget: any = null;
   protected allowDropHere = false;
 
   protected domAdapter: IDragDropDOMAdapter;
   constructor(private surveyValue?: ISurvey, private creator?: any, longTap?: boolean, domAdapter?: IDragDropDOMAdapter) {
-    this.domAdapter = domAdapter || new DragDropDOMAdapter(this, longTap);
+    this.domAdapter = domAdapter || new DragDropDOMAdapter(this, longTap, this.survey?.fitToContainer);
   }
 
   public startDrag(event: PointerEvent, draggedElement: any, parentElement?: any, draggedElementNode?: HTMLElement, preventSaveTargetNode: boolean = false): void {

src/dragdrop/dom-adapter.ts

@@ -40,7 +40,7 @@ export class DragDropDOMAdapter implements IDragDropDOMAdapter {
   private savedTargetNodeIndex: any;
   private scrollIntervalId: number = null;
 
-  constructor(private dd: IDragDropEngine, private longTap: boolean = true) {}
+  constructor(private dd: IDragDropEngine, private longTap: boolean = true, private fitToContainer:boolean = false) {}
 
   private get rootElement() {
     if(isShadowDOM(settings.environment.root)) {
@@ -124,8 +124,13 @@ export class DragDropDOMAdapter implements IDragDropDOMAdapter {
     event.stopPropagation();
   }
   private moveShortcutElement(event: PointerEvent) {
-    const rootElementX= this.rootElement.getBoundingClientRect().x;
-    const rootElementY = this.rootElement.getBoundingClientRect().y;
+    let rootElementX= this.rootElement.getBoundingClientRect().x;
+    let rootElementY = this.rootElement.getBoundingClientRect().y;
+
+    if (!!this.fitToContainer) {
+      rootElementX = 0;
+      rootElementY = 0;
+    }
 
     this.doScroll(event.clientY, event.clientX);
 

src/dropdownListModel.ts

@@ -262,6 +262,7 @@ export class DropdownListModel extends Base {
   }
 
   private cleanHtml(html: string): string {
+    if(!this.htmlCleanerElement) return "";
     this.htmlCleanerElement.innerHTML = html;
     return this.htmlCleanerElement.textContent;
   }
@@ -347,7 +348,9 @@ export class DropdownListModel extends Base {
   };
   constructor(protected question: Question, protected onSelectionChanged?: (item: IAction, ...params: any[]) => void) {
     super();
-    this.htmlCleanerElement = document.createElement("div");
+    if ("undefined" !== typeof document) {
+      this.htmlCleanerElement = document.createElement("div");
+    }
     question.onPropertyChanged.add(this.qustionPropertyChangedHandler);
     this.showInputFieldComponent = this.question.showInputFieldComponent;
 

src/entries/chunks/model.ts

@@ -150,7 +150,7 @@ export {
   QuestionMatrixDropdownModelBase
 } from "../../question_matrixdropdownbase";
 export { MatrixDropdownColumn, matrixDropdownColumnTypes } from "../../question_matrixdropdowncolumn";
-export { QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedTable } from "../../question_matrixdropdownrendered";
+export { QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedErrorRow, QuestionMatrixDropdownRenderedTable } from "../../question_matrixdropdownrendered";
 export {
   MatrixDropdownRowModel,
   QuestionMatrixDropdownModel

src/jsonobject.ts

@@ -1013,12 +1013,12 @@ export class JsonMetadata {
   private dynamicPropsCache: HashTable<Array<JsonObjectProperty>> = {};
   public onSerializingProperty: ((obj: Base, prop: JsonObjectProperty, value: any, json: any) => boolean) | undefined;
   public getObjPropertyValue(obj: any, name: string): any {
-    if (this.isObjWrapper(obj)) {
-      var orignalObj = obj.getOriginalObj();
-      var prop = Serializer.findProperty(orignalObj.getType(), name);
+    if (this.isObjWrapper(obj) && this.isNeedUseObjWrapper(obj, name)) {
+      const orignalObj = obj.getOriginalObj();
+      const prop = Serializer.findProperty(orignalObj.getType(), name);
       if (!!prop) return this.getObjPropertyValueCore(orignalObj, prop);
     }
-    var prop = Serializer.findProperty(obj.getType(), name);
+    const prop = Serializer.findProperty(obj.getType(), name);
     if (!prop) return obj[name];
     return this.getObjPropertyValueCore(obj, prop);
   }
@@ -1047,6 +1047,15 @@ export class JsonMetadata {
   private isObjWrapper(obj: any): boolean {
     return !!obj.getOriginalObj && !!obj.getOriginalObj();
   }
+  private isNeedUseObjWrapper(obj: any, name: string): boolean {
+    if(!obj.getDynamicProperties) return true;
+    const props = obj.getDynamicProperties();
+    if(!Array.isArray(props)) return false;
+    for(let i = 0; i < props.length; i ++) {
+      if(props[i].name === name) return true;
+    }
+    return false;
+  }
   public addClass(
     name: string,
     properties: Array<any>,

src/knockout/kopage.ts

@@ -51,7 +51,9 @@ export class QuestionRow extends QuestionRowModel {
       ko.utils.domNodeDisposal.addDisposeCallback(rowContainerDiv, () => {
         clearTimeout(timer);
         model.stopLazyRendering();
-        model.isNeedRender = !model.isLazyRendering();
+        if(!model.isDisposed) {
+          model.isNeedRender = !model.isLazyRendering();
+        }
       });
     }
   }

src/knockout/koquestion_matrixdropdown.ts

@@ -1,5 +1,5 @@
 import * as ko from "knockout";
-import { MatrixDropdownColumn, QuestionMatrixDropdownRenderedRow, SurveyElement } from "survey-core";
+import { MatrixDropdownColumn, QuestionMatrixDropdownRenderedErrorRow, QuestionMatrixDropdownRenderedRow, SurveyElement } from "survey-core";
 import { QuestionMatrixDropdownModel } from "survey-core";
 import {
   QuestionMatrixDropdownModelBase,
@@ -144,12 +144,12 @@ export class QuestionMatrixDropdown extends QuestionMatrixDropdownModel {
 }
 
 export class KoQuestionMatrixDropdownRenderedTable extends QuestionMatrixDropdownRenderedTable {
-  protected createRenderedRow(cssClasses: any, isDetailRow: boolean = false) {
+  protected createRenderedRow(cssClasses: any, isDetailRow: boolean = false): QuestionMatrixDropdownRenderedRow {
     const renderedRow = new QuestionMatrixDropdownRenderedRow(cssClasses, isDetailRow);
     new ImplementorBase(renderedRow);
     return renderedRow;
   }
-  protected createErrorRenderedRow(cssClasses: any) {
+  protected createErrorRenderedRow(cssClasses: any): QuestionMatrixDropdownRenderedErrorRow {
     const res = super.createErrorRenderedRow(cssClasses);
     new ImplementorBase(res);
     return res;

src/knockout/templates/question-file.html

@@ -2,7 +2,7 @@
   <div data-bind="css: question.fileRootCss">
         <!-- ko ifnot: question.isInputReadOnly -->
           <!-- ko if: question.hasFileUI -->
-          <input type="file" tabindex="-1" data-bind="css: question.cssClasses.fileInput, attr: { id: question.inputId, 'aria-required': question.ariaRequired, 'aria-label': question.ariaLabel, 'aria-invalid': question.ariaInvalid, 'aria-describedby': question.ariaDescribedBy, multiple: question.allowMultiple ? 'multiple' : undefined, title: koInputTitle, accept: question.acceptedTypes, capture: question.renderCapture }, event: { change: question.dochange }">
+          <input type="file" tabindex="-1" data-bind="css: question.cssClasses.fileInput, attr: { id: question.inputId, 'aria-required': question.ariaRequired, 'aria-label': question.ariaLabel, 'aria-invalid': question.ariaInvalid, 'aria-describedby': question.ariaDescribedBy, multiple: question.allowMultiple ? 'multiple' : undefined, title: koInputTitle, accept: question.acceptedTypes, capture: question.renderCapture }">
           <!-- /ko -->
         <!-- /ko -->
         <!-- ko if: question.isReadOnly -->

src/panel.ts

@@ -40,10 +40,8 @@ export class QuestionRowModel extends Base {
   }
   protected _scrollableParent: any = undefined;
   protected _updateVisibility: any = undefined;
-  public startLazyRendering(
-    rowContainerDiv: HTMLElement,
-    findScrollableContainer = findScrollableParent
-  ) {
+  public startLazyRendering(rowContainerDiv: HTMLElement, findScrollableContainer = findScrollableParent): void {
+    if ("undefined" === typeof document) return;
     this._scrollableParent = findScrollableContainer(rowContainerDiv);
     // if  this._scrollableParent is html the scroll event isn't fired, so we should use window
     if (this._scrollableParent === document.documentElement) {

src/popup-dropdown-view-model.ts

@@ -136,12 +136,14 @@ export class PopupDropdownViewModel extends PopupBaseViewModel {
 
   protected getActualHorizontalPosition(): "left" | "center" | "right" {
     let actualHorizontalPosition = this.model.horizontalPosition;
-    let isRtl = !!document && document.defaultView.getComputedStyle(document.body).direction == "rtl";
-    if (isRtl) {
-      if (this.model.horizontalPosition === "left") {
-        actualHorizontalPosition = "right";
-      } else if (this.model.horizontalPosition === "right") {
-        actualHorizontalPosition = "left";
+    if ("undefined" !== typeof document) {
+      let isRtl = !!document && document.defaultView.getComputedStyle(document.body).direction == "rtl";
+      if (isRtl) {
+        if (this.model.horizontalPosition === "left") {
+          actualHorizontalPosition = "right";
+        } else if (this.model.horizontalPosition === "right") {
+          actualHorizontalPosition = "left";
+        }
       }
     }
     return actualHorizontalPosition;

src/popup-view-model.ts

@@ -239,7 +239,7 @@ export class PopupBaseViewModel extends Base {
     this.resetComponentElement();
   }
   public initializePopupContainer(): void {
-    if (!this.container) {
+    if (!this.container && ("undefined" !== typeof document)) {
       const container: HTMLElement = document.createElement("div");
       this.createdContainer = container;
       getElement(settings.environment.popupMountContainer).appendChild(container);

src/question_boolean.ts

@@ -56,8 +56,8 @@ export class QuestionBooleanModel extends Question {
   public set checkedValue(val: any) { this.booleanValue = val; }
   private setBooleanValue(val: any) {
     if (this.isValueEmpty(val)) {
-      this.value = null;
-      this.booleanValueRendered = null;
+      this.value = undefined;
+      this.booleanValueRendered = undefined;
     } else {
       this.value = val == true ? this.getValueTrue() : this.getValueFalse();
       this.booleanValueRendered = val;
@@ -69,16 +69,13 @@ export class QuestionBooleanModel extends Question {
   public set defaultValue(val: any) {
     if (val === true) val = "true";
     if (val === false) val = "false";
-    if (val === undefined) val = "indeterminate";
     this.setPropertyValue("defaultValue", val);
     this.updateValueWithDefaults();
   }
   public getDefaultValue(): any {
-    if (this.defaultValue == "indeterminate") return null;
-    if (this.defaultValue === undefined) return null;
-    return this.defaultValue == "true"
-      ? this.getValueTrue()
-      : this.getValueFalse();
+    const val = this.defaultValue;
+    if (val === "indeterminate" || val === undefined || val === null) return undefined;
+    return val == "true" ? this.getValueTrue() : this.getValueFalse();
   }
   public get locTitle(): LocalizableString {
     const original = this.getLocalizableString("title");
@@ -115,8 +112,8 @@ export class QuestionBooleanModel extends Question {
   get locLabelTrue(): LocalizableString {
     return this.getLocalizableString("labelTrue");
   }
-  get isDeterminated() {
-    return this.booleanValue !== null;
+  get isDeterminated(): boolean {
+    return this.booleanValue !== null && this.booleanValue !== undefined;
   }
 
   @property({ defaultValue: false }) swapOrder: boolean;
@@ -171,7 +168,8 @@ export class QuestionBooleanModel extends Question {
   protected setDefaultValue(): void {
     if (this.isDefaultValueSet("true", this.valueTrue)) this.setBooleanValue(true);
     if (this.isDefaultValueSet("false", this.valueFalse)) this.setBooleanValue(false);
-    if (this.defaultValue == "indeterminate") this.setBooleanValue(null);
+    const val = this.defaultValue;
+    if (val === "indeterminate" || val === null || val === undefined) this.setBooleanValue(undefined);
   }
   private isDefaultValueSet(defaultValueCheck: any, valueTrueOrFalse: any): boolean {
     return this.defaultValue == defaultValueCheck || (valueTrueOrFalse !== undefined && this.defaultValue === valueTrueOrFalse);
@@ -188,7 +186,8 @@ export class QuestionBooleanModel extends Question {
       .append(css.itemHover, !this.isDesignMode)
       .append(css.itemChecked, !!this.booleanValue)
       .append(css.itemExchanged, !!this.swapOrder)
-      .append(css.itemIndeterminate, this.booleanValue === null)
+      .append(css.itemIndeterminate, !this.isDeterminated)
+      .append(css.itemIndeterminate, )
       .toString();
   }
 
@@ -218,7 +217,7 @@ export class QuestionBooleanModel extends Question {
 
   public get svgIcon(): string {
     if (this.booleanValue && this.cssClasses.svgIconCheckedId) return this.cssClasses.svgIconCheckedId;
-    if (this.booleanValue === null && this.cssClasses.svgIconIndId) return this.cssClasses.svgIconIndId;
+    if (!this.isDeterminated && this.cssClasses.svgIconIndId) return this.cssClasses.svgIconIndId;
     if (!this.booleanValue && this.cssClasses.svgIconUncheckedId) return this.cssClasses.svgIconUncheckedId;
     return this.cssClasses.svgIconId;
   }
@@ -234,13 +233,10 @@ export class QuestionBooleanModel extends Question {
       return this.locLabelFalse;
     }
   }
-  protected setQuestionValue(
-    newValue: any,
-    updateIsAnswered: boolean = true
-  ) {
+  protected setQuestionValue(newValue: any, updateIsAnswered: boolean = true): void {
     if (newValue === "true" && this.valueTrue !== "true") newValue = true;
     if (newValue === "false" && this.valueFalse !== "false") newValue = false;
-    if (newValue === "indeterminate") newValue = null;
+    if (newValue === "indeterminate" || newValue === null) newValue = undefined;
     super.setQuestionValue(newValue, updateIsAnswered);
   }
   /* #region web-based methods */
@@ -252,7 +248,10 @@ export class QuestionBooleanModel extends Question {
     return true;
   }
   private calculateBooleanValueByEvent(event: any, isRightClick: boolean) {
-    var isRtl = document.defaultView.getComputedStyle(event.target).direction == "rtl";
+    let isRtl = false;
+    if ("undefined" !== typeof document) {
+      isRtl = document.defaultView.getComputedStyle(event.target).direction == "rtl";
+    }
     this.booleanValue = isRtl ? !isRightClick : isRightClick;
   }
   public onSwitchClickModel(event: any) {

src/question_paneldynamic.ts

@@ -1247,6 +1247,7 @@ export class QuestionPanelDynamicModel extends Question
     if (this.renderMode === "list" && this.panelsState !== "default") {
       newPanel.expand();
     }
+    newPanel.focusFirstQuestion();
     return newPanel;
   }
   /**

src/question_signaturepad.ts

@@ -106,7 +106,8 @@ export class QuestionSignaturePadModel extends QuestionFileModelBase {
     this.signaturePad.fromDataURL(data, { width: this.canvas.width * this.scale, height: this.canvas.height * this.scale });
   }
 
-  private fromUrl(url: string) {
+  private fromUrl(url: string): void {
+    if ("undefined" === typeof document) return;
     const img = document.createElement("img");
     img.crossOrigin = "anonymous";
     img.src = url;

src/react/reactquestion_file.tsx

@@ -37,7 +37,6 @@ export class SurveyQuestionFile extends SurveyQuestionElementBase {
           id={this.question.inputId}
           ref={input => (this.setControl(input))}
           style={!this.isDisplayMode ? {} : { color: "transparent" }}
-          onChange={!this.isDisplayMode ? this.question.doChange : (() => {})}
           multiple={this.question.allowMultiple}
           placeholder={this.question.title}
           accept={this.question.acceptedTypes}
@@ -50,7 +49,6 @@ export class SurveyQuestionFile extends SurveyQuestionElementBase {
             id={this.question.inputId}
             ref={input => (this.setControl(input))}
             style={!this.isDisplayMode ? {} : { color: "transparent" }}
-            onChange={!this.isDisplayMode ? this.question.doChange : (() => {})}
             aria-required={this.question.ariaRequired}
             aria-label={this.question.ariaLabel}
             aria-invalid={this.question.ariaInvalid}

src/survey-element.ts

@@ -935,7 +935,7 @@ export class SurveyElement<E = any> extends SurveyElementCore implements ISurvey
   }
   private isContainsSelection(el: any) {
     let elementWithSelection: any = undefined;
-    if ((document as any)["selection"]) {
+    if ((typeof document !== "undefined") && (document as any)["selection"]) {
       elementWithSelection = (document as any)["selection"].createRange().parentElement();
     }
     else {

src/survey.ts

@@ -7950,7 +7950,7 @@ Serializer.addClass("survey", [
     choices: ["auto", "static", "responsive"],
   },
   { name: "width", visibleIf: (obj: any) => { return obj.widthMode === "static"; } },
-  { name: "fitToContainer:boolean", default: false },
+  { name: "fitToContainer:boolean", default: true },
   { name: "headerView", default: "basic", choices: ["basic", "advanced"], visible: false },
   { name: "backgroundImage:file", visible: false },
   { name: "backgroundImageFit", default: "cover", choices: ["auto", "contain", "cover"], visible: false },

src/svgbundle.ts

@@ -12,7 +12,8 @@ export class SvgIconRegistry {
   public registerIconFromSymbol(iconId: string, iconSymbolSvg: string) {
     this.icons[iconId] = iconSymbolSvg;
   }
-  public registerIconFromSvgViaElement(iconId: string, iconSvg: string, iconPrefix: string = this.iconPrefix) {
+  public registerIconFromSvgViaElement(iconId: string, iconSvg: string, iconPrefix: string = this.iconPrefix): void {
+    if(typeof document === "undefined") return;
     iconId = this.processId(iconId, iconPrefix);
     let divSvg = document.createElement("div");
     divSvg.innerHTML = iconSvg;

src/vue/file.vue

@@ -6,7 +6,6 @@
       tabindex="-1"
       type="file"
       :id="question.inputId"
-      @change="question.doChange"
       :aria-required="question.ariaRequired"
       :aria-label="question.ariaLabel"
       :aria-invalid="question.ariaInvalid"