PR: Library: New Icons (#8846)

* work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * Revert "work for the surveyjs/private-tasks#386" This reverts commit 6c1da5f. * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386 * work for the surveyjs/private-tasks#386
surveyjs · Nov 4, 2024 · ad3ce7e · ad3ce7e
1 parent e057a58
commit ad3ce7e
Show file tree

Hide file tree

Showing 293 changed files with 1,236 additions and 527 deletions.
diff --git a/examples_test/defaultV2/survey-js-ui.html b/examples_test/defaultV2/survey-js-ui.html
@@ -6,6 +6,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.6.4/showdown.min.js"></script>
     <style >
+      /*imitation of Tailwind CSS, bootstrap and other CSS frameworks (only for survey-js-ui)*/
       *, ::after, ::before {
         box-sizing: border-box;
       }

diff --git a/package.json b/package.json
@@ -14,7 +14,8 @@
     "testcafe:survey-js-ui": "testcafe testCafe/ --app \"http-server --silent\" --env=survey-js-ui --config-file .testcaferc.dev.js",
     "testcafe:survey-js-ui:ci": "testcafe  testCafe/ --app \"http-server --silent\" --reporter minimal --env=survey-js-ui",
     "vrt:jquery-ui:ci": "testcafe ./visualRegressionTests/ --app \"http-server\" --screenshots ./ --selector-timeout 1500 --reporter minimal --env=jquery-ui",
-    "vrt:survey-js-ui:ci": "testcafe  ./visualRegressionTests/ --app \"http-server\" --screenshots ./ --selector-timeout 1500 --reporter minimal --env=survey-js-ui",
+    "vrt:survey-js-ui:ci": "testcafe ./visualRegressionTests/ --app \"http-server\" --screenshots ./ --selector-timeout 1500 --reporter minimal --env=survey-js-ui",
+    "vrt:survey-js-ui": "testcafe ./visualRegressionTests/ --app \"http-server\" --screenshots ./ --selector-timeout 1500 --reporter minimal --env=survey-js-ui --config-file .testcaferc.dev.js",
     "testcafe:react": "testcafe  testCafe/ --app \"http-server --silent\" --reporter minimal --env=react",
     "testcafe:vue": "testcafe  testCafe/  --app \"http-server --silent\" --reporter minimal --env=vue",
     "release": "commit-and-tag-version --message \"Release: %s [azurepipelines skip]\" ",
@@ -88,7 +89,7 @@
     "vrt:ko": "testcafe ./visualRegressionTests/ --app \"http-server\" --screenshots ./ --reporter minimal --env=knockout --selector-timeout 1500 --config-file .testcaferc.dev.js",
     "vrt:react": "testcafe ./visualRegressionTests/ --app \"http-server\" --screenshots ./ --reporter minimal --env=react --selector-timeout 1500 --config-file .testcaferc.dev.js",
     "visual-regression-tests:ci": "testcafe chrome:headless ./visualRegressionTests/ --app \"http-server\" --screenshots ./ --selector-timeout 1500 --reporter minimal",
-    "visual-regression-tests:ci:knockout": "testcafe  ./visualRegressionTests/ --app \"http-server\" --screenshots ./ --selector-timeout 1500 --reporter minimal --env=knockout",
+    "visual-regression-tests:ci:knockout": "testcafe  ./visualRegressionTests/ --app \"http-server\" --screenshots ./ --selector-timeout 1500 --env=knockout --reporter minimal",
     "visual-regression-tests:ci:angular": "testcafe  ./visualRegressionTests/ --app \"http-server ./packages/survey-angular-ui/example/dist --proxy http://localhost:8080? -p 8080\" --screenshots ./ --selector-timeout 1500 --reporter minimal --env=angular",
     "visual-regression-tests:angular": "testcafe ./visualRegressionTests/ --app \"http-server ./packages/survey-angular-ui/example/dist --proxy http://localhost:8080? -p 8080\" --screenshots ./ --selector-timeout 1500 --reporter minimal --env=angular --config-file .testcaferc.dev.js",
     "visual-regression-tests:ci:react": "testcafe  ./visualRegressionTests/ --app \"http-server\" --screenshots ./ --selector-timeout 1500 --reporter minimal --env=react",

diff --git a/packages/survey-angular-ui/angular.json b/packages/survey-angular-ui/angular.json
@@ -75,7 +75,7 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumError": "4mb"
+                  "maximumError": "5mb"
                 },
                 {
                   "type": "anyComponentStyle",

diff --git a/packages/survey-angular-ui/src/components/element-title/element-title.component.html b/packages/survey-angular-ui/src/components/element-title/element-title.component.html
@@ -1,5 +1,7 @@
 <ng-template #template>
   <sv-ng-dynamic-head [tagName]="element.titleTagName" [element]="element" *ngIf="element.hasTitle">
+    <svg *ngIf="!element.isExpanded && element.getCssTitleExpandableSvg()" [iconName]="'icon-expand-16x16'" [partCss]="element.getCssTitleExpandableSvg()" [size]="'16'" sv-ng-svg-icon></svg>
+    <svg *ngIf="element.isExpanded && element.getCssTitleExpandableSvg()" [iconName]="'icon-collapse-16x16'" [partCss]="element.getCssTitleExpandableSvg()" [size]="'16'" sv-ng-svg-icon></svg>
     <sv-ng-element-title-actions [element]="element"></sv-ng-element-title-actions>
   </sv-ng-dynamic-head>
 </ng-template>
diff --git a/packages/survey-core/entries/chunks/model.ts b/packages/survey-core/entries/chunks/model.ts
@@ -287,7 +287,9 @@ export {
   prepareElementForVerticalAnimation,
   cleanHtmlElementAfterAnimation,
   classesToSelector,
-  IAttachKey2clickOptions
+  IAttachKey2clickOptions,
+  renamedIcons,
+  getIconNameFromProxy
 } from "../../src/utils/utils";
 export { InputMaskBase } from "../../src/mask/mask_base";
 export { InputMaskPattern } from "../../src/mask/mask_pattern";

diff --git a/packages/survey-core/src/common-styles/sv-navigation-toc.scss b/packages/survey-core/src/common-styles/sv-navigation-toc.scss
@@ -25,6 +25,10 @@
     padding-top: calcSize(1.5);
     padding-bottom: calcSize(1.5);
   }
