diff --git a/CHANGELOG.md b/CHANGELOG.md index 3101a14d92..81e922942a 100644 --- 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.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) diff --git a/package.json b/package.json index 55bd7b9130..f992e02544 100644 --- a/package.json +++ b/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": { diff --git a/packages/survey-angular-ui/CHANGELOG.md b/packages/survey-angular-ui/CHANGELOG.md index 8240abcc97..08bcd1cbe4 100644 --- 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.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) diff --git a/packages/survey-angular-ui/package.json b/packages/survey-angular-ui/package.json index 45e1558e53..64155476f4 100644 --- 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.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", diff --git a/packages/survey-angular-ui/src/components/cover/cover.component.html b/packages/survey-angular-ui/src/components/cover/cover.component.html index da7a3d378b..8e6fcf3e50 100644 --- a/packages/survey-angular-ui/src/components/cover/cover.component.html +++ b/packages/survey-angular-ui/src/components/cover/cover.component.html @@ -1,7 +1,7 @@
-
+
diff --git a/packages/survey-angular-ui/src/components/dropdown/dropdown.component.html b/packages/survey-angular-ui/src/components/dropdown/dropdown.component.html index c811c5d9b4..1b19e677eb 100644 --- a/packages/survey-angular-ui/src/components/dropdown/dropdown.component.html +++ b/packages/survey-angular-ui/src/components/dropdown/dropdown.component.html @@ -32,7 +32,7 @@ (change)="inputChange($event)" (blur)="blur($event)" (focus)="focus($event)"/>
+ [class]="model.cssClasses.cleanButton" (click)="clear($event)" [visible]="model.showClearButton">
+ (click)="clear($event)" [visible]="model.showClearButton">
-
+
{ - if (options.name == "widthMode") { + if (options.name == "widthMode" || options.name == "width") { this.updateContentClasses(); } }); diff --git a/src/defaultV2-theme/blocks/cover.scss b/src/defaultV2-theme/blocks/cover.scss index 8947e9765a..694c82482a 100644 --- a/src/defaultV2-theme/blocks/cover.scss +++ b/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; } diff --git a/src/knockout/components/cover/cover.html b/src/knockout/components/cover/cover.html index bad310b510..01b73a2c21 100644 --- a/src/knockout/components/cover/cover.html +++ b/src/knockout/components/cover/cover.html @@ -3,7 +3,7 @@
-
+
diff --git a/src/knockout/components/dropdown/dropdown.html b/src/knockout/components/dropdown/dropdown.html index 8293c0efcd..f337d24d73 100644 --- a/src/knockout/components/dropdown/dropdown.html +++ b/src/knockout/components/dropdown/dropdown.html @@ -54,7 +54,7 @@ event: { blur: blur, focus: focus }">
-
+
diff --git a/src/knockout/components/tagbox/tagbox.html b/src/knockout/components/tagbox/tagbox.html index 05a916c0f2..49f047a5dc 100644 --- a/src/knockout/components/tagbox/tagbox.html +++ b/src/knockout/components/tagbox/tagbox.html @@ -53,7 +53,7 @@
-
+
diff --git a/src/page.ts b/src/page.ts index 25f7136eda..f41e850378 100644 --- a/src/page.ts +++ b/src/page.ts @@ -47,7 +47,7 @@ export class PageModel extends PanelModelBase implements IPage { return this.survey && (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"); } diff --git a/src/question_dropdown.ts b/src/question_dropdown.ts index 55fc95f8b1..f5c511efa2 100644 --- a/src/question_dropdown.ts +++ b/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; } diff --git a/src/question_tagbox.ts b/src/question_tagbox.ts index 92f7dbd739..9553742654 100644 --- a/src/question_tagbox.ts +++ b/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; diff --git a/src/react/components/cover.tsx b/src/react/components/cover.tsx index c2607ed4f2..756e1e5010 100644 --- a/src/react/components/cover.tsx +++ b/src/react/components/cover.tsx @@ -65,7 +65,7 @@ export class CoverComponent extends SurveyElementBase return (
{this.model.backgroundImage ?
: null} -
+
{this.model.cells.map((cell, index) => )}
diff --git a/src/react/dropdown-base.tsx b/src/react/dropdown-base.tsx index ea5df58a01..26a03f2ebe 100644 --- a/src/react/dropdown-base.tsx +++ b/src/react/dropdown-base.tsx @@ -138,7 +138,7 @@ export class SurveyQuestionDropdownBase 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 (
-
+
{ + const json = { + questions: [ + { + "type": "dropdown", + "name": "q1", + "optionsCaption": "New optionsCaption", + "choices": [ + "Ford", + "Vauxhall", + "Volkswagen" + ] + }] + }; + const survey = new SurveyModel(json); + const q = 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: [ diff --git a/tests/question_tagbox_tests.ts b/tests/question_tagbox_tests.ts index e4efa0cbe3..346f19bf51 100644 --- a/tests/question_tagbox_tests.ts +++ b/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"); -}); \ No newline at end of file +}); +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 = 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; +}); diff --git a/visualRegressionTests/tests/defaultV2/advancedHeader.ts b/visualRegressionTests/tests/defaultV2/advancedHeader.ts new file mode 100644 index 0000000000..3861852206 --- /dev/null +++ b/visualRegressionTests/tests/defaultV2/advancedHeader.ts @@ -0,0 +1,81 @@ +import { Selector, ClientFunction } from "testcafe"; +import { url, frameworks, initSurvey, url_test, takeElementScreenshot, wrapVisualTest } from "../../helper"; + +const title = "Advanced header screenshot"; + +fixture`${title}`.page`${url}`; + +const applyTheme = ClientFunction(theme => { + (window).Survey.StylesManager.applyTheme(theme); +}); + +const theme = "defaultV2"; + +frameworks.forEach(framework => { + fixture`${framework} ${title} ${theme}` + .page`${url_test}${theme}/${framework}` + .beforeEach(async t => { + await applyTheme(theme); + }); + + test("Check survey advanced header inherit width from survey", async (t) => { + await wrapVisualTest(t, async (t, comparer) => { + await t.resizeWindow(1200, 1000); + await initSurvey(framework, { + title: "Survey Title", + description: "Survey description", + logo: "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg", + "widthMode": "static", + "width": "600", + headerView: "advanced", + questions: [ + { + type: "text", + title: "Question title", + name: "q1" + } + ] + }); + await ClientFunction(() => { + (window).survey.applyTheme({ + "header": { + height: "500px", + } + }); + })(); + await takeElementScreenshot("survey-advanced-header-width-by-survey.png", Selector(".sd-root-modern"), t, comparer); + }); + }); + test("Check survey advanced header with overlap", async (t) => { + await wrapVisualTest(t, async (t, comparer) => { + await t.resizeWindow(1200, 1000); + await initSurvey(framework, { + title: "Survey Title", + description: "Survey description", + logo: "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg", + "widthMode": "static", + "width": "600", + headerView: "advanced", + questions: [ + { + type: "text", + title: "Question title", + name: "q1" + } + ] + }); + await ClientFunction(() => { + (window).survey.applyTheme({ + "header": { + height: "500px", + "overlapEnabled": true, + }, + "cssVariables": { + "--sjs-cover-backcolor": "rgba(25, 179, 148, 1)" + } + }); + })(); + await takeElementScreenshot("survey-advanced-header-with-overlap.png", Selector(".sd-root-modern"), t, comparer); + }); + }); +}); \ No newline at end of file diff --git a/visualRegressionTests/tests/defaultV2/etalons/survey-advanced-header-width-by-survey.png b/visualRegressionTests/tests/defaultV2/etalons/survey-advanced-header-width-by-survey.png new file mode 100644 index 0000000000..ada90c7daf Binary files /dev/null and b/visualRegressionTests/tests/defaultV2/etalons/survey-advanced-header-width-by-survey.png differ diff --git a/visualRegressionTests/tests/defaultV2/etalons/survey-advanced-header-with-overlap.png b/visualRegressionTests/tests/defaultV2/etalons/survey-advanced-header-with-overlap.png new file mode 100644 index 0000000000..a44293a5b9 Binary files /dev/null and b/visualRegressionTests/tests/defaultV2/etalons/survey-advanced-header-with-overlap.png differ