Implement readOnly property for survey

src/survey.ts

@@ -2489,6 +2489,17 @@ export class SurveyModel extends SurveyElementCore
     if (value != "edit" && value != "display") return;
     this.setPropertyValue("mode", value);
   }
+
+  public get readOnly(): boolean {
+    const mode = this.mode;
+    const readOnly = this.getPropertyValue("readOnly");
+    return mode === "display" || readOnly;
+  }
+
+  public set readOnly(val: boolean) {
+    this.setPropertyValue("readOnly", val);
+  }
+
   private onModeChanged() {
     for (var i = 0; i < this.pages.length; i++) {
       var page = this.pages[i];
@@ -3229,15 +3240,15 @@ export class SurveyModel extends SurveyElementCore
    * @see mode
    */
   public get isEditMode(): boolean {
-    return this.mode == "edit";
+    return !this.readOnly;
   }
   /**
    * Returns `true` if the survey is in display mode or in preview mode.
    * @see mode
    * @see showPreviewBeforeComplete
    */
   public get isDisplayMode(): boolean {
-    return this.mode == "display" || this.state == "preview";
+    return this.readOnly || this.state == "preview";
   }
   public get isUpdateValueTextOnTyping(): boolean {
     return this.textUpdateMode == "onTyping";
@@ -4352,7 +4363,7 @@ export class SurveyModel extends SurveyElementCore
     return new CssClassBuilder()
       .append(this.css.root)
       .append(this.css.rootMobile, this.isMobile)
-      .append(this.css.rootReadOnly, this.mode === "display")
+      .append(this.css.rootReadOnly, this.readOnly)
       .toString();
   }
   private resizeObserver: ResizeObserver;
@@ -7107,6 +7118,7 @@ Serializer.addClass("survey", [
     default: "left",
     choices: ["left", "right"],
   },
+  { name: "readOnly:boolean", default: false },
   { name: "mode", default: "edit", choices: ["edit", "display"] },
   { name: "storeOthersAsComment:boolean", default: true },
   { name: "maxTextLength:number", default: 0, minValue: 0 },

tests/surveytests.ts

@@ -17027,3 +17027,31 @@ QUnit.test("Do not run onComplete twice if complete trigger and completeLastPage
   survey.completeLastPage();
   assert.equal(counter, 1, "onComplete called one time");
 });
+
+QUnit.test("Check readOnly flag", function (assert) {
+  let survey = new SurveyModel({
+    readOnly: true,
+    "elements": [
+      {
+        "type": "text",
+        "name": "question1"
+      },
+    ],
+  });
+  assert.equal(survey.mode, "edit");
+  assert.ok(survey.readOnly);
+  survey.readOnly = false;
+  assert.notOk(survey.readOnly);
+  survey = new SurveyModel({
+    mode: "display",
+    "elements": [
+      {
+        "type": "text",
+        "name": "question1"
+      },
+    ],
+  });
+  assert.ok(survey.readOnly);
+  survey.mode = "edit";
+  assert.notOk(survey.readOnly);
+});