Merge branch 'master' into theme-remarks2

packages/survey-angular-ui/src/questions/matrixcell.component.html

@@ -1,6 +1,6 @@
 <ng-template #template>
   <td [class]="cell.className" [attr.data-responsive-title]="getHeaders()" [title]="cell.getTitle()"
-    [style]="getCellStyle()" [attr.colspan]="cell.colSpans" #cellContainer>
+    [style]="getCellStyle()" [attr.colspan]="cell.colSpans" (focusin)="cell.focusIn()" #cellContainer>
     <sv-ng-matrix-drag-drop-icon *ngIf="cell.isDragHandlerCell"
       [model]="$any({ data: { row: row, question: question } })"></sv-ng-matrix-drag-drop-icon>
     <sv-action-bar *ngIf="cell.isActionsCell" [model]="cell.item.getData()" [handleClick]="false"></sv-action-bar>

packages/survey-angular-ui/src/questions/mutlipletextitem.component.html

@@ -9,7 +9,7 @@
       >{{ model.editor.requiredText }}</span
     >
   </span>
-  <div [class]="question.getItemCss()">
+  <div [class]="question.getItemCss()" (focusin)="model.focusIn()">
     <div *ngIf="model.editor.showErrorOnTop && model.editor.hasVisibleErrors" [element]="model.editor" sv-ng-errors></div>
     <sv-ng-text-question [model]="model.editor"></sv-ng-text-question>
     <div *ngIf="model.editor.showErrorOnBottom && model.editor.hasVisibleErrors" [element]="model.editor" sv-ng-errors></div>

packages/survey-vue3-ui/src/MatrixCell.vue

@@ -5,6 +5,7 @@
     :title="cell.getTitle()"
     :style="(getCellStyle() as StyleValue)"
     :colspan="cell.colSpans"
+    v-on:focusin="cell.focusIn()"
     ref="root"
   >
     <survey-errors v-if="cell.isErrorsCell" :element="cell.question" />

packages/survey-vue3-ui/src/MultipletextItem.vue

@@ -16,7 +16,11 @@
         >{{ item.editor.requiredText }}</span
       >
     </span>
-    <div :key="item.editor.id" :class="question.getItemCss()">
+    <div
+      :key="item.editor.id"
+      :class="question.getItemCss()"
+      v-on:focusin="item.focusIn()"
+    >
       <survey-errors
         v-if="item.editor.showErrorOnTop"
         :element="item.editor"

src/actions/action.ts

