Merge branch 'master' into feature/vue3

surveyjs · Jan 9, 2023 · 749afb6 · 749afb6
2 parents 732b675 + bc23b0f
commit 749afb6
Show file tree

Hide file tree

Showing 47 changed files with 663 additions and 107 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,6 +3,7 @@
 node_modules
 build
 src/**/*.js
+!src/localization/update_translations.js
 doc_generator/**/*.json
 docs/classes.json
 docs/pmes.json

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,15 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.9.67](https://github.com/surveyjs/survey-library/compare/v1.9.66...v1.9.67) (2023-01-05)
+
+### [1.9.66](https://github.com/surveyjs/survey-library/compare/v1.9.65...v1.9.66) (2022-12-30)
+
+
+### Bug Fixes
+
+* **matrix:** export IMatrixDropdownData to allow extending MatrixDynamicRowModel ([#5394](https://github.com/surveyjs/survey-library/issues/5394)) ([6376506](https://github.com/surveyjs/survey-library/commit/63765064cbfe51c00380f7f1daaf69cffed93395))
+
 ### [1.9.65](https://github.com/surveyjs/survey-library/compare/v1.9.64...v1.9.65) (2022-12-20)
 
 ### [1.9.64](https://github.com/surveyjs/survey-library/compare/v1.9.63...v1.9.64) (2022-12-13)

diff --git a/docs/design-survey-create-a-quiz.md b/docs/design-survey-create-a-quiz.md
@@ -369,3 +369,4 @@ Refer to the following platform-specific articles for information on how to rend
 - [Create a Multi-Page Survey](https://surveyjs.io/Documentation/Library?id=design-survey-create-a-multi-page-survey)
 - [Conditional Logic and Dynamic Texts](https://surveyjs.io/Documentation/Library?id=design-survey-conditional-logic)
 - [Access Survey Results](https://surveyjs.io/Documentation/Library?id=handle-survey-results-access)
+- [Review Quiz Results demo](https://surveyjs.io/form-library/examples/survey-quiz-results/ (linkStyle))
diff --git a/docs/design-survey-create-a-simple-survey.md b/docs/design-survey-create-a-simple-survey.md
@@ -272,7 +272,7 @@ export default App;
     <summary>Knockout</summary> 
 
 ```html
-<div id="surveyContainer"></div>
+<survey params="survey: model"></survey>
 ```
 
 ```js
@@ -283,7 +283,9 @@ const surveyJson = {
 // Render the survey inside the page
 const survey = new Survey.Model(surveyJson);
 document.addEventListener("DOMContentLoaded", function() {
-    survey.render("surveyContainer");
+    ko.applyBindings({
+        model: survey
+    });
 });
 
 // Render the survey in a pop-up window

diff --git a/docs/get-started-knockout.md b/docs/get-started-knockout.md
@@ -72,10 +72,10 @@ const surveyJson = {
 };
 ```
 
-To instantiate a model, pass the model schema to the `SurveyKnockout.Survey` constructor as shown in the code below. The model instance will be later used to render the survey.
+To instantiate a model, pass the model schema to the [`Survey.Model`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model) constructor as shown in the code below. The model instance will be later used to render the survey.
 
 ```js
-const survey = new SurveyKnockout.Survey(surveyJson);
+const survey = new Survey.Model(surveyJson);
 ```
 
 <details>
@@ -121,25 +121,29 @@ const surveyJson = {
     }]
 };
 
-const survey = new SurveyKnockout.Survey(surveyJson);
+const survey = new Survey.Model(surveyJson);
 ```
 </details> 
 
 ## Render the Survey
 
-A survey should be rendered in a page element. Add this element to your page:
+A survey should be rendered in a `<survey>` page element. Bind its `survey` parameter to a view model property that contains the survey model (`model` in the code below):
 
 ```html
 <body>
-    <div id="surveyContainer"></div>
+    <survey params="survey: model"></survey>
 </body>
 ```
 
-To render a survey in the page element, call the `render(containerId)` method on the model instance you created in the previous step:
+To render a survey in the page element, activate Knockout bindings:
 
 ```js
+const survey = new Survey.Model(surveyJson);
+
 document.addEventListener("DOMContentLoaded", function() {
-    survey.render("surveyContainer");
+    ko.applyBindings({
+        model: survey
+    });
 });
 ```
 
@@ -169,7 +173,7 @@ If you replicate the code correctly, you should see the following survey:
     <script type="text/javascript" src="index.js"></script>
 </head>
 <body>
-    <div id="surveyContainer"></div>
+    <survey params="survey: model"></survey>
 </body>
 </html>
 ```
@@ -191,10 +195,12 @@ const surveyJson = {
     }]
 };
 
-const survey = new SurveyKnockout.Survey(surveyJson);
+const survey = new Survey.Model(surveyJson);
 
 document.addEventListener("DOMContentLoaded", function() {
-    survey.render("surveyContainer");
+    ko.applyBindings({
+        model: survey
+    });
 });
 ```
 </details>
@@ -226,7 +232,7 @@ function saveSurveyResults(url, json) {
     request.send(JSON.stringify(json));
 }
 
-const survey = new SurveyKnockout.Survey(surveyJson);
+const survey = new Survey.Model(surveyJson);
 
 survey.onComplete.add(surveyComplete);
 ```
@@ -239,7 +245,7 @@ function alertResults (sender) {
     alert(results);
 }
 
-const survey = new SurveyKnockout.Survey(surveyJson);
+const survey = new Survey.Model(surveyJson);
 
 survey.onComplete.add(alertResults);
 ```
@@ -270,7 +276,7 @@ As you can see, survey results are saved in a JSON object. Its properties corres
     <script type="text/javascript" src="index.js"></script>
 </head>
 <body>
-    <div id="surveyContainer"></div>
+    <survey params="survey: model"></survey>
 </body>
 </html>
 ```
@@ -292,7 +298,7 @@ const surveyJson = {
     }]
 };
 
-const survey = new SurveyKnockout.Survey(surveyJson);
+const survey = new Survey.Model(surveyJson);
 
 function alertResults (sender) {
     const results = JSON.stringify(sender.data);
@@ -302,7 +308,9 @@ function alertResults (sender) {
 survey.onComplete.add(alertResults);
 
 document.addEventListener("DOMContentLoaded", function() {
-    survey.render("surveyContainer");
+    ko.applyBindings({
+        model: survey
+    });
 });
 ```
 </details>

diff --git a/docs/get-started-react.md b/docs/get-started-react.md
@@ -117,6 +117,7 @@ export default App;
 </details>
 
 ## Render the Survey
+
 To render a survey, import the `Survey` component, add it to the template, and pass the model instance you created in the previous step to the component's `model` attribute:
 
 ```js

diff --git a/examples_test/defaultV2/react.html b/examples_test/defaultV2/react.html
@@ -4,8 +4,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.6.4/showdown.min.js"></script>
-    <script src="https://unpkg.com/react@16.5.0/umd/react.production.min.js"></script>
-    <script src="https://unpkg.com/react-dom@16.5.0/umd/react-dom.production.min.js"></script>
+    <script src="https://unpkg.com/react@16.8/umd/react.production.min.js"></script>
+    <script src="https://unpkg.com/react-dom@16.8/umd/react-dom.production.min.js"></script>
     <link rel="stylesheet" href="../../build/survey-react/defaultV2.min.css" />
     <script src="../../build/survey-react/survey.react.min.js"></script>
   </head>

diff --git a/package.json b/package.json
@@ -79,7 +79,7 @@
     "testcafe:ci:angular": "testcafe -c 4 -q chrome:headless testCafe/ --app \"http-server ./dist/angular-ui --proxy http://localhost:8080? -p 8080\" --selector-timeout 1500 --reporter minimal --env=angular",
     "prepare": "husky install"
   },
-  "version": "1.9.65",
+  "version": "1.9.67",
   "name": "survey-library",
   "private": true,
   "devDependencies": {
@@ -197,4 +197,4 @@
     "testcafe-angular-selectors": "^0.4.1",
     "vite": "^3.1.8"
   }
-}
+}
diff --git a/packages/survey-angular-ui/CHANGELOG.md b/packages/survey-angular-ui/CHANGELOG.md
@@ -2,6 +2,19 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.9.67](https://github.com/surveyjs/surveyjs/compare/v1.9.66...v1.9.67) (2023-01-05)
+
+### [1.9.66](https://github.com/surveyjs/surveyjs/compare/v1.9.65...v1.9.66) (2022-12-30)
+
+
+### Bug Fixes
+
+* **matrix:** export IMatrixDropdownData to allow extending MatrixDynamicRowModel ([#5394](https://github.com/surveyjs/surveyjs/issues/5394)) ([6376506](https://github.com/surveyjs/surveyjs/commit/63765064cbfe51c00380f7f1daaf69cffed93395))
+
+# Changelog
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
 # Changelog
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

diff --git a/packages/survey-angular-ui/package.json b/packages/survey-angular-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "survey-angular-ui",
-  "version": "1.9.65",
+  "version": "1.9.67",
   "description": "survey.js is a JavaScript Survey Library. It is a modern way to add a survey to your website. It uses JSON for survey metadata and results.",
   "keywords": [
     "Survey",

diff --git a/packages/survey-angular-ui/src/base-angular.ts b/packages/survey-angular-ui/src/base-angular.ts
@@ -23,7 +23,7 @@ export abstract class BaseAngular<T extends Base = Base> extends EmbeddedViewCon
       this.onModelChanged();
       this.previousModel = this.getModel();
     }
-    this.beforeUpdate();
+    this.setIsRendering(true);
   }
 
   protected onModelChanged() {}
@@ -100,24 +100,25 @@ export abstract class BaseAngular<T extends Base = Base> extends EmbeddedViewCon
       });
     }
   }
