Merge branch 'master' of github.com:surveyjs/survey-library into issu…

…e/8129-popup-submenu

# Conflicts:
#	src/actions/action.ts

build-scripts/survey-knockout-ui/package.json

@@ -27,8 +27,10 @@
       ]
     }
   },
+  "peerDependencies": {
+    "survey-core": "*"
+  },
   "dependencies": {
-    "survey-core": "*",
     "knockout": "^3.5.0"
   }
 }

build-scripts/survey-vue-ui/package.json

@@ -20,8 +20,10 @@
     "url": "https://github.com/surveyjs/surveyjs.git"
   },
   "typings": "survey-vue-ui.d.ts",
+  "peerDependencies": {
+    "survey-core": "*"
+  },
   "dependencies": {
-    "survey-core": "*",
     "vue": "^2.6.12"
   }
 }

build-scripts/webpack.common.js

@@ -32,8 +32,8 @@ module.exports = function (options, packageJson, chunkName, buildFolderName) {
   var buildPath = __dirname + "/../build/" + (buildFolderName || packageJson.name) + "/";
   var isProductionBuild = options.buildType === "prod";
 
-  if (!!packageJson.dependencies && packageJson.dependencies["survey-core"]) {
-    packageJson.dependencies["survey-core"] = packageJson.version;
+  if (!!packageJson.peerDependencies && packageJson.peerDependencies["survey-core"]) {
+    packageJson.peerDependencies["survey-core"] = packageJson.version;
   }
 
   function createSVGBundle() {

packages/survey-angular-ui/package.json

@@ -57,11 +57,11 @@
     "survey-core": "../../build/survey-core"
   },
   "scripts": {
-    "build": "ng build && npx copyfiles -u 1 \"build/**/*\" ../../build/survey-angular-ui",
+    "build": "ng build && npx copyfiles -u 1 \"build/**/*\" ../../build/survey-angular-ui && node ./update-version.js",
     "serve:example": "ng serve",
     "build:example": "ng build --aot --output-hashing=none angular-ui",
     "test": "ng test survey-angular-ui",
     "test:single": "ng test --watch=false --browsers=ChromeHeadless survey-angular-ui",
     "release": "commit-and-tag-version --message \"Release: %s [azurepipelines skip]\" "
   }
-}
+}

packages/survey-angular-ui/update-version.js

@@ -0,0 +1,5 @@
+const fs = require("fs");
+const jsonPath = `${__dirname}/../../build/survey-angular-ui/package.json`;
+const json = JSON.parse(fs.readFileSync(jsonPath, "utf8"));
+json["peerDependencies"]["survey-core"] = json.version;
+fs.writeFileSync(jsonPath, JSON.stringify(json, undefined, 2));

packages/survey-vue3-ui/publish/package.json

@@ -19,9 +19,7 @@
     "url": "https://github.com/surveyjs/surveyjs.git"
   },
   "peerDependencies": {
-    "vue": "^3.2.41"
-  },
-  "dependencies": {
+    "vue": "^3.2.41",
     "survey-core": "*"
   }
 }

packages/survey-vue3-ui/vite.config.ts

@@ -7,7 +7,7 @@ import generatePackageJson from "rollup-plugin-generate-package-json";
 const json = require("./publish/package.json");
 const packageJson = require("./package.json");
 json.version = packageJson.version;
-// json.dependencies["survey-core"] = json.version;
+json.peerDependencies["survey-core"] = json.version;
 
 const libraryName = "survey-vue3-ui";
 

src/actions/action.ts

@@ -202,10 +202,11 @@ export function createPopupModelWithListModel(listOptions: IListModel, popupOpti
   );
   listModel.setOnFilterStringChangedCallback(listOptions.onFilterStringChangedCallback);
 
-  const innerPopupModel: PopupModel = new PopupModel("sv-list", { model: listModel }, popupOptions?.verticalPosition, popupOptions?.horizontalPosition, popupOptions?.showPointer, popupOptions?.isModal, popupOptions?.onCancel, popupOptions?.onApply, popupOptions?.onHide, popupOptions?.onShow, popupOptions?.cssClass, popupOptions?.title, () => {
-    listModel.dispose();
-  });
+  const options = popupOptions || {};
+  options.onDispose = () => { listModel.dispose(); };
+  const innerPopupModel: PopupModel = new PopupModel("sv-list", { model: listModel }, options);
   innerPopupModel.displayMode = popupOptions?.displayMode as any;
