Merge remote-tracking branch 'origin/master' into update-panel-number…

…-hints

docs/end-user-guide-general-survey-layout-settings.md

@@ -0,0 +1,125 @@
+---
+title: General Survey Layout Settings - SurveyJS
+description: This step-by-step guide explains how to configure survey layout settings, including card view, collapse state, question title and description alignment, and more.
+---
+
+# Survey Layout Guide
+
+## About Survey Layout
+
+The layout settings in Survey Creator are essential for creating user-friendly and visually balanced surveys. These settings affect how questions are displayed and organized, helping ensure that your survey is easy to follow and interact with. Careful layout choices improve readability, reduce the perceived complexity of the survey, and create a more appealing and professional-looking form.
+
+## How to Display a Single Question per Page (Card View)
+
+The **Show single question per page** option, also known as Card View, helps break down surveys with multiple questions into manageable sections, placing each question on its own page. This option is particularly useful for longer surveys or when you need to focus user attention on one question at a time.
+
+To enable the Card view, follow these steps:
+
+1. In the top right corner of the Property Grid, select **Survey** to switch to the survey-level settings.  
+2. Under **Navigation**, locate the **Survey layout** setting.  
+3. Select the **Show single question per page** option.
+
+<img src="../images/eud-survey-layout 399 435.png" alt="How to display a single question per page (card view)" width="399" height="435">
+
+Other survey layout options include:
+
+* Show all questions on a single page         
+Displays the entire survey on one page. This is best suited for shorter surveys where all questions are easily visible without overwhelming the user with scrolling.  
+
+* Original structure          
+Keeps the survey in its initially designed layout, preserving the original number of pages and the specific placement of questions on each page.
+
+## How to Change the Question Title Location
+
+For forms with multiple questions and shorter titles, adjusting the title location can help make the survey more compact. You can configure the question title settings at four levels: for the entire form, for an individual page, for a specific panel, or for a single question.
+
+To set question title location for all questions within a form, follow these steps:
+
+1. In the top right corner of the Property Grid, select **Survey** to switch to the survey-level settings.  
+2. Under **Question Settings**, locate the **Question title alignment** setting.  
+3. Select between available options:  
+   * **Top** (default) - Question title appears above the input field.  
+   * **Bottom** - Question title appears below the input field.  
+   * **Left** - Question title is displayed to the left of the input field.
+
+<img src="../images/eud-question-title-alignment 399 410.png" alt="How to change the question title location" width="399" height="410">
+
+To customize the question title location for questions within a specific page or panel, select the desired page or panel and follow the same steps in the example above starting from step 2. Selecting the **Inherit** option on step 3 will apply the alignment setting of the parent element, whether it's a nesting panel or the page which the question belongs to.
+
+<img src="../images/eud-question-title-alignment-page 409 509.png" alt="How to set the question title location for all questions within a page or panel" width="409" height="509">
+
+> If you set **Question title alignment** to **Left**, it's recommended to specify a consistent width for question titles on each page or panel to keep the layout tidy. Please refer to the following guide for more information: [How to Vertically Align Input Fields in a Form](https://surveyjs.io/survey-creator/documentation/end-user-guide/how-to-vertically-align-input-fields-in-survey)
+
+You can also choose to place question titles at the **Bottom** of the input field, which can be helpful for focusing attention on choice options or when you want to show validation messages at the bottom.
+
+<img src="../images/eud-question-title-alignment-bottom 1002 372.png" alt="How to bottom-align question titles" width="1002" height="372">
+
+## How to Change the Question Description Location
+
+By default, question descriptions are positioned beneath question titles to provide context or instructions. For this reason, the description alignment setting has only two options:
+
+* Under the question title          
+This option places the description directly beneath the question title, wherever the title is positioned.
+
+* Under the input field       
+This option always places the question description beneath the input field, regardless of the position of the question title.
+
+The **Under the question title** option works well for descriptions of any length when the title is positioned at the top or bottom of the question box. However, for left-aligned titles, long descriptions may take up more space than expected, depending on the title width setting. If a width is specified, the description may require additional vertical space. If no width is set, it may extend horizontally. See the examples below for illustration.
+
+<img src="../images/eud-question-width-set-to-100 1375 298.png" alt="Lengthy question description aligned to the left, with the question title width set to 100px" width="1375" height="298">
+
+<img src="../images/eud-question-width-set 1375 211.png" alt="Long question description aligned to the left, with question title width unset" width="1375" height="211">
+
+To avoid situations like those illustrated above, place descriptions under input fields if you align question titles to the left:
+
+<img src="../images/eud-title-left-description-under-input 1163 252.png" alt="How to always place the question description under the input field regardless of the question title alignment" width="1163" height="252">
+
+To set question description location for all questions within a form, follow these steps:
+
+1. In the top right corner of the Property Grid, select **Survey** to switch to the survey-level settings.  
+2. Under **Question Settings**, locate the **Question description alignment** setting.  
+3. Select between the available options.
+
+<img src="../images/eud-description-survey 402 690.png" alt="How to set question description location for all questions within a form" width="402" height="690">
+
+To customize the question description location for questions within a specific page or panel, select the desired page or panel and follow the same steps in the example above starting from step 2.
+
+If you wish to set a question description location for an individual question, follow these steps:
+
+1. Select the question to modify on the design surface or from the survey tree using the question name (ID).  
+2. Under **Layout**, locate the **Question description alignment** property.  
+3. Select from the available options. Selecting **Inherit** will apply the alignment setting of the parent element, whether it's a nesting panel or the page which the question belongs to.
+
+<img src="../images/eud-question-description-question 400 723.png" alt="How to set question description location for a specific form question" width="400" height="723">
+
+## How to Collapse/Expand Panels
+
+A panel (or a section) is a form element that allows you to group several questions together and modify their settings all at once. Collapsed panels can help improve navigation and reduce clutter, especially in surveys with multiple sections.
+
+<video src="../images/eud-collapse-state-video.mp4" autoplay muted playsinline loop style="width: 100%"></video>
+
+To set a collapse state for a panel, do the following:
+
+1. Select the panel you'd like to modify.  
+2. Under **Panel layout**, find the **Panel collapse state** setting.  
+3. Select from the following options:  
+   * **Expanded** - Panel is fully displayed but can be collapsed.  
+   * **Collapsed** - Panel shows only the title and description initially and can be expanded.  
+   * **Locked** - Panel is fully displayed and cannot be collapsed.
+
+<img src="../images/eud-panel-collapse-state 401 412.png" alt="How to set a panel collapse state" width="401" height="412">
+
+## How to Collapse/Expand Question Boxes
+
+A question box is the area that includes the question title, input field, description, validation errors, and more. Collapsed question boxes can be useful for forms with long or complex questions, as they allow users to expand and focus on each question individually.
+
+To set a collapse state for a question box, follow these steps:
+
+1. Select the question you want to modify.  
+2. Under **Layout**, locate the **Question box collapse state** setting.  
+3. Select from the following options:  
+   * **Expanded** - Question box is fully displayed but can be collapsed.  
+   * **Collapsed** - Question box displays only the title and description initially and can be expanded.  
+   * **Locked** - Question box is fully displayed and cannot be collapsed.
+
+<img src="../images/eud-question-collapse-state 400 548.png" alt="How to set a question collapse state" width="400" height="548">