+  private getChangeDetectorRef() {
+    return this.embeddedView ? this.embeddedView : this.changeDetectorRef;
+  }
   protected getPropertiesToUpdateSync(): Array<string> {
     return [];
   }
   protected detectChanges() {
-    if(!!this.embeddedView) {
-      this.embeddedView.detectChanges();
-    } else {
-      this.changeDetectorRef.detectChanges();
-    }
+    this.getChangeDetectorRef().detectChanges();
   }
 
   protected beforeUpdate(): void {
+    this.getChangeDetectorRef().detach();
     this.setIsRendering(true);
   }
   protected afterUpdate(): void {
+    this.getChangeDetectorRef().reattach();
     this.setIsRendering(false);
   }
   ngAfterViewChecked(): void {
-    this.afterUpdate();
+    this.setIsRendering(false);
   }
 }
diff --git a/packages/survey-angular-ui/src/components/popup/popup-container.component.html b/packages/survey-angular-ui/src/components/popup/popup-container.component.html
@@ -1,4 +1,4 @@
-<div class="sv-popup" tabindex="-1" [class]="model.styleClass" [style.visibility]="isShow ? 'visible' : 'hidden'" [visible]="model.isVisible" (click)="model.clickOutside()" (keydown)="model.onKeyDown($event)">
+<div class="sv-popup" tabindex="-1" [class]="model.styleClass" [visible]="model.isVisible" (click)="model.clickOutside()" (keydown)="model.onKeyDown($event)">
     <div class="sv-popup__container" [style]="{ left: model.left, top: model.top, height: model.height, minWidth: model.minWidth, width: model.width }">
         <div class="sv-popup__shadow">
             <ng-container *ngIf="model.showHeader">

