Merge branch 'master' into feature/7583-carry-forward-unarranged-beha…

…vior
surveyjs · Jan 17, 2024 · 8cd6640 · 8cd6640
2 parents 5808579 + f4c21a6
commit 8cd6640
Show file tree

Hide file tree

Showing 76 changed files with 810 additions and 362 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -5,8 +5,7 @@
     },
     "[typescript]": {
         "editor.codeActionsOnSave": {
-            "source.fixAll": true,
-            //"source.organizeImports": true, // be vare of https://github.com/microsoft/vscode-typescript-tslint-plugin/issues/51
+            "source.fixAll": "explicit"
         }
     },
     "[html]": {

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [1.9.126](https://github.com/surveyjs/survey-library/compare/v1.9.125...v1.9.126) (2024-01-17)
+
 ## [1.9.125](https://github.com/surveyjs/survey-library/compare/v1.9.124...v1.9.125) (2024-01-11)
 
 

diff --git a/package.json b/package.json
@@ -95,7 +95,7 @@
     "prepare": "husky install",
     "test:postcss": "postcss build/survey-core/defaultV2.css --silent  -u postcss-calc -u postcss-fail-on-warn -o defaultV2.postcss.css && rimraf defaultV2.postcss.css"
   },
-  "version": "1.9.125",
+  "version": "1.9.126",
   "name": "survey-library",
   "private": true,
   "devDependencies": {

diff --git a/packages/survey-angular-ui/CHANGELOG.md b/packages/survey-angular-ui/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [1.9.126](https://github.com/surveyjs/surveyjs/compare/v1.9.125...v1.9.126) (2024-01-17)
+
 ## [1.9.125](https://github.com/surveyjs/surveyjs/compare/v1.9.124...v1.9.125) (2024-01-11)
 
 

diff --git a/packages/survey-angular-ui/example/src/app/components/test/test.component.html b/packages/survey-angular-ui/example/src/app/components/test/test.component.html
@@ -1,4 +1,4 @@
 <div id="surveyElement">
-  <popup-survey *ngIf="!!model && isPopup" [model]="$any(model)"></popup-survey>
+  <popup-survey *ngIf="!!model && isPopup" [model]="$any(model)" [isExpanded]="isExpanded" [allowClose]="true"></popup-survey>
   <survey *ngIf="!!model && !isPopup" [model]="$any(model)"></survey></div>
 <div id="surveyResultElement"></div>
diff --git a/packages/survey-angular-ui/example/src/app/components/test/test.component.ts b/packages/survey-angular-ui/example/src/app/components/test/test.component.ts
@@ -11,13 +11,15 @@ import "survey-core/survey.i18n";
 export class TestComponent {
   public model?: SurveyModel | Survey.PopupSurveyModel;
   public isPopup: boolean = true;
+  public isExpanded: boolean = true;
   constructor(private changeDetectorRef: ChangeDetectorRef) {
     (window as any).Survey = Survey;
     Survey.defaultStandardCss.variables.mobileWidth = <any>undefined;
     Survey.modernCss.variables.mobileWidth = <any>undefined;
-    (<any>window).setSurvey = (survey: SurveyModel | Survey.PopupSurveyModel, isPopup: boolean) => {
+    (<any>window).setSurvey = (survey: SurveyModel | Survey.PopupSurveyModel, isPopup: boolean, isExpanded: boolean = true) => {
       this.model = survey;
       this.isPopup = isPopup;
+      this.isExpanded = isExpanded;
       this.changeDetectorRef.detectChanges();
     };
     (window as any).Survey.defaultBootstrapCss = defaultCss;

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.125",
+  "version": "1.9.126",
   "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/components/progress/toc/progress.component.html b/packages/survey-angular-ui/src/components/progress/toc/progress.component.html
@@ -1,9 +1,9 @@
 <ng-template #template>
-  <div [class]="tocModel.containerCss">
-    <sv-ng-list *ngIf="!tocModel.isMobile" [model]="tocModel.listModel"></sv-ng-list>
-    <div *ngIf="tocModel.isMobile" (click)="tocModel.togglePopup()" data-bind="key2click">
-        <svg [iconName]="tocModel.icon" [size]="24" sv-ng-svg-icon></svg>
-        <sv-ng-popup [popupModel]="tocModel.popupModel"></sv-ng-popup>
+  <div [class]="model.containerCss">
+    <sv-ng-list *ngIf="!model.isMobile" [model]="model.listModel"></sv-ng-list>
+    <div *ngIf="model.isMobile" (click)="model.togglePopup()" data-bind="key2click">
+        <svg [iconName]="model.icon" [size]="24" sv-ng-svg-icon></svg>
+        <sv-ng-popup [popupModel]="model.popupModel"></sv-ng-popup>
     </div>
   </div>  
 </ng-template>
diff --git a/packages/survey-angular-ui/src/components/progress/toc/progress.component.ts b/packages/survey-angular-ui/src/components/progress/toc/progress.component.ts
@@ -4,22 +4,16 @@ import { createTOCListModel, getTocRootCss, ListModel, SurveyModel, TOCModel } f
 import { AngularComponentFactory } from "../../../component-factory";
 
 @Component({
-  selector: "sv-progress-toc, sv-ng-progress-toc",
+  selector: "sv-navigation-toc, sv-ng-navigation-toc",
   templateUrl: "./progress.component.html",
   styles: [":host { display: none; }"]
 })
 export class ProgressTocComponent extends EmbeddedViewContentComponent implements OnChanges, OnInit {
-  public tocModel!: TOCModel;
-  @Input() model!: SurveyModel;
-  private createProgressTOCModel() {
-    this.tocModel = new TOCModel(this.model);
-  }
+  @Input() model!: TOCModel;
   override ngOnInit(): void {
     super.ngOnInit();
-    this.createProgressTOCModel();
   }
   ngOnChanges(changes: SimpleChanges): void {
-    this.createProgressTOCModel();
   }
 }
-AngularComponentFactory.Instance.registerComponent("sv-progress-toc", ProgressTocComponent);
+AngularComponentFactory.Instance.registerComponent("sv-navigation-toc", ProgressTocComponent);
diff --git a/packages/survey-angular-ui/src/popup.survey.component.html b/packages/survey-angular-ui/src/popup.survey.component.html
@@ -1,17 +1,22 @@
-<div *ngIf="!!popup && popup.isShowing" [class]="popup.cssRoot" style="position: fixed; bottom: 3px; right: 10px;" [style.width]="popup.renderedWidth" [style.maxWidth]="popup.renderedWidth">
-  <div [class]="popup.cssHeaderRoot">
-      <span (click)="popup.changeExpandCollapse()" style="width: 100%; cursor: pointer;">
-          <span style="padding-right:10px" [class]="popup.cssHeaderTitle">{{popup.locTitle.renderedHtml}}</span>
-          <span aria-hidden="true" [class]="popup.cssButton"></span>
-      </span>
-      <span *ngIf="popup.allowClose" (click)="popup.hide()" [class]="popup.cssHeaderButton" style="float: right; cursor: pointer; width: 24px; height: 24px; transform: rotate(45deg);">
-        <svg [iconName]="'icon-expanddetail'" [size]="16" sv-ng-svg-icon></svg>
-    </span>
-      <span *ngIf="popup.isExpanded" (click)="popup.changeExpandCollapse()" [class]="popup.cssHeaderButton" style="float: right; cursor: pointer; width: 24px; height: 24px;">
-          <svg [iconName]="'icon-collapsedetail'" [size]="16" sv-ng-svg-icon></svg>
-      </span>
+<div *ngIf="!!popup && popup.isShowing" [class]="popup.cssRoot" [style.width]="popup.renderedWidth" [style.maxWidth]="popup.renderedWidth" (scroll)="popup.onScroll()">
+  <div [class]="popup.cssRootContent">
+    <div [class]="getHeaderCss()">
+      <div *ngIf="popup.isCollapsed && !!popup.locTitle" [class]="popup.cssHeaderTitleCollapsed">
+        {{popup.locTitle.renderedHtml}}
+      </div>
+      <div [class]="popup.cssHeaderButtonsContainer">
+        <div [class]="popup.cssHeaderCollapseButton" (click)="popup.changeExpandCollapse()">
+            <svg *ngIf="popup.isExpanded" [iconName]="'icon-minimize_16x16'" [size]="16" sv-ng-svg-icon></svg>
+            <svg *ngIf="popup.isCollapsed" [iconName]="'icon-restore_16x16'" [size]="16" sv-ng-svg-icon></svg>
+        </div>
+
+        <div *ngIf="popup.allowClose" [class]="popup.cssHeaderCloseButton" (click)="popup.hide()">
+          <svg [iconName]="'icon-close_16x16'" [size]="16" sv-ng-svg-icon></svg>
+        </div>
+      </div>
   </div>
-  <div *ngIf="popup.isExpanded" [class]="popup.cssBody" (scroll)="popup.onScroll()">
+  <div [class]="popup.cssBody">
     <survey [model]="popup.survey"></survey>
   </div>
+  </div>
 </div>
diff --git a/packages/survey-angular-ui/src/popup.survey.component.ts b/packages/survey-angular-ui/src/popup.survey.component.ts
@@ -23,6 +23,14 @@ export class PopupSurveyComponent extends BaseAngular<PopupSurveyModel> implemen
   protected override getShouldReattachChangeDetector(): boolean {
     return false;
   }
+  public getHeaderCss(): string {
+    let headerCss = this.popup.cssHeaderRoot;
+    if (this.popup.isCollapsed) {
+      headerCss += " " + this.popup.cssRootCollapsedMod;
+    }
+    return headerCss;
+  }
+
   ngOnChanges(changes: SimpleChanges): void {
     if (changes["model"]?.currentValue !== changes["model"]?.previousValue) {
       this.popup = new PopupSurveyModel(null, this.model);

diff --git a/packages/survey-angular-ui/src/questions/signature.component.html b/packages/survey-angular-ui/src/questions/signature.component.html
@@ -4,7 +4,7 @@
 <div [class]="model.cssClasses.placeholder" [visible]="model.needShowPlaceholder()" [model]="$any(model).locPlaceholder" sv-ng-string></div>
 <div>
   <img *ngIf="!!model.backgroundImage" [src]="model.backgroundImage" [style.width]="model.renderedCanvasWidth" [class]="model.cssClasses.backgroundImage">
-  <canvas tabindex="0" [class]="model.cssClasses.canvas" (blur)="model.onBlur($event)"></canvas>
+  <canvas tabindex="-1" [class]="model.cssClasses.canvas" (blur)="model.onBlur($event)"></canvas>
 </div>
 <div [class]="model.cssClasses.controls" *ngIf="model.canShowClearButton">
   <button

diff --git a/packages/survey-vue3-ui/CHANGELOG.md b/packages/survey-vue3-ui/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [1.9.126](https://github.com/surveyjs/survey-library/compare/v1.9.125...v1.9.126) (2024-01-17)
+
 ## [1.9.125](https://github.com/surveyjs/survey-library/compare/v1.9.124...v1.9.125) (2024-01-11)
 
 

diff --git a/packages/survey-vue3-ui/example/src/components/test/TestCommon.vue b/packages/survey-vue3-ui/example/src/components/test/TestCommon.vue
@@ -5,15 +5,18 @@ import "survey-core/survey.i18n";
 import { shallowRef } from "vue";
 const survey = shallowRef();
 const isPopup = shallowRef();
-(window as any).setSurvey = (model: SurveyModel | Survey.PopupSurveyModel, isPopupValue: boolean) => {
+const isExpanded = shallowRef();
+(window as any).setSurvey = (model: SurveyModel | Survey.PopupSurveyModel, isPopupValue: boolean, isExpandedValue = true) => {
     survey.value = model;
     isPopup.value = isPopupValue;
+    isExpanded.value = isExpandedValue;
 }
 </script>
 <template>
-<div id="surveyElement">
-    <SurveyComponent v-if="survey && !isPopup" :survey="survey"></SurveyComponent>
-    <PopupSurveyComponent v-if="survey && isPopup" :survey="survey"></PopupSurveyComponent>
-</div>
-<div id="surveyResultElement"></div>
+    <div id="surveyElement">
+        <SurveyComponent v-if="survey && !isPopup" :survey="survey"></SurveyComponent>
+        <PopupSurveyComponent v-if="survey && isPopup" :survey="survey" :isExpanded="isExpanded" :allowClose='true'>
+        </PopupSurveyComponent>
+    </div>
+    <div id="surveyResultElement"></div>
 </template>
diff --git a/packages/survey-vue3-ui/package.json b/packages/survey-vue3-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "survey-vue3-ui",
-  "version": "1.9.125",
+  "version": "1.9.126",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",

diff --git a/packages/survey-vue3-ui/src/PopupSurvey.vue b/packages/survey-vue3-ui/src/PopupSurvey.vue
@@ -1,60 +1,26 @@
 <template>
-  <div
-    v-if="surveyWindow.isShowing"
-    style="position: fixed; bottom: 3px; right: 10px"
-    :style="{
-      maxWidth: surveyWindow.renderedWidth,
-      width: surveyWindow.renderedWidth,
-    }"
-    :class="surveyWindow.cssRoot"
-  >
-    <div :class="surveyWindow.cssHeaderRoot">
-      <span
-        @click="doExpand"
-        style="width: 100%; cursor: pointer; user-select: none"
-      >
-        <span style="padding-right: 10px" :class="surveyWindow.cssHeaderTitle">
-          <survey-string :locString="survey.locTitle" />
-        </span>
-        <span aria-hidden="true" :class="expandedCss"></span>
-      </span>
-      <span
-        v-if="surveyWindow.allowClose"
-        :class="surveyWindow.cssHeaderButton"
-        @click="doHide"
-        style="
-          transform: rotate(45deg);
-          float: right;
-          cursor: pointer;
-          user-select: none;
-          width: 24px;
-          height: 24px;
-        "
-      >
-        <sv-svg-icon :iconName="'icon-expanddetail'" :size="16"> </sv-svg-icon>
-      </span>
-      <span
-        v-if="isExpandedSurvey"
-        :class="surveyWindow.cssHeaderButton"
-        @click="doExpand"
-        style="
-          float: right;
-          cursor: pointer;
-          user-select: none;
-          width: 24px;
-          height: 24px;
-        "
-      >
-        <sv-svg-icon :iconName="'icon-collapsedetail'" :size="16">
-        </sv-svg-icon>
-      </span>
-    </div>
-    <div
-      v-if="isExpandedSurvey"
-      :class="surveyWindow.cssBody"
-      @scroll="doScroll"
-    >
-      <component :is="getSurveyComponentName()" :survey="survey"> </component>
+  <div v-if="surveyWindow.isShowing" :style="{ maxWidth: surveyWindow.renderedWidth, width: surveyWindow.renderedWidth }"
+    :class="surveyWindow.cssRoot" @scroll="doScroll">
+    <div :class="surveyWindow.cssRootContent">
+      <div :class="cssHeaderRoot()">
+        <div v-if="surveyWindow.isCollapsed && !!surveyWindow.locTitle" :class="surveyWindow.cssHeaderTitleCollapsed">
+          {{ surveyWindow.locTitle.renderedHtml }}
+        </div>
+
+        <div :class="surveyWindow.cssHeaderButtonsContainer">
+          <div :class="surveyWindow.cssHeaderCollapseButton" @click="doExpand">
+            <sv-svg-icon v-if="surveyWindow.isExpanded" :iconName="'icon-minimize_16x16'" :size="16"> </sv-svg-icon>
+            <sv-svg-icon v-if="surveyWindow.isCollapsed" :iconName="'icon-restore_16x16'" :size="16"> </sv-svg-icon>
+          </div>
+
+          <div v-if="surveyWindow.allowClose" :class="surveyWindow.cssHeaderCloseButton" @click="doHide">
+            <sv-svg-icon :iconName="'icon-close_16x16'" :size="16"> </sv-svg-icon>
+          </div>
+        </div>
+      </div>
+      <div :class="surveyWindow.cssBody">
+        <component :is="getSurveyComponentName()" :survey="survey"> </component>
+      </div>
     </div>
   </div>
 </template>
@@ -67,6 +33,7 @@ import { useBase } from "./base";
 const props = defineProps<{
   survey: SurveyModel;
   isExpanded: boolean;
+  allowClose: boolean;
   closeOnCompleteTimeout: number;
 }>();
 const surveyWindow =
@@ -96,6 +63,14 @@ const doScroll = () => {
   surveyWindow.value.onScroll();
 };
 
+const cssHeaderRoot = () => {
+  let headerCss = surveyWindow.value.cssHeaderRoot;
+  if (surveyWindow.value.isCollapsed) {
+    headerCss += " " + surveyWindow.value.cssRootCollapsedMod;
+  }
+  return headerCss;
+}
+
 useBase(() => surveyWindow.value);
 
 const stopWatch = watch(
@@ -108,6 +83,9 @@ const stopWatch = watch(
     if (props.closeOnCompleteTimeout !== undefined) {
       model.closeOnCompleteTimeout = props.closeOnCompleteTimeout;
     }
+    if (props.allowClose !== undefined) {
+      model.allowClose = props.allowClose;
+    }
     model.isShowing = true;
     surveyWindow.value = model;
   },

diff --git a/packages/survey-vue3-ui/src/Signaturepad.vue b/packages/survey-vue3-ui/src/Signaturepad.vue
@@ -21,7 +21,7 @@
           width: question.renderedCanvasWidth,
         }"
       />
-        <canvas tabindex="0" :class="question.cssClasses.canvas" @blur="question.onBlur"></canvas>
+      <canvas tabindex="-1" :class="question.cssClasses.canvas" @blur="question.onBlur"></canvas>
     </div>
     <div
       :class="question.cssClasses.controls"

diff --git a/packages/survey-vue3-ui/src/components/progress/ProgressToc.vue b/packages/survey-vue3-ui/src/components/progress/ProgressToc.vue
@@ -1,16 +1,15 @@
 <template>
-  <div :class="tocModel.containerCss">
-    <div v-if="tocModel.isMobile" v-on:click="tocModel.togglePopup" v-key2click>
-      <sv-svg-icon :iconName="tocModel.icon" :size="24"></sv-svg-icon>
-      <sv-popup :model="tocModel.popupModel"></sv-popup>
+  <div :class="model.containerCss">
+    <div v-if="model.isMobile" v-on:click="model.togglePopup" v-key2click>
+      <sv-svg-icon :iconName="model.icon" :size="24"></sv-svg-icon>
+      <sv-popup :model="model.popupModel"></sv-popup>
     </div>
-    <sv-list v-else :model="tocModel.listModel"></sv-list>
+    <sv-list v-else :model="model.listModel"></sv-list>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { type SurveyModel, TOCModel } from "survey-core";
 
-const props = defineProps<{ survey: SurveyModel }>();
-const tocModel = new TOCModel(props.survey);
+const props = defineProps<{ survey: SurveyModel, model: TOCModel }>();
 </script>
diff --git a/packages/survey-vue3-ui/src/index.ts b/packages/survey-vue3-ui/src/index.ts
@@ -215,7 +215,7 @@ function registerComponents(app: App) {
   app.component("sv-components-container", Container);
 
   app.component("sv-progress-buttons", ProgressButtons);
-  app.component("sv-progress-toc", ProgressToc);
+  app.component("sv-navigation-toc", ProgressToc);
   app.component("sv-progress-pages", Progress);
   app.component("sv-progress-questions", Progress);
   app.component("sv-progress-correctquestions", Progress);

diff --git a/src/base.ts b/src/base.ts
@@ -218,6 +218,16 @@ export class Base {
     }
     return Helpers.isValueEmpty(value);
   }
+  public equals(obj: Base): boolean {
+    if(!obj) return false;
+    if (this.isDisposed || obj.isDisposed) return false;
+    if(this.getType() != obj.getType()) return false;
+    return this.equalsCore(obj);
+  }
+  protected equalsCore(obj: Base): boolean {
+    if((<any>this).name !== (<any>obj).name) return false;
+    return Helpers.isTwoValueEquals(this.toJSON(), obj.toJSON(), false, true, false);
+  }
   protected trimValue(value: any): any {
     if (!!value && (typeof value === "string" || value instanceof String))
       return value.trim();

diff --git a/src/common-styles/sv-progress-toc.scss → src/common-styles/sv-navigation-toc.scss b/src/common-styles/sv-progress-toc.scss → src/common-styles/sv-navigation-toc.scss
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,6 +2,8 @@

		All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.

		## [1.9.126](https://github.com/surveyjs/survey-library/compare/v1.9.125...v1.9.126) (2024-01-17)

		## [1.9.125](https://github.com/surveyjs/survey-library/compare/v1.9.124...v1.9.125) (2024-01-11)


Expand Down