docs/end-user-guide-numbering-within-form.md

@@ -0,0 +1,84 @@
+---
+title: How to Add/Remove Numbering within a Form
+description: This step-by-step guide shows how to configure numbering of your survey elements, such as pages, panels, and questions.
+---
+
+# Numbering within a Form
+
+## About Numbering within a Form
+
+Numbering refers to the sequential labeling of elements within your survey or form, such as pages, panels, and questions. Clear numbering within a form can improve clarity and navigation, help users keep track of their progress, and enhance the overall organization of the survey. However, there are situations when removing numbers can create a cleaner, less cluttered appearance. This guide will provide you with detailed instructions on how to manage numbering in your survey effectively, ensuring you achieve your specific needs.
+
+## How to Remove Question Numbering
+
+### For All Questions
+
+By default, each new question added to your form is assigned a number. If you prefer not to number any questions throughout the form, you can easily disable this feature:
+
+1. Switch to the survey-level settings in the form tree.  
+2. Under **Question settings**, locate the **Question numbering** setting.  
+3. Select the **No numbering** option from the drop-down menu.
+
+<img src="../images/eud-question-numbering-survey 401 674.png" alt='How to remove question numbering for all questions within a form or survey' width="401" height="674">
+
+### For an Individual Question
+
+If you want to keep question numbering for most questions but remove it from specific ones, follow these steps:
+
+1. Select the question for which you want to remove the number.  
+2. Under **Layout**, locate the **Hide the question number** setting.  
+3. Check the box to remove the question number.
+
+<img src="../images/eud-hide-question-number 400 347.png" alt='How to remove question numbers for an individual question within a form or survey' width="400" height="347">
+
+## How to Restart Question Numbering on Each Page
+
+If you would like the question numbering to reset at the beginning of each page, you can do so by following these steps:
+
+1. Switch to the survey-level settings.  
+2. Under **Question settings**, locate the **Question numbering** setting.  
+3. Select the **Reset on each page** option from the drop-down menu.
+
+<img src="../images/eud-reset-on-each-page 401 674.png" alt='How to reset question numbering on each page' width="401" height="674">
+
+## How to Number Survey Pages
+
+Page numbers in your survey or form are hidden by default. To display them, follow these steps:
+
+1. Switch to the survey-level settings.  
+2. Under **Pages**, locate the **Show page numbers** setting.  
+3. Check the box to enable page numbering.
+
+<img src="../images/eud-show-page-numbers 401 541.png" alt='How to number survey pages' width="401" height="541">
+
+## How to Number Panels
+
+Panel numbering can be enabled for each individual panel, but only if the question numbering setting at the survey level is set to either **Auto-numbering** or **Reset on each page**. If the **No numbering** option is selected, panel numbering will not be applicable. To number a panel, follow these steps:
+
+1. Select the panel you want to number using the survey tree or by clicking it on the design surface.  
+2. Under **Numbering**, locate the **Number panels** setting.
+3. Check the box to number the selected panel.
+
+<img src="../images/eud-panel-numbering 408 513.png" alt='How to number panels' width="408" height="513">
+
+## Question Numbering within a Panel
+
+You can manage question numbering within an individual panel. For instance, you can number the panel itself but remove the numbering from the questions inside as follows:
+
+1. Select the panel whose numbering you want to adjust.
+2. Under **Numbering**, locate the **Question numbering** setting. 
+3. Select the **No numbering** option from the drop-down menu.
+
+<img src="../images/eud-no-question-numbering-within-a-panel 412 321.png" alt='How to remove numbers from questions nested within a panel' width="412" height="321">
+
+The result will look as follows:
+
+<img src="../images/eud-no-question-numbering-within-a-panel-preview 931 605.png" alt='Preview: A panel of questions without numbering' width="931" height="605">
+
+Alternatively, if you wish to restart question numbering within each panel, use the **Reset on each panel** option. 
+
+<img src="../images/eud-reset-on-each-panel 1122 852.png" alt='Preview: Panels of questions with numbering reset on each' width="1122" height="852">
+
+For continuous numbering of each element, select the **Auto-numbering** option.
+
+<img src="../images/eud-auto-numbering-within-a-panel 935 604.png" alt='Preview: A panel of questions with continuous numbering' width="935" height="604">

