[Knockout] Theme demos in Survey Creator: The "Advanced mode" switche…

…r is missing (#5279)

* work for surveyjs/service#1985

* work for surveyjs/service#1985

---------

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

packages/survey-creator-core/src/components/tabs/theme-builder.ts

@@ -102,6 +102,7 @@ export class ThemeEditorModel extends Base {
   public testAgainAction: Action;
   public nextPageAction: Action;
   public undoRedoManager: UndoRedoManager;
+  private advancedModeSwitcher: Switcher;
   private themeEditorSurveyValue: SurveyModel;
   private themeCssVariablesChanges: { [index: string]: string } = {};
   private colorCalculator = new ColorCalculator();
@@ -780,10 +781,9 @@ export class ThemeEditorModel extends Base {
       }
     });
     themeEditorSurvey.onGetPanelTitleActions.add((sender, opt) => {
-      if (this.surveyProvider.isMobileView) return;
-
       if (opt.panel && opt.panel.name == "groupAppearance") {
-        opt.titleActions.push(this.createAppearanceAdvancedModeAction(opt.panel));
+        this.createAppearanceAdvancedModeAction(opt.panel);
+        opt.titleActions.push(this.advancedModeSwitcher);
       }
     });
     themeEditorSurvey.onUpdatePanelCssClasses.add((sender, options) => {
@@ -804,14 +804,15 @@ export class ThemeEditorModel extends Base {
     return themeEditorSurvey;
   }
 
-  private createAppearanceAdvancedModeAction(panel: PanelModelBase) {
+  private createAppearanceAdvancedModeAction(panel: PanelModelBase): void {
     const advancedMode = new Switcher({
       id: "advancedMode",
       component: "svc-switcher",
       ariaChecked: <any>new ComputedUpdater<boolean>(() => this.groupAppearanceAdvancedMode),
       ariaRole: "checkbox",
       css: "sv-theme-group_title-action",
       title: getLocString("theme.advancedMode"),
+      visible: !this.surveyProvider.isMobileView,
       action: () => {
         this.groupAppearanceAdvancedMode = !this.groupAppearanceAdvancedMode;
         this._setPGEditorPropertyValue(panel.getQuestionByName("advancedMode"), "value", this.groupAppearanceAdvancedMode);
@@ -824,7 +825,7 @@ export class ThemeEditorModel extends Base {
       "groupAppearanceAdvancedMode"
     );
     advancedMode.checked = false;
-    return advancedMode;
+    this.advancedModeSwitcher = advancedMode;
   }
 
   findSuitableTheme(themeName: string): ITheme {
@@ -882,6 +883,9 @@ export class ThemeEditorModel extends Base {
   private updateVisibilityOfPropertyGridGroups() {
     const page = this.themeEditorSurvey.pages[0];
     page.getElementByName("groupHeader").visible = this.surveyProvider.isMobileView ? false : settings.theme.allowEditHeaderSettings;
+    if(this.advancedModeSwitcher) {
+      this.advancedModeSwitcher.visible = !this.surveyProvider.isMobileView;
+    }
   }
   private setCoverPropertiesFromSurvey(panel, themeCssVariables: { [index: string]: string }) {
     this._setPGEditorPropertyValue(panel.getQuestionByName("headerTitle"), "readOnly", !this.survey.hasTitle);

packages/survey-creator-core/tests/tabs/theme-builder.tests.ts

@@ -1,4 +1,4 @@
-import { ComponentCollection, ITheme, Question, QuestionButtonGroupModel, QuestionCompositeModel, QuestionDropdownModel, QuestionPanelDynamicModel, Serializer, SurveyModel, settings as surveySettings } from "survey-core";
+import { ComponentCollection, ITheme, Question, QuestionButtonGroupModel, QuestionCompositeModel, QuestionDropdownModel, QuestionPanelDynamicModel, Serializer, SurveyElement, SurveyModel, settings as surveySettings } from "survey-core";
 import { ThemeEditorModel, getThemeChanges } from "../../src/components/tabs/theme-builder";
 import { PredefinedColors, PredefinedThemes, Themes } from "../../src/components/tabs/themes";
 export { QuestionFileEditorModel } from "../../src/custom-questions/question-file";
@@ -2317,8 +2317,9 @@ test("Desktop mode: add advanced mode switcher", (): any => {
   expect(propertyGridGroups[2].visible).toBeTruthy();
   expect(propertyGridGroups[3].visible).toBeTruthy();
 
-  const actions = propertyGridGroups[3].getTitleActions();
+  const actions = (propertyGridGroups[3] as any as SurveyElement).getTitleActions();
   expect(actions.length).toBe(1);
+  expect(actions[0].visible).toBeTruthy();
 });
 
 test("Mobile mode: hide advanced settings in property grid", (): any => {
@@ -2337,9 +2338,30 @@ test("Mobile mode: hide advanced settings in property grid", (): any => {
   expect(propertyGridGroups[2].visible).toBeTruthy();
   expect(propertyGridGroups[3].visible).toBeTruthy();
 
-  const actions = propertyGridGroups[3].getTitleActions();
-  expect(actions.length).toBe(0);
+  const actions = (propertyGridGroups[3] as any as SurveyElement).getTitleActions();
+  expect(actions.length).toBe(1);
+  expect(actions[0].visible).toBeFalsy();
 });
+
+test("Change advancedModeSwitcher visibility", (): any => {
+  const creator: CreatorTester = new CreatorTester({ showThemeTab: true });
+  creator.JSON = { logo: "Logo", pages: [{ questions: [{ type: "text", name: "q1" }] }] };
+
+  const themePlugin: ThemeTabPlugin = <ThemeTabPlugin>creator.getPlugin("theme");
+  themePlugin.activate();
+  const themeBuilder = themePlugin.model as ThemeEditorModel;
+  const themeEditorSurvey = themeBuilder.themeEditorSurvey;
+  const propertyGridGroups = themeEditorSurvey.pages[0].elements;
+  expect(propertyGridGroups.length).toBe(4);
+  const actions = (propertyGridGroups[3] as any as SurveyElement).getTitleActions();
+
+  expect(actions.length).toBe(1);
+  expect(actions[0].visible).toBeTruthy();
+
+  creator.isMobileView = true;
+  expect(actions[0].visible).toBeFalsy();
+});
+
 test("loadTheme fill all theme parameters: name, mode and compactness", (): any => {
   const creator: CreatorTester = new CreatorTester({ showThemeTab: true });
   creator.JSON = { questions: [{ type: "text", name: "q1" }] };