@@ -117,7 +117,7 @@ export interface IAction {
    * The action item's icon size in pixels.
    * @see iconName
    */
-  iconSize?: number;
+  iconSize?: number | string;
   /**
    * The action item's location in a matrix question's row.
    *

src/base-interfaces.ts

@@ -220,7 +220,7 @@ export interface ISurvey extends ITextProcessor, ISurveyErrorOwner {
     element: ISurveyElement,
     question: IQuestion,
     page: IPage,
-    id: string
+    id: string, scrollIfVisible?: boolean
   ): any;
   runExpression(expression: string): any;
   elementContentVisibilityChanged(element: ISurveyElement): void;

src/common-styles/sv-ranking.scss

@@ -86,6 +86,7 @@
     background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAArSURBVHgB7cuhEQAwDMNAtUN4//m8RMtygcE5PxMQxAKnh6Q3mWzXd4mAD4cJBAQCqfbUAAAAAElFTkSuQmCC");
     background-position: center;
     background-repeat: no-repeat;
+    background-size: multiply(1, $font-editorfont-size);
   }
 }
 

src/defaultV2-theme/blocks/sd-context-btn.scss

@@ -6,8 +6,8 @@
   outline: none;
   svg {
     display: block;
-    width: calcSize(3);
-    height: calcSize(3);
+    width: multiply(1.5, $font-editorfont-size);
+    height: multiply(1.5, $font-editorfont-size);
   }
   use {
     fill: $foreground-light;

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

@@ -102,15 +102,15 @@
 
 .sd-file__clean-btn {
   z-index: 2;
-  right: calcSize(1);
+  inset-inline-end: calcSize(1);
 
   span:first-child {
     display: none;
   }
 }
 
 .sd-file__choose-btn--icon {
-  right: calcSize(8);
+  inset-inline-end: calc(multiply(1.5, $font-editorfont-size) + calcSize(5));
 }
 
 .sd-file__list {

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

@@ -44,8 +44,6 @@
   position: absolute;
   top: calcSize(1);
   right: calcSize(1);
-  width: calcSize(6);
-  height: calcSize(6);
   padding: calcSize(1.5);
   box-sizing: border-box;
   border-radius: 100%;
@@ -54,8 +52,9 @@
 }
 
 .sd-imagepicker__check-icon {
-  width: calcSize(3);
-  height: calcSize(3);
+  display: block;
+  width: multiply(1.5, $font-editorfont-size);
+  height: multiply(1.5, $font-editorfont-size);
   fill: $primary;
 }
 

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

@@ -17,6 +17,11 @@
   opacity: 0.5;
 }
 
+.sd-action.sd-matrixdynamic__remove-btn .sd-action__icon {
+  width: multiply(1.5, $font-editorfont-size);
+  height: multiply(1.5, $font-editorfont-size);
+}
+
 .sd-matrixdynamic__btn {
   appearance: none;
   background: transparent;

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

@@ -357,4 +357,5 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley {
 
 .sd-rating__item--selected .sd-rating__item-text.sd-rating__item-text {
   color: $primary-foreground;
+  font-weight: inherit;
 }

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

@@ -32,7 +32,7 @@
 }
 
 .sd-table--no-header {
-  padding-top: calcSize(3)
+  padding-top: calcSize(3);
 }
 
 .sd-table--alternate-rows {
@@ -204,13 +204,12 @@
   border: none;
   background: transparent;
   border-radius: calcSize(2);
-  width: calcSize(4);
-  height: calcSize(4);
   padding: calcSize(1);
 
   svg {
-    width: calcSize(2);
-    height: calcSize(2);
+    display: block;
+    width: multiply(1, $font-editorfont-size);
+    height: multiply(1, $font-editorfont-size);
     fill: $foreground-light;
   }
 

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

@@ -13,8 +13,8 @@
 }
 
 .sd-tagbox_clean-button {
-  height: calcSize(3);
-  padding: calcSize(1);
+  height: multiply(1.5, $font-editorfont-size);
+  padding: multiply(0.5, $font-editorfont-size);
   margin: auto 0;
 }
 
@@ -58,9 +58,9 @@
 
 .sd-tagbox-item_clean-button-svg {
   display: block;
-  padding: calcSize(0.5);
-  width: calcSize(2);
-  height: calcSize(2);
+  padding: multiply(0.25, $font-editorfont-size);
+  width: multiply(1, $font-editorfont-size);
+  height: multiply(1, $font-editorfont-size);
 }
 
 .sd-tagbox-item_clean-button-svg:hover {

src/knockout/components/matrix-actions/detail-button/detail-button.html

@@ -2,10 +2,8 @@
 type="button"
 data-bind="css:question.getDetailPanelButtonCss(row), click:row.showHideDetailPanelClick, attr:{ 'aria-expanded': question.getIsDetailPanelShowing($data.row) ? 'true': 'false', 'aria-controls': question.getIsDetailPanelShowing($data.row) ? row.detailPanelId: false}"
 >
-<span
-  data-bind="css: question.getDetailPanelIconCss(row), component: { name: 'sv-svg-icon', params: {iconName: question.getDetailPanelIconId(row)} }"
->
-</span>
+<!-- ko component: { name: 'sv-svg-icon', params: { css: question.getDetailPanelIconCss(row), iconName: question.getDetailPanelIconId(row), size: 'auto' } } -->
+<!-- /ko -->
 </button>
 <!-- ko if: question.detailPanelMode === "popup" && question.getKoPopupIsVisible(row) -->
 <sv-popup

src/knockout/templates/question-matrixdynamic.html

@@ -46,7 +46,7 @@
 </script>
 <script type="text/html" id="survey-matrixcell">
   <td
-    data-bind="css: $data.className, style: { minWidth: $data.minWidth, width: $data.width }, attr: { 'data-responsive-title': headers, title: $data.getTitle(), colspan: $data.colSpans }"
+    data-bind="css: $data.className, style: { minWidth: $data.minWidth, width: $data.width }, attr: { 'data-responsive-title': headers, title: $data.getTitle(), colspan: $data.colSpans }, event: {focusin: $data.focusIn }"
   >
     <div data-bind="visible: question.isVisible, css: $parentContext.question.cssClasses.cellQuestionWrapper">
       <!-- ko if: $data.isOtherChoice -->

src/knockout/templates/question-multipletext.html

@@ -7,7 +7,7 @@
               <span data-bind="css: question.koItemTitleCss">
                 <!-- ko component: { name: 'survey-element-title-content', params: {element: item.editor} } --><!-- /ko -->
               </span>
-              <div data-bind="css: question.koItemCss">
+              <div data-bind="css: question.koItemCss, event: {focusin: item.focusIn }">
                 <!-- ko if: item.editor.showErrorOnTop -->
                   <!-- ko template: { name: 'survey-question-errors', data: item.editor } -->
                   <!-- /ko -->

src/knockout/templates/questioncontent.html

@@ -1,5 +1,5 @@
 <script type="text/html" id="survey-question-content">
-<div data-bind="visible: !question.isCollapsed, css: question.cssContent" role="presentation">
+<div data-bind="visible: !question.isCollapsed, css: question.cssContent, event: {focusin: question.focusIn }" role="presentation">
     <!-- ko if: question.showErrorOnTop -->
       <!-- ko template: { name: 'survey-question-errors', data: question } -->
       <!-- /ko -->

src/knockout/templates/row.html

@@ -6,7 +6,7 @@
 </script>
 <script type="text/html" id="survey-row-content">
 <!-- ko foreach: { data: row.visibleElements, as: 'question', afterRender: row.koAfterRender } -->
-  <div data-bind="css: question.cssClasses.questionWrapper, style: $data.rootStyle, event: {focusin: question.focusIn }">
+  <div data-bind="css: question.cssClasses.questionWrapper, style: $data.rootStyle">
   <!-- ko if: row.isNeedRender -->
     <!-- ko component: { name: row.panel.survey.getElementWrapperComponentName(question), params: { componentData:  row.panel.survey.getElementWrapperComponentData(question), templateData: { name: question.koElementType, data: question, afterRender: $parent.koElementAfterRender } } } -->
     <!-- /ko -->

src/question.ts

@@ -721,6 +721,7 @@ export class Question extends SurveyElement<Question>
   public get isCompositeQuestion(): boolean {
     return false;
   }
+  public get isContainer(): boolean { return false; }
   protected updateCommentElements(): void {
     if(!this.autoGrowComment || !Array.isArray(this.commentElements)) return;
     for(let i = 0; i < this.commentElements.length; i ++) {
@@ -1012,20 +1013,20 @@ export class Question extends SurveyElement<Question>
    * Moves focus to the input field of this question.
    * @param onError Pass `true` if you want to focus an input field with the first validation error. Default value: `false` (focuses the first input field). Applies to question types with multiple input fields.
    */
-  public focus(onError: boolean = false): void {
+  public focus(onError: boolean = false, scrollIfVisible?: boolean): void {
     if (this.isDesignMode || !this.isVisible || !this.survey) return;
     let page = this.page;
     const shouldChangePage = !!page && this.survey.activePage !== page;
     if(shouldChangePage) {
       this.survey.focusQuestionByInstance(this, onError);
     } else {
-      this.focuscore(onError);
+      this.focuscore(onError, scrollIfVisible);
     }
   }
-  private focuscore(onError: boolean = false): void {
+  private focuscore(onError: boolean = false, scrollIfVisible?: boolean): void {
     if (!!this.survey) {
       this.expandAllParents(this);
-      this.survey.scrollElementToTop(this, this, null, this.id);
+      this.survey.scrollElementToTop(this, this, null, this.id, scrollIfVisible);
     }
     var id = !onError
       ? this.getFirstInputElementId()
@@ -1043,7 +1044,7 @@ export class Question extends SurveyElement<Question>
     this.expandAllParents((<any>element).parentQuestion);
   }
   public focusIn(): void {
-    if(!this.survey) return;
+    if(!this.survey || this.isDisposed || this.isContainer) return;
     (this.survey as SurveyModel).whenQuestionFocusIn(this);
   }
   protected fireCallback(callback: () => void): void {

src/question_custom.ts

@@ -849,6 +849,8 @@ export class QuestionCompositeModel extends QuestionCustomModelBase {
       questions[i].onAnyValueChanged(name);
     }
   }
+  public get hasSingleInput(): boolean { return false; }
+  public get isContainer(): boolean { return true; }
   protected createPanel(): PanelModel {
     var res = <PanelModel>Serializer.createClass("panel");
     res.showQuestionNumbers = "off";

src/question_matrixdropdownbase.ts

@@ -878,9 +878,8 @@ export class QuestionMatrixDropdownModelBase extends QuestionMatrixBaseModel<Mat
     super.dispose();
     this.clearGeneratedRows();
   }
-  public get hasSingleInput(): boolean {
-    return false;
-  }
+  public get hasSingleInput(): boolean { return false; }
+  public get isContainer(): boolean { return true; }
   public get isRowsDynamic(): boolean {
     return false;
   }

src/question_matrixdropdownrendered.ts

@@ -129,6 +129,11 @@ export class QuestionMatrixDropdownRenderedCell {
       .append(matrixCssClasses.choiceCell, this.isChoice)
       .toString();
   }
+  public focusIn(): void {
+    if(this.question) {
+      this.question.focusIn();
+    }
+  }
 }
 
 export class QuestionMatrixDropdownRenderedRow extends Base {
@@ -603,6 +608,7 @@ export class QuestionMatrixDropdownRenderedTable extends Base {
           new Action({
             id: "remove-row",
             iconName: "icon-delete",
+            iconSize: "auto",
             component: "sv-action-bar-item",
             innerCss: new CssClassBuilder().append(this.matrix.cssClasses.button).append(this.matrix.cssClasses.buttonRemove).toString(),
             location: "end",

src/question_multipletext.ts

@@ -111,6 +111,9 @@ export class MultipleTextItemModel extends Base
       this.editor.setParentQuestion(<any>data);
     }
   }
+  public focusIn(): void {
+    this.editor.focusIn();
+  }
   /**
    * Set this property to true, to make the item a required. If a user doesn't fill the item then a validation error will be generated.
    */
@@ -332,9 +335,8 @@ export class QuestionMultipleTextModel extends Question
   public get isAllowTitleLeft(): boolean {
     return false;
   }
-  public get hasSingleInput(): boolean {
-    return false;
-  }
+  public get hasSingleInput(): boolean { return false; }
+  public get isContainer(): boolean { return true; }
   public get id() {
     return this.getPropertyValue("id");
   }

src/question_paneldynamic.ts

@@ -285,9 +285,9 @@ export class QuestionPanelDynamicModel extends Question
     });
     this.registerPropertyChangedHandlers(["allowAddPanel"], () => { this.updateNoEntriesTextDefaultLoc(); });
   }
-  public get hasSingleInput(): boolean {
-    return false;
-  }
+  public get isCompositeQuestion(): boolean { return true; }
+  public get hasSingleInput(): boolean { return false; }
+  public get isContainer(): boolean { return true; }
   public getFirstQuestionToFocus(withError: boolean): Question {
     for (var i = 0; i < this.visiblePanels.length; i++) {
       const res = this.visiblePanels[i].getFirstQuestionToFocus(withError);
@@ -339,10 +339,7 @@ export class QuestionPanelDynamicModel extends Question
   public getType(): string {
     return "paneldynamic";
   }
-  public get isCompositeQuestion(): boolean {
-    return true;
-  }
-  public clearOnDeletingContainer() {
+  public clearOnDeletingContainer(): void {
     this.panels.forEach((panel) => {
       panel.clearOnDeletingContainer();
     });

src/react/reactquestion.tsx

@@ -388,14 +388,17 @@ export class SurveyQuestionAndErrorsCell extends SurveyQuestionAndErrorsWrapped
   }
   protected renderElement(): JSX.Element {
     var style = this.getCellStyle();
+    const cell = this.props.cell;
+    const focusIn = () => { cell.focusIn(); };
     return (
       <td
         ref={this.cellRef}
         className={this.itemCss}
-        colSpan={this.props.cell.colSpans}
+        colSpan={cell.colSpans}
         data-responsive-title={this.getHeaderText()}
-        title={this.props.cell.getTitle()}
+        title={cell.getTitle()}
         style={style}
+        onFocus={focusIn}
       >
         {this.wrapCell(this.props.cell,
           (