+
   return { innerPopupModel, listModel };
 }
 
@@ -241,7 +242,7 @@ export abstract class BaseAction extends Base implements IAction {
   public id: string;
   public removePriority: number;
   @property() iconName: string;
-  @property() iconSize: number = 24;
+  @property({ defaultValue: 24 }) iconSize: number;
   @property() markerIconName: string;
   @property() markerIconSize: number = 16;
   @property() css?: string

src/common-styles/common-styles.scss

@@ -10,4 +10,4 @@
 @import "./sv-ranking.scss";
 @import "./sv-list.scss";
 @import "./sv-save-data.scss";
-@import "./sv-string-viewer.scss";
+@import "./sv-string-viewer.scss";

src/common-styles/sv-ranking.scss

@@ -64,7 +64,7 @@
 .sv-ranking-item--preview.sv-ranking-item--preview {
   cursor: initial;
   user-select: initial;
-    -webkit-user-select: initial;
+  -webkit-user-select: initial;
 
   .sv-ranking-item__icon-container.sv-ranking-item__icon-container {
     .sv-ranking-item__icon.sv-ranking-item__icon {
@@ -248,6 +248,18 @@
   }
 }
 
+.sv-ranking-shortcut {
+  cursor: grabbing;
+  position: absolute;
+  z-index: 10000;
+  border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  min-width: 100px;
+  max-width: 400px;
+  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
+  background-color: var(--sjs-general-backcolor, var(--background, #fff));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
+}
+
 .sv-ranking--select-to-rank {
   display: flex;
 }

src/defaultCss/defaultV2Css.ts

@@ -635,6 +635,8 @@ export var defaultV2Css = {
     selectWrapper: "sv-dropdown_select-wrapper",
     controlValue: "sd-dropdown__value",
     controlDisabled: "sd-input--disabled",
+    controlReadOnly: "sd-input--readonly",
+    controlPreview: "sd-input--preview",
     controlEmpty: "sd-dropdown--empty",
     filterStringInput: "sd-dropdown__filter-string-input",
     chevronButton: "sd-dropdown_chevron-button",

src/defaultV2-theme/blocks/sd-imagepicker.scss

@@ -88,8 +88,10 @@
 }
 
 .sd-imagepicker__item:focus-within .sd-imagepicker__image,
-.sd-imagepicker__item--allowhover .sd-imagepicker__image:hover {
-  opacity: 0.5;
+.sd-imagepicker__item--allowhover:not(.sd-imagepicker__item--readonly, .sd-imagepicker__item--preview) {
+  .sd-imagepicker__image:hover {
+    opacity: 0.5;
+  }
 }
 
 .sd-imagepicker__image {

src/defaultV2-theme/blocks/sd-item.scss

@@ -41,7 +41,7 @@
   box-shadow: $shadow-inner-reset, 0 0 0 2px $primary;
 }
 
-.sd-item--allowhover .sd-selectbase__label:hover .sd-item__decorator {
+.sd-item--allowhover:not(.sd-item--readonly) .sd-selectbase__label:hover .sd-item__decorator {
   background: $background-dim-dark;
   outline: none;
 }

src/defaultV2-theme/blocks/sd-paneldynamic.scss

@@ -310,13 +310,14 @@
     }
 }
 
-.sd-paneldynamic__panel-wrapper--fade-in-left,
-.sd-paneldynamic__panel-wrapper--fade-in-right {
+.sd-paneldynamic__panel-wrapper--fade-in.sv-pd-animation-left,
+.sd-paneldynamic__panel-wrapper--fade-in.sv-pd-animation-right {
+    --sjs-pd-tab-animation-delay: 0ms;
     animation-name: movePanel, changeHeight, paddingFadeIn, fadeIn;
     animation-duration: $pd-tab-move-in-duration, $pd-tab-height-change-duration, $pd-tab-height-change-duration,
         $pd-tab-fade-in-duration;
-    animation-delay: $pd-tab-move-in-delay, $pd-tab-height-change-delay, $pd-tab-height-change-delay,
-        $pd-tab-fade-in-delay;
+    animation-delay: calc(#{$pd-tab-move-in-delay} + var(--sjs-pd-tab-animation-delay)), calc(#{$pd-tab-height-change-delay} + var(--sjs-pd-tab-animation-delay)), calc(#{$pd-tab-height-change-delay} + var(--sjs-pd-tab-animation-delay)),
+        calc(#{$pd-tab-fade-in-delay} + var(--sjs-pd-tab-animation-delay));
     animation-timing-function: $ease-out;
     animation-fill-mode: forwards;
     opacity: 0;
@@ -326,15 +327,15 @@
     --animation-padding-top: 0;
     --animation-padding-bottom: calc(1 * var(--sd-base-padding));
 }
-.sd-paneldynamic__panel-wrapper--fade-in-left {
+.sd-paneldynamic__panel-wrapper--fade-in.sv-pd-animation-left {
     --sjs-pd-tab-move-margin: calc(1 * #{$pd-tab-move-in-margin});
 }
-.sd-paneldynamic__panel-wrapper--fade-in-right {
+.sd-paneldynamic__panel-wrapper--fade-in.sv-pd-animation-right {
     --sjs-pd-tab-move-margin: calc(-1 * #{$pd-tab-move-in-margin});
 }
 
-.sd-paneldynamic__panel-wrapper--fade-out-left,
-.sd-paneldynamic__panel-wrapper--fade-out-right {
+.sd-paneldynamic__panel-wrapper--fade-out.sv-pd-animation-left,
+.sd-paneldynamic__panel-wrapper--fade-out.sv-pd-animation-right {
     animation-name: fadeIn, movePanel;
     animation-duration: $pd-tab-fade-out-duration, $pd-tab-move-out-duration;
     animation-delay: $pd-tab-fade-out-delay, $pd-tab-move-out-delay;
@@ -344,14 +345,37 @@
     position: absolute;
     left: var(--sd-base-padding);
     top: 0;
-    width: calc(100% - 2 * var(--sd-base-padding));
+    width: calc(100% - 2 * var(--sd-base-padding));   
 }
-.sd-paneldynamic__panel-wrapper--fade-out-left {
+.sd-paneldynamic__panel-wrapper--fade-out.sv-pd-animation-left {
     --sjs-pd-tab-move-margin: calc(-1 * #{$pd-tab-move-out-margin});
 }
-.sd-paneldynamic__panel-wrapper--fade-out-right {
+.sd-paneldynamic__panel-wrapper--fade-out.sv-pd-animation-right {
     --sjs-pd-tab-move-margin: calc(1 * #{$pd-tab-move-out-margin});
 }
+.sd-paneldynamic__panel-wrapper--fade-in.sv-pd-animation-adding {
+    animation-name: fadeIn, changeHeight, paddingFadeIn;
+    animation-duration: $pd-tab-add-fade-in-duration, $pd-tab-height-change-duration, $pd-tab-height-change-duration;
+    animation-delay: calc(#{$pd-tab-add-fade-in-delay} + var(--sjs-pd-tab-animation-delay)), calc(#{$pd-tab-height-change-delay} + var(--sjs-pd-tab-animation-delay)), calc(#{$pd-tab-height-change-delay} + var(--sjs-pd-tab-animation-delay));
+    animation-timing-function: $ease-out;
+    animation-fill-mode: forwards;
+    transform: translateX(0);
+}
+.sd-paneldynamic__panel-wrapper--fade-in.sv-pd-animation-removing {
+    --sjs-pd-tab-animation-delay: #{$pd-tab-remove-fade-in-delay};   
+}
+.sd-paneldynamic__panel-wrapper--fade-out.sv-pd-animation-removing {
+    animation-name: fadeIn;
+    animation-duration: $pd-tab-remove-fade-out-duration;
+    animation-delay: $pd-tab-remove-fade-out-delay;
+    animation-timing-function: $reverse-ease-out;
+    animation-direction: reverse;
+    animation-fill-mode: forwards;
+    position: absolute;
+    left: var(--sd-base-padding);
+    top: 0;
+    width: calc(100% - 2 * var(--sd-base-padding));
+}
 
 .sd-paneldynamic__panel-wrapper--fade-in,
 .sd-paneldynamic__panel-wrapper--fade-out {

src/defaultV2-theme/blocks/sd-progress.scss

@@ -20,11 +20,11 @@
   line-height: calcLineHeight(1);
   font-weight: 600;
 
-  @media only screen and (min-width: calcSize(125)) {
+  @media only screen and (min-width: 1000px) {
     margin-left: 5%;
   }
 
-  @media only screen and (max-width: calcSize(125)) {
+  @media only screen and (max-width: 1000px) {
     margin-left: 10px;
   }
 }

src/defaultV2-theme/variables.scss

@@ -188,6 +188,13 @@ $pd-tab-move-in-margin: var(--sjs-pd-tab-move-in-margin, 50%);
 $pd-tab-move-out-margin: var(--sjs-pd-tab-move-out-margin, 50%);
 $pd-tab-move-margin: var(--sjs-pd-tab-move-margin);
 
+$pd-tab-add-fade-in-duration: var(--sjs-pd-tab-add-fade-in-duration, 500ms);
+$pd-tab-add-fade-in-delay: var(--sjs-pd-tab-add-fade-in-delay, 250ms);
+$pd-tab-remove-fade-out-duration: var(--sjs-pd-tab-remove-fade-out-duration, 150ms);
+$pd-tab-remove-fade-out-delay: var(--sjs-pd-tab-remove-fade-out-delay, 0ms);
+$pd-tab-remove-fade-in-delay: var(--sjs-pd-tab-remove-fade-in-delay, 150ms);
+
+
 $pd-list-fade-in-duration: var(--sjs-pd-list-fade-in-duration, 500ms);
 $pd-list-move-in-duration: var(--sjs-pd-list-move-in-duration, 250ms);
 $pd-list-fade-in-delay: var(--sjs-pd-list-fade-in-delay, 250ms);

src/dragdrop/ranking-choices.ts

@@ -17,17 +17,6 @@ export class DragDropRankingChoices extends DragDropChoices {
     if(!draggedElementShortcut) return;
 
     draggedElementShortcut.className = this.shortcutClass + " sv-ranking-shortcut";
-    draggedElementShortcut.style.cssText = ` 
-          cursor: grabbing;
-          position: absolute;
-          z-index: 10000;
-          border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-          min-width: 100px;
-          max-width: 400px;
-          box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
-          background-color: var(--sjs-general-backcolor, var(--background, #fff));
-          font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
-        `;
 
     const isDeepClone = true;
     const clone = <HTMLElement>draggedElementNode.cloneNode(isDeepClone);

src/dropdownListModel.ts

@@ -4,7 +4,7 @@ import { DomDocumentHelper } from "./global_variables_utils";
 import { ItemValue } from "./itemvalue";
 import { property } from "./jsonobject";
 import { ListModel } from "./list";
-import { PopupModel } from "./popup";
+import { IPopupOptionsBase, PopupModel } from "./popup";
 import { Question } from "./question";
 import { QuestionDropdownModel } from "./question_dropdown";
 import { settings } from "./settings";
@@ -87,7 +87,8 @@ export class DropdownListModel extends Base {
   }
 
   protected createPopup(): void {
-    this._popupModel = new PopupModel("sv-list", { model: this.listModel }, "bottom", "center", false);
+    const popupOptions: IPopupOptionsBase = { verticalPosition: "bottom", horizontalPosition: "center", showPointer: false };
+    this._popupModel = new PopupModel("sv-list", { model: this.listModel }, popupOptions);
     this._popupModel.displayMode = IsTouch ? "overlay" : "popup";
     this._popupModel.positionMode = "fixed";
     this._popupModel.isFocusedContainer = false;
@@ -153,7 +154,6 @@ export class DropdownListModel extends Base {
   protected onHidePopup(): void {
     this.resetFilterString();
     this.question.suggestedItem = null;
-    this.listModel.refresh();
   }
 
   protected getAvailableItems(): Array<ItemValue> {

src/jsonobject.ts

@@ -1842,7 +1842,7 @@ export class JsonObject {
     this.removePosFromObj(value);
   }
   private removePosFromObj(obj: any) {
-    if (!obj) return;
+    if (!obj || typeof obj.getType === "function") return;
     if (Array.isArray(obj)) {
       for (var i = 0; i < obj.length; i++) {
         this.removePosFromObj(obj[i]);

src/localization/english.ts

@@ -20,8 +20,7 @@ export var englishStrings = {
   questionsProgressText: "Answered {0}/{1} questions",
   emptySurvey: "The survey doesn't contain any visible elements.",
   completingSurvey: "Thank you for completing the survey",
-  completingSurveyBefore:
-    "Our records show that you have already completed this survey.",
+  completingSurveyBefore: "You have already completed this survey.",
   loadingSurvey: "Loading Survey...",
   placeholder: "Select...",
   ratingOptionsCaption: "Select...",
@@ -35,8 +34,7 @@ export var englishStrings = {
   maxError: "The value should not be greater than {0}",
   textMinLength: "Please enter at least {0} character(s).",
   textMaxLength: "Please enter no more than {0} character(s).",
-  textMinMaxLength:
-    "Please enter at least {0} and no more than {1} characters.",
+  textMinMaxLength: "Please enter at least {0} and no more than {1} characters.",
   minRowCountError: "Please fill in at least {0} row(s).",
   minSelectError: "Please select at least {0} option(s).",
   maxSelectError: "Please select no more than {0} option(s).",
@@ -46,13 +44,11 @@ export var englishStrings = {
   invalidEmail: "Please enter a valid e-mail address.",
   invalidExpression: "The expression: {0} should return 'true'.",
   urlRequestError: "The request returned error '{0}'. {1}",
-  urlGetChoicesError:
-    "The request returned empty data or the 'path' property is incorrect",
+  urlGetChoicesError: "The request returned empty data or the 'path' property is incorrect",
   exceedMaxSize: "The file size should not exceed {0}.",
   noUploadFilesHandler: "Files cannot be uploaded. Please add a handler for the 'onUploadFiles' event.",
   otherRequiredError: "Response required: enter another value.",
-  uploadingFile:
-    "Your file is uploading. Please wait several seconds and try again.",
+  uploadingFile: "Your file is uploading. Please wait several seconds and try again.",
   loadingFile: "Loading...",
   chooseFile: "Choose file(s)...",
   noFileChosen: "No file selected",
@@ -74,15 +70,14 @@ export var englishStrings = {
   savingData: "The results are being saved on the server...",
   savingDataError: "An error occurred and we could not save the results.",
   savingDataSuccess: "The results were saved successfully!",
-  savingExceedSize: "Your response exceeds 64KB. Please reduce the size of your file(s) and try again or contact a survey owner.",
+  savingExceedSize: "Your response exceeds 64KB. Please reduce the size of your file(s) and try again or contact the survey owner.",
   saveAgainButton: "Try again",
   timerMin: "min",
   timerSec: "sec",
   timerSpentAll: "You have spent {0} on this page and {1} in total.",
   timerSpentPage: "You have spent {0} on this page.",
   timerSpentSurvey: "You have spent {0} in total.",
-  timerLimitAll:
-    "You have spent {0} of {1} on this page and {2} of {3} in total.",
+  timerLimitAll: "You have spent {0} of {1} on this page and {2} of {3} in total.",
   timerLimitPage: "You have spent {0} of {1} on this page.",
   timerLimitSurvey: "You have spent {0} of {1} in total.",
   clearCaption: "Clear",

src/main.scss

@@ -16,6 +16,7 @@ $font-family: var(--font-family, var(--sjs-default-font-family));
 @import "./common-styles/sv-brand-info.scss";
 @import "./common-styles/sv-drag-drop.scss";
 @import "./common-styles/sv-save-data.scss";
+@import "./common-styles/sv-ranking.scss";
 
 $header-background-color: #e7e7e7;
 $body-container-background-color: #f4f4f4;