diff --git a/packages/survey-angular-ui/src/components/popup/popup-container.component.ts b/packages/survey-angular-ui/src/components/popup/popup-container.component.ts
@@ -5,11 +5,10 @@ import { PopupBaseViewModel, PopupModalViewModel } from "survey-core";
 @Component({
   selector: "sv-ng-popup-container, '[sv-ng-popup-container]'",
   templateUrl: "./popup-container.component.html"
-})
+  })
 
 export class PopupBaseContainerComponent<T extends PopupBaseViewModel = PopupBaseViewModel> extends BaseAngular<T> {
   private prevIsVisible: boolean = false;
-  isShow: boolean = false;
   @Input() model!: T;
 
   constructor(changeDetectorRef: ChangeDetectorRef) {
@@ -38,24 +37,13 @@ export class PopupBaseContainerComponent<T extends PopupBaseViewModel = PopupBas
     this.changeDetectorRef.detectChanges();
   }
 
-  protected override beforeUpdate(): void {
-    super.beforeUpdate();
-    if (!this.prevIsVisible && this.model.isVisible) {
-      this.isShow = false;
-    }
-  }
-
   protected override afterUpdate(): void {
+    super.afterUpdate();
     if (!this.prevIsVisible && this.model.isVisible) {
-      setTimeout(() => {
-        this.model.updateOnShowing();
-        this.isShow = true;
-        this.changeDetectorRef.detectChanges();
-      });
+      this.model.updateOnShowing();
     }
     if (this.prevIsVisible !== this.model.isVisible) {
       this.prevIsVisible = this.model.isVisible;
     }
-    super.afterUpdate();
   }
 }