docs/sidebar.json

@@ -68,10 +68,6 @@
         }
       ]
     },
-    {
-      "Name": "Troubleshooting",
-      "Title": "Troubleshooting"
-    },
     {
       "Name": "End-User-Guide",
       "Title": "End-User Documentation",
@@ -80,6 +76,10 @@
           "Name": "end-user-guide-user-interface",
           "Title": "UI Overview"
         },
+        {
+          "Name": "end-user-guide-general-survey-layout-settings",
+          "Title": "Survey Layout"
+        },
         {
           "Name": "end-user-guide-skip-logic-in-forms",
           "Title": "Skip Logic"
@@ -92,6 +92,10 @@
           "Name": "end-user-guide-branching-logic",
           "Title": "Branching Logic"
         },
+        {
+          "Name": "end-user-guide-numbering-within-form",
+          "Title": "Numbering"
+        },
         {
           "Name": "end-user-guide-survey-theming",
           "Title": "Survey Theming"

functionalTests/designer/question-wrapper.ts

@@ -163,13 +163,13 @@ test("Single input question wrapper action change require", async (t) => {
   let title = await questionTitle.innerText;
   await t
     .expect(normalize(title)).eql("1. question1")
-    .expect(requiredActionButton.hasClass("svc-required-action--active")).notOk()
+    .expect(requiredActionButton.hasClass("sv-action-bar-item--active")).notOk()
 
     .click(requiredActionButton);
   title = await questionTitle.innerText;
   await t
     .expect(normalize(title)).eql("1. question1 *")
-    .expect(requiredActionButton.hasClass("svc-required-action--active")).ok();
+    .expect(requiredActionButton.hasClass("sv-action-bar-item--active")).ok();
 });
 
 test("Single input question wrapper action delete", async (t) => {
@@ -243,9 +243,9 @@ test("Rating question required property", async (t) => {
     .hover(getToolboxItemByText("Rating Scale"))
     .click(getToolboxItemByText("Rating Scale"))
     .expect(isrequiredButton.visible).ok()
-    .expect(isrequiredButton.find(".svc-required-action").classNames).notContains("svc-required-action--active")
+    .expect(isrequiredButton.find(".svc-required-action").classNames).notContains("sv-action-bar-item--active")
     .click(isrequiredButton)
-    .expect(isrequiredButton.find(".svc-required-action").classNames).contains("svc-required-action--active");
+    .expect(isrequiredButton.find(".svc-required-action").classNames).contains("sv-action-bar-item--active");
 });
 
 fixture`${title}`.page`${urlDropdownCollapseView}`.beforeEach(async (t) => {

packages/survey-creator-angular/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 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.12.8](https://github.com/surveyjs/survey-creator/compare/v1.12.7...v1.12.8) (2024-10-31)
+
 ### [1.12.7](https://github.com/surveyjs/survey-creator/compare/v1.12.6...v1.12.7) (2024-10-23)
 
 ### [1.12.6](https://github.com/surveyjs/survey-creator/compare/v1.12.5...v1.12.6) (2024-10-15)

packages/survey-creator-angular/angular.json

@@ -71,15 +71,19 @@
               "./example/angular-ui/src/assets",
               "./example/angular-ui/src/testCafe"
             ],
+            "styles": [
+              "./node_modules/survey-core/defaultV2.css",
+              "./node_modules/survey-creator-core/survey-creator-core.css"
+            ],
             "scripts": []
           },
           "configurations": {
             "production": {
               "buildOptimizer": true,
               "budgets": [
                 {
-                  "type": "initial",
-                  "maximumWarning": "500kb",
+                  "type": "allScript",
+                  "maximumWarning": "10mb",
                   "maximumError": "10mb"
                 },
                 {
@@ -129,4 +133,4 @@
     }
   },
   "defaultProject": "survey-creator-angular"
-}
+}

packages/survey-creator-angular/example/angular-ui/src/app/app.component.scss

@@ -1,3 +1 @@
-@import "survey-core/defaultV2.css";
-@import "survey-creator-core/survey-creator-core.css";
 app-root { position: fixed; top: 0; bottom: 0; right: 0; left: 0;}

packages/survey-creator-angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-creator-angular",
-  "version": "1.12.7",
+  "version": "1.12.8",
   "description": "Use SurveyJS Creator to create or edit JSON for SurveyJS Form Library.",
   "homepage": "https://surveyjs.io/Overview/Survey-Creator",
   "license": "https://surveyjs.io/Licenses#SurveyCreator",
@@ -67,7 +67,7 @@
     "survey-core": "../../../survey-library/build/survey-core",
     "survey-creator-core": "../survey-creator-core/build",
     "standard-version": "^8.0.2",
-    "puppeteer": "23.5.3"
+    "puppeteer": "22.13.1"
   },
   "scripts": {
     "build": "ng build && node ./update-version.js",
@@ -82,4 +82,4 @@
     "test:single": "ng test --watch=false --browsers=ChromeHeadless survey-creator-angular",
     "release": "standard-version --message \"Release: %s [azurepipelines skip]\" "
   }
-}
+}

