Matrix column question edit dialog. Theming issue. (#6732)

* resolve #6707 Matrix column question edit dialog. Theming issue.

* work for #6707 update etalons

---------

Co-authored-by: OlgaLarina <olga.larina.dev@gmail.com>

Author: OlgaLarina

packages/survey-creator-angular/src/question-editor.component.html

@@ -1,3 +1,5 @@
 <ng-template #template>
-  <ng-template [component]="{ name: componentName, data: componentData }"></ng-template>
+  <div [style]="style">
+    <ng-template [component]="{ name: componentName, data: componentData }"></ng-template>
+  </div>
 </ng-template>

packages/survey-creator-angular/src/question-editor.component.ts

@@ -7,7 +7,9 @@ import { Question, SurveyModel } from "survey-core";
   templateUrl: "./question-editor.component.html"
 })
 export class QuestionEditorComponent extends EmbeddedViewContentComponent {
-  @Input() survey!: SurveyModel
+  @Input() survey!: SurveyModel;
+  @Input() style!: any;
+
   get question(): Question {
     return this.survey.getAllQuestions()[0];
   }

packages/survey-creator-core/src/components/matrix-cell.ts

@@ -17,6 +17,7 @@ import { SurveyCreatorModel } from "../creator-base";
 import { toggleHovered } from "../utils/html-element-utils";
 import { SurveyHelper } from "../survey-helper";
 import { editorLocalization } from "../editorLocalization";
+import designTabSurveyThemeJSON from "../designTabSurveyThemeJSON";
 
 import "./matrix-cell.scss";
 
@@ -99,7 +100,8 @@ export class MatrixCellWrapperViewModel extends Base {
         componentName: "svc-question-editor-content",
         data: {
           survey: editSurvey.survey,
-          creator: this.creator
+          creator: this.creator,
+          style: designTabSurveyThemeJSON.cssVariables
         },
         onApply: () => {
           editSurvey.apply();

packages/survey-creator-react/src/QuestionEditorContent.tsx

@@ -6,6 +6,7 @@ import * as React from "react";
 interface IQuestionEditorContentComponentProps {
   creator: SurveyCreatorModel;
   survey: SurveyModel;
+  style: any;
 }
 
 export class QuestionEditorContentComponent extends React.Component<
@@ -40,9 +41,9 @@ export class QuestionEditorContentComponent extends React.Component<
   render(): React.JSX.Element {
     const question = this.survey.getAllQuestions()[0];
     return (
-      <>
+      <div style={this.props.style} >
         <SurveyQuestion creator={this} element={question}></SurveyQuestion>
-      </>
+      </div>
     );
   }
 }

packages/survey-creator-vue/src/QuestionEditor.vue

@@ -1,12 +1,14 @@
 <template>
-  <SvComponent :is="componentName" v-bind="componentData"></SvComponent>
+  <div :style="props.style">
+    <SvComponent :is="componentName" v-bind="componentData"></SvComponent>
+  </div>
 </template>
 <script lang="ts" setup>
 import { SvComponent } from "survey-vue3-ui";
 import type { SurveyModel } from "survey-core";
 import { computed } from "vue";
 
-const props = defineProps<{ survey: SurveyModel }>();
+const props = defineProps<{ survey: SurveyModel; style: any }>();
 
 const question = computed(() => props.survey?.getAllQuestions()[0]);