Implement readOnly property for survey

packages/survey-core/src/survey.ts

@@ -978,8 +978,8 @@ export class SurveyModel extends SurveyElementCore
     this.registerPropertyChangedHandlers(["firstPageIsStartPage"], () => {
       this.onFirstPageIsStartedChanged();
     });
-    this.registerPropertyChangedHandlers(["mode"], () => {
-      this.onModeChanged();
+    this.registerPropertyChangedHandlers(["readOnly"], () => {
+      this.onReadOnlyChanged();
     });
     this.registerPropertyChangedHandlers(["progressBarType"], () => {
       this.updateProgressText();
@@ -991,7 +991,7 @@ export class SurveyModel extends SurveyElementCore
       }
     );
     this.registerPropertyChangedHandlers(
-      ["isLoading", "isCompleted", "isCompletedBefore", "mode", "isStartedState", "currentPage", "isShowingPreview"],
+      ["isLoading", "isCompleted", "isCompletedBefore", "readOnly", "isStartedState", "currentPage", "isShowingPreview"],
       () => { this.updateState(); });
     this.registerPropertyChangedHandlers(["state", "currentPage", "showPreviewBeforeComplete"],
       () => { this.onStateAndCurrentPageChanged(); });
@@ -3100,25 +3100,33 @@ export class SurveyModel extends SurveyElementCore
     this.setPropertyValue("questionDescriptionLocation", value);
   }
   /**
-   * Specifies whether users can take the survey or only view it.
-   *
-   * Possible values:
-   *
-   * - `"edit"` (default) - Allows users to take the survey.
-   * - `"display"` - Makes the survey read-only.
-   *
-   * [View Demo](https://surveyjs.io/form-library/examples/survey-displaymode/ (linkStyle))
+   * Obsolete. Use the [`readOnly`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#readOnly) property.
+   * @deprecated
    */
   public get mode(): string {
-    return this.getPropertyValue("mode");
+    return this.readOnly ? "display" : "edit";
   }
   public set mode(value: string) {
     value = value.toLowerCase();
     if (value == this.mode) return;
     if (value != "edit" && value != "display") return;
-    this.setPropertyValue("mode", value);
+    this.readOnly = value == "display";
   }
-  private onModeChanged() {
+  /**
+   * Enables the read-only mode. If you set this property to `true`, users cannot take the survey.
+   *
+   * Default value: `false`
+   *
+   * [View Demo](https://surveyjs.io/form-library/examples/prevent-form-editing-with-read-only-mode/ (linkStyle))
+   */
+  public get readOnly(): boolean {
+    return this.getPropertyValue("readOnly");
+  }
+  public set readOnly(val: boolean) {
+    this.setPropertyValue("readOnly", val);
+  }
+
+  private onReadOnlyChanged() {
     for (var i = 0; i < this.pages.length; i++) {
       var page = this.pages[i];
       page.setPropertyValue("isReadOnly", page.isReadOnly);
@@ -3945,10 +3953,10 @@ export class SurveyModel extends SurveyElementCore
     return res == "both" || res == "topBottom" || res == buttonPosition;
   }
   public get isEditMode(): boolean {
-    return this.mode == "edit";
+    return !this.readOnly;
   }
   public get isDisplayMode(): boolean { //
-    return this.mode == "display" && !this.isDesignMode || this.state == "preview";
+    return this.readOnly && !this.isDesignMode || this.state == "preview";
   }
   public get isUpdateValueTextOnTyping(): boolean {
     return this.textUpdateMode == "onTyping";
@@ -5191,7 +5199,7 @@ export class SurveyModel extends SurveyElementCore
       .append(this.css.rootProgress + "--" + this.progressBarType)
       .append(this.css.rootMobile, this.isMobile)
       .append(this.css.rootAnimationDisabled, !settings.animationEnabled)
-      .append(this.css.rootReadOnly, this.mode === "display" && !this.isDesignMode)
+      .append(this.css.rootReadOnly, this.readOnly && !this.isDesignMode)
       .append(this.css.rootCompact, this.isCompact)
       .append(this.css.rootFitToContainer, this.fitToContainer)
       .toString();
@@ -8484,7 +8492,8 @@ Serializer.addClass("survey", [
     dependsOn: ["showTOC"],
     visibleIf: (survey: any) => { return !!survey && survey.showTOC; }
   },
-  { name: "mode", default: "edit", choices: ["edit", "display"] },
+  { name: "readOnly:boolean", default: false },
+  { name: "mode", default: "edit", choices: ["edit", "display"], visible: false },
   { name: "storeOthersAsComment:boolean", default: true },
   { name: "maxTextLength:number", default: 0, minValue: 0 },
   { name: "maxCommentLength:number", default: 0, minValue: 0, alternativeName: "maxOthersLength" },

packages/survey-core/tests/surveytests.ts

@@ -18744,6 +18744,34 @@ QUnit.test("Do not run onComplete twice if complete trigger and tryComplete() is
   survey.tryComplete();
   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, "display");
+  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);
+});
 QUnit.test("Expression with dates & defaultValueExpression & expression question", function (assert) {
   const survey = new SurveyModel({
     elements: [