packages/survey-creator-core/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 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.12.8](https://github.com/surveyjs/survey-creator/compare/v1.12.7...v1.12.8) (2024-10-31)
+
 ### [1.12.7](https://github.com/surveyjs/survey-creator/compare/v1.12.6...v1.12.7) (2024-10-23)
 
 ### [1.12.6](https://github.com/surveyjs/survey-creator/compare/v1.12.5...v1.12.6) (2024-10-15)

packages/survey-creator-core/creator-themes-import.js

@@ -125,7 +125,9 @@ Object.keys(themeNameMap).forEach(themeName => {
     const distinctions = themeConstants[themeNameMap[themeName]] || {};
     Object.keys(curThemeCssVariables || {}).forEach(variableKey => {
       const variableValue = curThemeCssVariables[variableKey];
-      if(variableValue !== baseThemeCssVariable[variableKey] || usedCssVariablesList.indexOf(variableKey) !== -1) {
+      if(variableKey.indexOf("--ctr-shadow-") > -1 || variableKey.indexOf("--lbr-shadow-") > -1 || variableKey.indexOf("-unit") > -1) {
+        distinctions[variableKey] = variableValue;
+      } else if(variableValue !== baseThemeCssVariable[variableKey] || usedCssVariablesList.indexOf(variableKey) !== -1) {
         distinctions[variableKey] = getCorrectValue(variableKey, variableValue);
       }
     });

packages/survey-creator-core/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.12.7",
+  "version": "1.12.8",
   "name": "survey-creator-core",
   "homepage": "https://surveyjs.io/Overview/Survey-Creator",
   "license": "SEE LICENSE IN LICENSE",