+
+  use {
+    fill: $foreground-light;
+  }
 }
 
 .sv_progress-toc--left {

diff --git a/packages/survey-core/src/common-styles/sv-ranking.scss b/packages/survey-core/src/common-styles/sv-ranking.scss
@@ -51,12 +51,15 @@
 .sv-ranking-item__icon-container {
   position: relative;
   left: 0;
-  top: 5px;
   bottom: 0;
   flex-shrink: 0;
   width: calcSize(3);
-  height: calcSize(4);
+  height: calcSize(3);
   align-self: flex-start;
+  padding-left: calcSize(1);
+  padding-right: calcSize(1);
+  margin-left: calcSize(-2);
+  box-sizing: content-box;
 }
 
 .sv-ranking-item--disabled.sv-ranking-item--disabled,
@@ -78,8 +81,8 @@
   fill: $primary;
   position: absolute;
   top: calcSize(1);
-  width: calcSize(1.75);
-  height: calcSize(2);
+  width: calcSize(3);
+  height: calcSize(3);
 }
 
 .sv-ranking-item__index.sv-ranking-item__index {
@@ -254,8 +257,8 @@
 }
 
 .sv-ranking-shortcut .sv-ranking-item__icon {
-  width: calcSize(1.75);
-  height: calcSize(2);
+  width: calcSize(3);
+  height: calcSize(3);
   top: calcSize(1);
 }
 
@@ -265,7 +268,7 @@
   }
 
   .sv-ranking-item__icon-container {
-    margin-left: calcSize(1);
+    margin-left: calcSize(0);
   }
 }
 
@@ -492,4 +495,15 @@
       }
     }
   }
+}
+
+.sd-question--mobile,
+.sd-root-modern.sd-root-modern--mobile {
+  .sv-ranking-item__icon-container {
+    margin-left: calcSize(-2);
+    display: flex;
+    justify-content: flex-end;
+    padding: 0;
+    width: calcSize(5);
+  }
 }
diff --git a/packages/survey-core/src/default-styles.scss b/packages/survey-core/src/default-styles.scss
@@ -72,7 +72,7 @@ $header-background-color: #e7e7e7;
   display: inline-block;
 }
 
-.sv_qstn .sv_q_imgsel > label img {
+.sv_qstn .sv_q_imgsel>label img {
   pointer-events: none;
 }
 
@@ -268,8 +268,8 @@ $header-background-color: #e7e7e7;
   padding: 20px;
 }
 
-.sv_q_file > input[type="file"],
-.sv_q_file > button {
+.sv_q_file>input[type="file"],
+.sv_q_file>button {
   display: inline-block;
 }
 
@@ -281,7 +281,7 @@ $header-background-color: #e7e7e7;
   margin-top: 10px;
 }
 