diff --git a/packages/survey-angular-ui/src/components/progress/default/progress.component.html b/packages/survey-angular-ui/src/components/progress/default/progress.component.html
@@ -1,5 +1,5 @@
 <ng-template #template>
-  <div [class]="model.css.progress">
+  <div [class]="model.getProgressCssClasses()">
     <div [class]="model.css.progressBar" [style.width]="model.progressValue + '%'"
         role="progressbar" aria-valuemin="0" aria-valuemax="100">
         <span [class]="getProgressTextInBarCss(model.css)">

diff --git a/packages/survey-angular-ui/src/survey-content.component.ts b/packages/survey-angular-ui/src/survey-content.component.ts
@@ -6,17 +6,20 @@ import { AngularComponentFactory } from "./component-factory";
 @Component({
   selector: "survey-content",
   templateUrl: "./survey-content.component.html"
-})
+  })
 export class SurveyContentComponent extends BaseAngular<SurveyModel> implements OnInit, AfterViewInit {
   @Input() model!: SurveyModel;
   @ViewChild("surveyContainer", { static: false }) rootEl!: ElementRef<HTMLDivElement>;
+  private isSurveyUpdated: boolean = false;
   protected getModel(): SurveyModel {
     return this.model;
   }
   protected override onModelChanged(): void {
+    this.previousModel?.destroyResizeObserver();
     this.model.renderCallback = () => {
       this.detectChanges();
     };
+    this.isSurveyUpdated = true;
   }
   override ngOnInit(): void {
     super.ngOnInit();
@@ -29,7 +32,13 @@ export class SurveyContentComponent extends BaseAngular<SurveyModel> implements
     this.model.renderCallback = <any>undefined;
   }
   ngAfterViewInit(): void {
-    this.model.afterRenderSurvey(this.rootEl.nativeElement);
+    this.isSurveyUpdated = true;
+  }
+  override ngAfterViewChecked(): void {
+    if(this.isSurveyUpdated) {
+      this.model.afterRenderSurvey(this.rootEl.nativeElement);
+    }
+    super.ngAfterViewChecked();
   }
 }
 

diff --git a/src/common-styles/sv-popup.scss b/src/common-styles/sv-popup.scss
@@ -71,22 +71,23 @@ sv-popup {
     padding: calcSize(4);
   }
 }
-
-.sv-popup--overlay {
+$popup-overlay-height: var(--sv-popup-overlay-height, 100vh);
+.sv-popup--overlay.sv-popup--overlay {
   width: 100%;
+  height: $popup-overlay-height;
 
   .sv-popup__container {
     background: $background-semitransparent;
     max-width: 100vw;
-    max-height: calc(100vh - 1 * #{$base-unit});
-    height: calc(100vh - 1 * #{$base-unit});
+    max-height: calc(#{$popup-overlay-height} - 1 * #{$base-unit});
+    height: calc(#{$popup-overlay-height} - 1 * #{$base-unit});
     width: 100%;
     padding-top: calcSize(2);
     border: unset;
   }
 
   .sv-popup__body-content {
-    max-height: 100vh;
+    max-height: $popup-overlay-height;
     max-width: 100vw;
     border-radius: calcSize(2) calcSize(2) 0px 0px;
     background: $background;
-Original file line number
+Diff line change
@@ Expand Up / @@ -117,6 +117,7 @@ export default App; @@
     </details>
     ## Render the Survey
     To render a survey, import the `Survey` component, add it to the template, and pass the model instance you created in the previous step to the component's `model` attribute:
     ```js
@@ Expand Down @@