Merge branch 'master' into bug/private-309-ranking-counting

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.112](https://github.com/surveyjs/survey-library/compare/v1.9.111...v1.9.112) (2023-10-10)
+
 ## [1.9.111](https://github.com/surveyjs/survey-library/compare/v1.9.110...v1.9.111) (2023-10-04)
 
 ## [1.9.110](https://github.com/surveyjs/survey-library/compare/v1.9.109...v1.9.110) (2023-09-26)

package.json

@@ -88,7 +88,7 @@
     "testcafe:ci:angular": "testcafe -c 4 -q attemptLimit=5,successThreshold=1 chrome:headless testCafe/ --app \"http-server ./packages/survey-angular-ui/example/dist --proxy http://localhost:8080? -p 8080\" --selector-timeout 1500 --reporter minimal --env=angular",
     "prepare": "husky install"
   },
-  "version": "1.9.111",
+  "version": "1.9.112",
   "name": "survey-library",
   "private": true,
   "devDependencies": {

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.112](https://github.com/surveyjs/surveyjs/compare/v1.9.111...v1.9.112) (2023-10-10)
+
 ## [1.9.111](https://github.com/surveyjs/surveyjs/compare/v1.9.110...v1.9.111) (2023-10-04)
 
 ## [1.9.110](https://github.com/surveyjs/surveyjs/compare/v1.9.109...v1.9.110) (2023-09-26)

packages/survey-angular-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-angular-ui",
-  "version": "1.9.111",
+  "version": "1.9.112",
   "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",

packages/survey-angular-ui/src/components/cover/cover.component.html

@@ -1,7 +1,7 @@
 <ng-template #template>
   <div *ngIf="(survey.headerView === 'advanced' && survey.renderedHasHeader)" [class]="model.coverClasses" [style]="{ height: model.renderedHeight }">
     <div *ngIf="!!model.backgroundImage" [style]="model.backgroundImageStyle" [class]="model.backgroundImageClasses"></div>
-    <div [class]="model.contentClasses">
+    <div [class]="model.contentClasses" [style.width]="model.maxWidth">
       <ng-container *ngFor="let cell of model.cells">
         <sv-ng-cover-cell [model]="cell"></sv-ng-cover-cell>
       </ng-container>

packages/survey-angular-ui/src/components/dropdown/dropdown.component.html

@@ -32,7 +32,7 @@
             (change)="inputChange($event)" (blur)="blur($event)" (focus)="focus($event)"/>
         </div>
         <div *ngIf="(model.allowClear && model.cssClasses.cleanButtonIconId)"
-            [class]="model.cssClasses.cleanButton" (click)="clear($event)" [visible]="!model.isEmpty()">
+            [class]="model.cssClasses.cleanButton" (click)="clear($event)" [visible]="model.showClearButton">
             <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->
             <!-- /ko -->
             <svg [iconName]="model.cssClasses.cleanButtonIconId" [partCss]="model.cssClasses.cleanButtonSvg" [title]="model.clearCaption"

packages/survey-angular-ui/src/components/tagbox/tagbox.component.html

@@ -15,7 +15,7 @@
             <ng-template [component]="{ name: 'sv-tagbox-filter', data: { model: dropdownModel, question: model } }"></ng-template>
         </div>
         <div *ngIf="(model.allowClear && model.cssClasses.cleanButtonIconId)" [class]="model.cssClasses.cleanButton"
-            (click)="clear($event)" [visible]="!model.isEmpty()">
+            (click)="clear($event)" [visible]="model.showClearButton">
             <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->
             <!-- /ko -->
             <svg [iconName]="model.cssClasses.cleanButtonIconId" [partCss]="model.cssClasses.cleanButtonSvg" [title]="model.clearCaption"

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.112](https://github.com/surveyjs/survey-library/compare/v1.9.111...v1.9.112) (2023-10-10)
+
 ## [1.9.111](https://github.com/surveyjs/survey-library/compare/v1.9.110...v1.9.111) (2023-10-04)
 
 ## [1.9.110](https://github.com/surveyjs/survey-library/compare/v1.9.109...v1.9.110) (2023-09-26)

packages/survey-vue3-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-vue3-ui",
-  "version": "1.9.111",
+  "version": "1.9.112",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",

packages/survey-vue3-ui/src/components/cover/Cover.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="model.coverClasses" :style="{ 'height': model.renderedHeight }">
     <div v-if="!!model.backgroundImage" :class="model.backgroundImageClasses" :style="model.backgroundImageStyle"></div>
-    <div :class="model.contentClasses">
+    <div :class="model.contentClasses" :style="{ maxWidth: model.maxWidth }">
     <sv-cover-cell
       v-for="cell in model.cells"
       :model="cell"

packages/survey-vue3-ui/src/components/dropdown/Dropdown.vue

@@ -74,7 +74,7 @@
       <div
         :class="question.cssClasses.cleanButton"
         v-if="question.allowClear && question.cssClasses.cleanButtonIconId"
-        v-show="!question.isEmpty()"
+        v-show="question.showClearButton"
         @click="clear"
       >
         <sv-svg-icon

packages/survey-vue3-ui/src/components/tagbox/Tagbox.vue

@@ -37,7 +37,7 @@
       <div
         :class="question.cssClasses.cleanButton"
         v-if="question.allowClear && question.cssClasses.cleanButtonIconId"
-        v-show="!question.isEmpty()"
+        v-show="question.showClearButton"
         @click="clear"
       >
         <sv-svg-icon

src/cover.ts

@@ -83,10 +83,12 @@ export class Cover extends Base {
       .toString();
   }
   private updateContentClasses(): void {
+    const surveyWidthMode = !!this.survey && this.survey.calculateWidthMode();
+    this.maxWidth = this.inheritWidthFrom === "survey" && !!surveyWidthMode && surveyWidthMode === "static" && this.survey.renderedWidth;
     this.contentClasses = new CssClassBuilder()
       .append("sv-conver__content")
-      .append("sv-conver__content--static", this.inheritWidthFrom === "survey" && !!this.survey && this.survey.calculateWidthMode() === "static")
-      .append("sv-conver__content--responsive", this.inheritWidthFrom === "page" || (!!this.survey && this.survey.calculateWidthMode() === "responsive"))
+      .append("sv-conver__content--static", this.inheritWidthFrom === "survey" && !!surveyWidthMode && surveyWidthMode === "static")
+      .append("sv-conver__content--responsive", this.inheritWidthFrom === "page" || (!!surveyWidthMode && surveyWidthMode === "responsive"))
       .toString();
   }
   private updateBackgroundImageClasses(): void {
@@ -144,6 +146,7 @@ export class Cover extends Base {
   @property() descriptionStyle: { gridColumn: number, gridRow: number };
   @property() coverClasses: string;
   @property() contentClasses: string;
+  @property() maxWidth: string;
   @property() backgroundImageClasses: string;
 
   public get renderedHeight(): string {
@@ -162,7 +165,7 @@ export class Cover extends Base {
     if(!!newValue) {
       this.updateContentClasses();
       this._survey.onPropertyChanged.add((sender: any, options: any) => {
-        if (options.name == "widthMode") {
+        if (options.name == "widthMode" || options.name == "width") {
           this.updateContentClasses();
         }
       });

src/defaultV2-theme/blocks/cover.scss

@@ -1,24 +1,25 @@
 .sv-cover {
-  padding: calcSize(5);
-  box-sizing: border-box;
   position: relative;
   background-color: $cover-backcolor;
 }
 
 .sv-conver__overlap {
-  margin-bottom: calcSize(-13);
-  padding-bottom: calcSize(13);
+  margin-bottom: calcSize(-14);
+  padding-bottom: calcSize(8);
 }
 
 .sv-conver__overlap.sv-conver__without-background {
   margin-bottom: 0;
+  padding-bottom: 0;
 }
 
-.sv-conver__without-background {
+.sv-conver__without-background .sv-conver__content {
   padding-bottom: 0;
 }
 
 .sv-conver__content {
+  padding: calcSize(5);
+  box-sizing: border-box;
   height: 100%;
   position: relative;
   display: grid;
@@ -29,7 +30,7 @@
 }
 
 .sv-conver__content--static {
-  max-width: calcSize(80);
+  max-width: calcSize(88);
   margin-left: auto;
   margin-right: auto;
 }

src/knockout/components/cover/cover.html

@@ -3,7 +3,7 @@
   <!-- ko if: !!model.backgroundImage -->
   <div data-bind="style: model.backgroundImageStyle, css: model.backgroundImageClasses"></div>
   <!-- /ko -->
-  <div data-bind="css: model.contentClasses">
+  <div data-bind="css: model.contentClasses, style: { maxWidth: model.maxWidth }">
   <!-- ko foreach: model.cells -->
     <!-- ko component: { name: 'sv-cover-cell', params: { model: $data } } -->
     <!-- /ko -->

src/knockout/components/dropdown/dropdown.html

@@ -54,7 +54,7 @@
       event: { blur: blur, focus: focus }"></input>
     </div>
     <!-- ko if: (question.allowClear && question.cssClasses.cleanButtonIconId) -->
-    <div data-bind="css: question.cssClasses.cleanButton, click: clear, visible: !question.isEmpty() ">
+    <div data-bind="css: question.cssClasses.cleanButton, click: clear, visible: question.showClearButton ">
       <!-- ko component: { name: 'sv-svg-icon', params: { css: question.cssClasses.cleanButtonSvg, iconName: question.cssClasses.cleanButtonIconId, size: 'auto', title: question.clearCaption } } -->
       <!-- /ko -->
     </div>

src/knockout/components/tagbox/tagbox.html

@@ -53,7 +53,7 @@
       </div>
     </div>
     <!-- ko if: (question.allowClear && question.cssClasses.cleanButtonIconId) -->
-    <div data-bind="css: question.cssClasses.cleanButton, click: clear, visible: !question.isEmpty() ">
+    <div data-bind="css: question.cssClasses.cleanButton, click: clear, visible: question.showClearButton ">
       <!-- ko component: { name: 'sv-svg-icon', params: { css: question.cssClasses.cleanButtonSvg, iconName: question.cssClasses.cleanButtonIconId, size: 'auto', title: question.clearCaption } } -->
       <!-- /ko -->
     </div>

src/page.ts

@@ -47,7 +47,7 @@ export class PageModel extends PanelModelBase implements IPage {
     return this.survey && (<any>this.survey).showPageTitles;
   }
   /**
-   * A caption displayed on a navigation button in the TOC or progress bar. Applies when [`showTOC`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#showTOC) is `true` or when [`showProgressBar`](https://surveyjs.io/form-library/documentation/surveymodel#showProgressBar) is `true` and [`progressBarType`](https://surveyjs.io/form-library/documentation/surveymodel#progressBarType) is `"buttons"`.
+   * A caption displayed on a navigation button in the TOC or progress bar. Applies when [`showTOC`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#showTOC) is `true` or when the [progress bar is visible](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#showProgressBar) and [`progressBarType`](https://surveyjs.io/form-library/documentation/surveymodel#progressBarType) is set to `"buttons"`.
    *
    * If navigation titles are unspecified, the navigation buttons display page [titles](https://surveyjs.io/form-library/documentation/api-reference/page-model#title) or [names](https://surveyjs.io/form-library/documentation/pagemodel#name).
    */
@@ -60,6 +60,9 @@ export class PageModel extends PanelModelBase implements IPage {
   public get locNavigationTitle(): LocalizableString {
     return this.getLocalizableString("navigationTitle");
   }
+  /**
+   * Explanatory text displayed under a navigation button in the progress bar. Applies when the [progress bar is visible](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#showProgressBar) and `SurveyModel`'s [`progressBarType`](https://surveyjs.io/form-library/documentation/surveymodel#progressBarType) property is set to `"buttons"`.
+   */
   public get navigationDescription(): string {
     return this.getLocalizableStringText("navigationDescription");
   }

src/question_dropdown.ts

@@ -54,6 +54,9 @@ export class QuestionDropdownModel extends QuestionSelectBase {
   public set showOptionsCaption(val: boolean) {
     this.allowClear = val;
   }
+  public get showClearButton(): boolean {
+    return this.allowClear && !this.isEmpty() && (!this.isDesignMode || settings.supportCreatorV2);
+  }
   public get optionsCaption() {
     return this.placeholder;
   }

src/question_tagbox.ts

@@ -213,7 +213,9 @@ export class QuestionTagboxModel extends QuestionCheckboxModel {
     super.clearValue();
     this.dropdownListModel.clear();
   }
-
+  public get showClearButton(): boolean {
+    return this.allowClear && !this.isEmpty() && (!this.isDesignMode || settings.supportCreatorV2);
+  }
   //a11y
   public get isNewA11yStructure(): boolean {
     return false;

src/react/components/cover.tsx

@@ -65,7 +65,7 @@ export class CoverComponent extends SurveyElementBase<ILayoutElementProps<Cover>
     return (
       <div className={this.model.coverClasses} style={{ height: this.model.renderedHeight }}>
         {this.model.backgroundImage ? <div style={this.model.backgroundImageStyle} className={this.model.backgroundImageClasses}></div> : null}
-        <div className={this.model.contentClasses}>
+        <div className={this.model.contentClasses} style={{ maxWidth: this.model.maxWidth }}>
           {this.model.cells.map((cell, index) => <CoverCellComponent key={index} model={cell}/>)}
         </div>
       </div>

src/react/dropdown-base.tsx

@@ -138,7 +138,7 @@ export class SurveyQuestionDropdownBase<T extends Question> extends SurveyQuesti
   createClearButton(): JSX.Element | null {
     if (!this.question.allowClear || !this.question.cssClasses.cleanButtonIconId) return null;
 
-    const style = { display: this.question.isEmpty() ? "none" : "" };
+    const style = { display: !this.question.showClearButton ? "none" : "" };
     return (
       <div
         className={this.question.cssClasses.cleanButton}

src/vue/components/cover/cover.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="model.coverClasses" :style="{ 'height': model.renderedHeight }">
     <div v-if="!!model.backgroundImage" :class="model.backgroundImageClasses" :style="model.backgroundImageStyle"></div>
-    <div :class="model.contentClasses">
+    <div :class="model.contentClasses" :style="{ maxWidth: model.maxWidth }">
     <sv-cover-cell
       v-for="cell in model.cells"
       :model="cell"

src/vue/components/dropdown/dropdown.vue

@@ -61,7 +61,7 @@
       <div
         :class="question.cssClasses.cleanButton"
         v-if="question.allowClear && question.cssClasses.cleanButtonIconId"
-        v-show="!question.isEmpty()"
+        v-show="question.showClearButton"
         @click="clear"
       >
         <sv-svg-icon

src/vue/components/tagbox/tagbox.vue

@@ -31,7 +31,7 @@
       <div
         :class="question.cssClasses.cleanButton"
         v-if="question.allowClear && question.cssClasses.cleanButtonIconId"
-        v-show="!question.isEmpty()"
+        v-show="question.showClearButton"
         @click="clear"
       >
         <sv-svg-icon

tests/coverTests.ts

@@ -52,6 +52,28 @@ QUnit.test("cell calculations",
   }
 );
 
+QUnit.test("cover maxWidth",
+  function (assert) {
+    const cover = new Cover();
+    cover.survey = new SurveyModel();
+    assert.equal(cover.maxWidth, undefined, "survey.maxWidth is default");
+
+    cover.survey.width = "500";
+    assert.equal(cover.survey.widthMode, "auto", "default widthMode");
+    assert.equal(cover.inheritWidthFrom, "survey", "default inheritWidthFrom");
+    assert.equal(cover.maxWidth, "500px", "default maxWidth");
+
+    cover.survey = new SurveyModel({ widthMode: "responsive", width: "500" });
+    assert.equal(cover.maxWidth, false, "survey.maxWidth is responsive");
+
+    cover.survey = new SurveyModel({ widthMode: "static", width: "500" });
+    assert.equal(cover.maxWidth, "500px", "survey.maxWidth is static");
+
+    cover.inheritWidthFrom = "page";
+    assert.equal(cover.maxWidth, false, "inheritWidthFrom is page");
+  }
+);
+
 QUnit.test("contentClasses",
   function (assert) {
     const cover = new Cover();

tests/questionDropdownTests.ts

@@ -301,6 +301,35 @@ QUnit.test("deserialize showOptionsCaption & optionsCaption to placeholder & all
   });
 });
 
+QUnit.test("question.showClearButton", assert => {
+  const json = {
+    questions: [
+      {
+        "type": "dropdown",
+        "name": "q1",
+        "optionsCaption": "New optionsCaption",
+        "choices": [
+          "Ford",
+          "Vauxhall",
+          "Volkswagen"
+        ]
+      }]
+  };
+  const survey = new SurveyModel(json);
+  const q = <QuestionDropdownModel>survey.getQuestionByName("q1");
+  assert.equal(q.showClearButton, false, "question is empty");
+  q.value = "Ford";
+  assert.equal(q.showClearButton, true, "question is not empty");
+  q.allowClear = false;
+  assert.equal(q.showClearButton, false, "allowClear is false");
+  q.allowClear = true;
+  survey.setDesignMode(true);
+  assert.equal(q.showClearButton, false, "design mode");
+  settings.supportCreatorV2 = true;
+  assert.equal(q.showClearButton, true, "Creator V2");
+  settings.supportCreatorV2 = false;
+});
+
 QUnit.test("ListModel localization", assert => {
   const json = {
     questions: [

tests/question_tagbox_tests.ts

@@ -1291,4 +1291,32 @@ QUnit.test("TagBox readOnlyText property should be reactive, Bug#6830", (assert)
   survey.locale = "";
   assert.equal(q.readOnlyText, "en-sel", "Empty en, #3");
   assert.equal(q.dropdownListModel.filterStringPlaceholder, "en-sel", "dropdownlist en, #3");
-});
+});
+QUnit.test("question.showClearButton", assert => {
+  const json = {
+    questions: [
+      {
+        "type": "tagbox",
+        "name": "q1",
+        "optionsCaption": "New optionsCaption",
+        "choices": [
+          "Ford",
+          "Vauxhall",
+          "Volkswagen"
+        ]
+      }]
+  };
+  const survey = new SurveyModel(json);
+  const q = <QuestionTagboxModel>survey.getQuestionByName("q1");
+  assert.equal(q.showClearButton, false, "question is empty");
+  q.value = "Ford";
+  assert.equal(q.showClearButton, true, "question is not empty");
+  q.allowClear = false;
+  assert.equal(q.showClearButton, false, "allowClear is false");
+  q.allowClear = true;
+  survey.setDesignMode(true);
+  assert.equal(q.showClearButton, false, "design mode");
+  settings.supportCreatorV2 = true;
+  assert.equal(q.showClearButton, true, "Creator V2");
+  settings.supportCreatorV2 = false;
+});