-.sv_q_file_preview > a {
+.sv_q_file_preview>a {
   display: block;
   overflow: hidden;
   vertical-align: top;
@@ -429,27 +429,31 @@ $header-background-color: #e7e7e7;
   box-sizing: border-box;
   word-break: break-word;
 }
+
 .sv_qstn .sv-q-column-2 {
   max-width: 50%;
   display: inline-block;
   padding-right: 1em;
   box-sizing: border-box;
   word-break: break-word;
 }
+
 .sv_qstn .sv-q-column-3 {
   max-width: 33.33333%;
   display: inline-block;
   padding-right: 1em;
   box-sizing: border-box;
   word-break: break-word;
 }
+
 .sv_qstn .sv-q-column-4 {
   max-width: 25%;
   display: inline-block;
   padding-right: 1em;
   box-sizing: border-box;
   word-break: break-word;
 }
+
 .sv_qstn .sv-q-column-5 {
   max-width: 20%;
   display: inline-block;
@@ -462,7 +466,7 @@ $header-background-color: #e7e7e7;
   color: transparent;
 }
 
-.sv_qstn .sv_q_imgsel label > div {
+.sv_qstn .sv_q_imgsel label>div {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -471,8 +475,8 @@ $header-background-color: #e7e7e7;
   border-radius: 4px;
 }
 
-.sv_qstn .sv_q_imgsel label > div > img,
-.sv_qstn .sv_q_imgsel label > div > embed {
+.sv_qstn .sv_q_imgsel label>div>img,
+.sv_qstn .sv_q_imgsel label>div>embed {
   display: block;
 }
 
@@ -490,7 +494,7 @@ f-panel {
   line-height: 2em;
 }
 
-.sv_progress_bar > span {
+.sv_progress_bar>span {
   white-space: nowrap;
 }
 
@@ -545,11 +549,13 @@ f-panel {
   bottom: 0;
   width: calc(3 * var(--base-unit, 8px));
   flex-shrink: 0;
+  box-sizing: content-box;
+
   svg:nth-of-type(1) {
-      height: 16px;
-      width: 10px;
+    height: 16px;
+    width: 10px;
   }
-  
+
   svg:nth-of-type(2) {
     height: 24px;
     width: 10px;
@@ -575,11 +581,12 @@ f-panel {
   width: 40px;
   height: 40px;
   line-height: 1em;
+
   svg {
-      fill: var(--foreground);
-      width: 16px;
-      height: 16px;
-    }
+    fill: var(--foreground);
+    width: 16px;
+    height: 16px;
+  }
 }
 
 .sv-ranking-item__text {
@@ -660,7 +667,7 @@ f-panel {
   min-width: 10%;
 }
 
-.sv_qstn .sv_q_select_column > *:not(.sv_technical) {
+.sv_qstn .sv_q_select_column>*:not(.sv_technical) {
   display: block;
 }
 
@@ -781,6 +788,7 @@ f-panel {
 .sv_main .sv-boolean__thumb-ghost {
   display: inline-block;
 }
+
 .sv_main .sv-boolean__slider {
   display: inline-block;
   width: 20px;
@@ -800,7 +808,7 @@ f-panel {
   margin-left: calc(50% - 10px);
 }
 
-.sv_main .sv-boolean input:focus ~ .sv-boolean__switch {
+.sv_main .sv-boolean input:focus~.sv-boolean__switch {
   outline-width: 1px;
   outline-style: solid;
   outline-offset: 1px;
@@ -843,11 +851,9 @@ f-panel {
 }
 
 // EO boolean
-.sv_main .sv_q_num {
-}
+.sv_main .sv_q_num {}
 
-.sv_main .sv_q_num + span {
-}
+.sv_main .sv_q_num+span {}
 
 // SignaturePad
 .sv_main .sjs_sp_container {
@@ -861,11 +867,11 @@ f-panel {
   bottom: 0;
 }
 
-.sv_main .sjs_sp_controls > button {
+.sv_main .sjs_sp_controls>button {
   user-select: none;
 }
 
-.sv_main .sjs_sp_container > div > canvas:focus {
+.sv_main .sjs_sp_container>div>canvas:focus {
   outline: none;
 }
 
@@ -883,8 +889,7 @@ f-panel {
 
 // logo
 // .sv_main .sv_header{   white-space: nowrap;}
-.sv_main .sv_logo {
-}
+.sv_main .sv_logo {}
 
 .sv_main .sv-logo--left {
   display: inline-block;
@@ -987,7 +992,7 @@ f-panel {
   align-items: center;
 }
 
-.sv_main .sv-action__content > * {
+.sv_main .sv-action__content>* {
   flex: 0 0 auto;
 }
 
@@ -1100,7 +1105,7 @@ f-panel {
   max-width: 100%;
 }
 
-.sv_main .sv-button-group__item-icon + .sv-button-group__item-caption {
+.sv_main .sv-button-group__item-icon+.sv-button-group__item-caption {
   margin-left: 8px;
 }
 
@@ -1132,9 +1137,11 @@ sv-popup {
   z-index: 1500;
   height: 100vh;
 }
+
 .sv-dropdown-popup {
   height: 0;
 }
+
 .sv-popup.sv-popup-inner {
   height: 0;
 }
@@ -1518,4 +1525,4 @@ sv-popup {
 //eo list
 .sv-skeleton-element {
   min-height: 50px;
-}
+}