theme editor property grid improvement

packages/survey-creator-angular/src/angular-ui.module.ts

@@ -18,6 +18,7 @@ import { AceJsonEditorComponent } from "./tabs/json/json-editor-ace.component";
 import { LogicTabComponent } from "./tabs/logic/logic.component";
 import { LogicAddButtonComponent } from "./tabs/logic/logic-add-btn.component";
 import { ActionButtonComponent } from "./components/action-button.component";
+import { SwitcherComponent } from "./components/switcher.component";
 import { LinkValueQuestionComponent } from "./questions/question-link-value.component";
 import { EmbeddedSurveyQuestionComponent } from "./questions/question-embedded-survey.component";
 import { TranslationTabComponent } from "./tabs/translation/translation.component";
@@ -64,7 +65,7 @@ import { QuestionBannerComponent } from "./question-banner.component";
 import { JsonErrorItemComponent } from "./tabs/json/json-error-item.component";
 
 @NgModule({
-  declarations: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarTabComponent, ObjectSelectorComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
+  declarations: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarTabComponent, ObjectSelectorComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
     AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
     QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
     ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, ToolboxComponent, CreatorLogoImageComponent,
@@ -74,7 +75,7 @@ import { JsonErrorItemComponent } from "./tabs/json/json-error-item.component";
     CommonModule, FormsModule, SurveyModule
   ],
   exports: [
-    CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarTabComponent, ObjectSelectorComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
+    CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarTabComponent, ObjectSelectorComponent, PropertyGridComponent, SearchComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, SwitcherComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent, ThemeTabComponent,
     AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
     QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
     ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, ToolboxComponent, CreatorLogoImageComponent,

packages/survey-creator-angular/src/angular-ui.ts

@@ -15,6 +15,7 @@ export * from "./tabs/json/json-editor-ace.component";
 export * from "./tabs/logic/logic.component";
 export * from "./tabs/logic/logic-add-btn.component";
 export * from "./components/action-button.component";
+export * from "./components/switcher.component";
 export * from "./questions/question-link-value.component";
 export * from "./questions/question-embedded-survey.component";
 export * from "./tabs/translation/translation.component";

packages/survey-creator-angular/src/components/switcher.component.html

@@ -0,0 +1,11 @@
+<ng-template #template>
+  <button class="svc-switcher" type="button" (click)="model.action(model, model.getIsTrusted($event))"
+    [key2click]="{ processEsc: false, disableTabStop: model.disableTabStop }" [class]="model.getActionBarItemCss()"
+    [attr.title]="model.tooltip || model.title" [attr.aria-checked]="model.ariaChecked"
+    [attr.aria-expanded]="model.ariaExpanded" [attr.role]="model.ariaRole">
+    <div [class]="model.getSwitcherIconCss()">
+      <div class="svc-switcher__icon-thumb"></div>
+    </div>
+    <span *ngIf="model.hasTitle" class="svc-switcher__title">{{ model.title }}</span>
+  </button>
+  <ng-template>

packages/survey-creator-angular/src/components/switcher.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input } from "@angular/core";
+import { AngularComponentFactory, BaseAngular } from "survey-angular-ui";
+
+@Component({
+  selector: "svc-switcher",
+  templateUrl: "./switcher.component.html",
+  styles: [":host { display: none; }"]
+})
+export class SwitcherComponent extends BaseAngular {
+  @Input() model: any;
+
+  getModel() {
+    return this.model;
+  }
+}
+
+AngularComponentFactory.Instance.registerComponent("svc-switcher", SwitcherComponent);
+

packages/survey-creator-core/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.9.125](https://github.com/surveyjs/survey-creator/compare/v1.9.109...v1.9.125) (2024-01-09)
+
+
+### Bug Fixes
+
+* change german translation of "header" ([#5013](https://github.com/surveyjs/survey-creator/issues/5013)) ([a004c08](https://github.com/surveyjs/survey-creator/commit/a004c08f3a576450023f163a8d902e469afb2bf1))
+
 ### [1.9.124](https://github.com/surveyjs/survey-creator/compare/v1.9.123...v1.9.124) (2024-01-05)
 
 ### [1.9.123](https://github.com/surveyjs/survey-creator/compare/v1.9.122...v1.9.123) (2023-12-27)

packages/survey-creator-core/package.json

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

packages/survey-creator-core/src/components/switcher/switcher.scss

@@ -0,0 +1,90 @@
+@import "../../variables.scss";
+
+.svc-switcher.spg-action-button {
+  align-items: center;
+  gap: calcSize(1);
+  pointer-events: auto;
+}
+
+.svc-switcher__title {
+  color: $foreground-light;
+
+  font-family: $font-family;
+  font-size: calcSize(1.5);
+  font-style: normal;
+  font-weight: 600;
+  line-height: calcSize(1);
+}
+
+.svc-switcher__icon {
+  width: calcSize(2.5);
+  padding: calcSize(0.5);
+  justify-content: center;
+  align-items: center;
+  border-radius: 100px;
+  border: 1px solid $border;
+  background: $background-dim;
+
+  transition-duration: 0.2s;
+  transition-property: background;
+  transition-timing-function: linear;
+}
+
+.svc-switcher__icon:hover {
+  background: $background;
+}
+
+.svc-switcher__icon:focus {
+  border: calcSize(0.25) solid $primary;
+  background: $background-dim;
+}
+
+.svc-switcher__icon:hover:focus {
+  border: calcSize(0.25) solid $primary;
+  background: $background;
+}
+
+.svc-switcher__icon--checked,
+.svc-switcher__icon--checked:hover {
+  justify-content: center;
+  align-items: center;
+  border: unset;
+
+  border-radius: 100px;
+  background-color: $primary;
+}
+
+.svc-switcher__icon--checked:focus {
+  border: calcSize(0.25) solid $primary;
+  background-color: $primary-foreground;
+}
+
+.svc-switcher__icon-thumb {
+  width: calcSize(1);
+  height: calcSize(1);
+  justify-content: center;
+  align-items: center;
+
+  border-radius: 100px;
+  background-color: $foreground-dim-light;
+
+  transform: translateX(0);
+  margin-left: 0%;
+  transition-duration: 0.2s;
+  transition-property: margin-left, transform, background-color;
+  transition-timing-function: linear;
+}
+
+.svc-switcher__icon--checked .svc-switcher__icon-thumb {
+  background-color: $primary-foreground;
+  margin-left: 100%;
+  transform: translateX(-100%);
+}
+
+.svc-switcher__icon:focus,
+.svc-switcher__icon:hover:focus,
+.svc-switcher__icon--checked:focus {
+  .svc-switcher__icon-thumb {
+    background-color: $primary;
+  }
+}

packages/survey-creator-core/src/components/switcher/switcher.ts

@@ -0,0 +1,14 @@
+import { Action, CssClassBuilder, property } from "survey-core";
+
+require("./switcher.scss");
+
+export class Switcher extends Action {
+  @property() checked: boolean;
+
+  public getSwitcherIconCss(): string {
+    return new CssClassBuilder()
+      .append("svc-switcher__icon")
+      .append("svc-switcher__icon--checked", this.checked)
+      .toString();
+  }
+}