Theme api (#7122)

* rollback

* refactoring: remove onThemeApplied & onThemeApplying events

* resolve #7104 Themes API: list the properties of the header object

* rename IAdvancedHeader -> IHeader

* rename setTheme -> themeChanged

---------

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

src/question.ts

@@ -20,6 +20,7 @@ import { getElementWidth, increaseHeightByContent, isContainerVisible } from "./
 import { PopupModel } from "./popup";
 import { ConsoleWarnings } from "./console-warnings";
 import { ProcessValue } from "./conditionProcessValue";
+import { ITheme } from "./themes";
 
 export interface IConditionObject {
   name: string;
@@ -113,6 +114,7 @@ export class Question extends SurveyElement<Question>
   public setIsMobile(val: boolean) {
     this.isMobile = val && (this.allowMobileInDesignMode() || !this.isDesignMode);
   }
+  public themeChanged(theme: ITheme): void { }
   @property({ defaultValue: false }) isMobile: boolean;
   @property() forceIsInputReadOnly: boolean;
 

src/question_paneldynamic.ts

@@ -29,6 +29,7 @@ import { ActionContainer } from "./actions/container";
 import { Action, IAction } from "./actions/action";
 import { ComputedUpdater } from "./base";
 import { AdaptiveActionContainer } from "./actions/adaptive-container";
+import { ITheme } from "./themes";
 
 export interface IQuestionPanelDynamicData {
   getItemIndex(item: ISurveyData): number;
@@ -749,6 +750,14 @@ export class QuestionPanelDynamicModel extends Question
       question.setIsMobile(val);
     }));
   }
+  public themeChanged(theme: ITheme): void {
+    super.themeChanged(theme);
+    (this.panels || []).forEach(panel =>
+      panel.getQuestions(true).forEach(question => {
+        question.themeChanged(theme);
+      })
+    );
+  }
 
   /**
    * The number of panels in Dynamic Panel.

src/question_rating.ts

@@ -12,6 +12,7 @@ import { DropdownListModel } from "./dropdownListModel";
 import { SurveyModel } from "./survey";
 import { ISurveyImpl } from "./base-interfaces";
 import { IsTouch } from "./utils/devices";
+import { ITheme } from "./themes";
 
 export class RenderedRatingItem extends Base {
   private onStringChangedCallback() {
@@ -811,16 +812,15 @@ export class QuestionRatingModel extends Question {
     }
     return classes;
   }
+  public themeChanged(theme: ITheme): void {
+    this.colorsCalculated = false;
+    this.updateColors(theme.cssVariables);
+    this.createRenderedRateItems();
+  }
   public setSurveyImpl(value: ISurveyImpl, isLight?: boolean) {
     super.setSurveyImpl(value, isLight);
     if (!this.survey) return;
     this.updateColors((this.survey as SurveyModel).themeVariables);
-
-    (<SurveyModel>this.survey).onThemeApplied.add((survey, options) => {
-      this.colorsCalculated = false;
-      this.updateColors(options.theme.cssVariables);
-      this.createRenderedRateItems();
-    });
   }
   public dispose(): void {
     super.dispose();

src/question_signaturepad.ts

@@ -7,6 +7,7 @@ import { CssClassBuilder } from "./utils/cssClassBuilder";
 import { SurveyModel } from "./survey";
 import { ISurveyImpl } from "./base-interfaces";
 import { ConsoleWarnings } from "./console-warnings";
+import { ITheme } from "./themes";
 
 var defaultWidth = 300;
 var defaultHeight = 200;
@@ -92,15 +93,10 @@ export class QuestionSignaturePadModel extends Question {
       this.destroySignaturePad(el);
     }
   }
-  public setSurveyImpl(value: ISurveyImpl, isLight?: boolean) {
-    super.setSurveyImpl(value, isLight);
-    if (!this.survey) return;
-
-    (<SurveyModel>this.survey).onThemeApplied.add((survey, options) => {
-      if(!!this.signaturePad) {
-        this.updateColors(this.signaturePad);
-      }
-    });
+  public themeChanged(theme: ITheme): void {
+    if(!!this.signaturePad) {
+      this.updateColors(this.signaturePad);
+    }
   }
 
   initSignaturePad(el: HTMLElement) {

src/survey-events-api.ts

@@ -13,7 +13,6 @@ import { QuestionMatrixDynamicModel } from "./question_matrixdynamic";
 import { QuestionPanelDynamicModel } from "./question_paneldynamic";
 import { SurveyModel } from "./survey";
 import { SurveyError } from "./survey-error";
-import { ITheme } from "./themes";
 import { Trigger } from "./trigger";
 
 export interface QuestionEventMixin {
@@ -942,8 +941,4 @@ export interface PopupVisibleChangedEvent extends QuestionEventMixin {
    * Indicates whether the popup is visible now.
    */
   visible: boolean;
-}
-
-export interface ThemeAppliedEvent {
-  theme: ITheme;
 }

src/survey.ts

@@ -63,7 +63,7 @@ import {
   MatrixCellValidateEvent, DynamicPanelModifiedEvent, DynamicPanelRemovingEvent, TimerPanelInfoTextEvent, DynamicPanelItemValueChangedEvent, DynamicPanelGetTabTitleEvent,
   IsAnswerCorrectEvent, DragDropAllowEvent, ScrollingElementToTopEvent, GetQuestionTitleActionsEvent, GetPanelTitleActionsEvent, GetPageTitleActionsEvent,
   GetPanelFooterActionsEvent, GetMatrixRowActionsEvent, ElementContentVisibilityChangedEvent, GetExpressionDisplayValueEvent, ServerValidateQuestionsEvent,
-  MultipleTextItemAddedEvent, MatrixColumnAddedEvent, GetQuestionDisplayValueEvent, PopupVisibleChangedEvent, ThemeAppliedEvent
+  MultipleTextItemAddedEvent, MatrixColumnAddedEvent, GetQuestionDisplayValueEvent, PopupVisibleChangedEvent
 } from "./survey-events-api";
 import { QuestionMatrixDropdownModelBase } from "./question_matrixdropdownbase";
 import { QuestionMatrixDynamicModel } from "./question_matrixdynamic";
@@ -135,13 +135,6 @@ export class SurveyModel extends SurveyElementCore
 
   private navigationBarValue: ActionContainer;
 
-  onThemeApplying: EventBase<SurveyModel> = new EventBase<SurveyModel>();
-  /**
-   * An event that is raised after a [theme](/form-library/documentation/manage-default-themes-and-styles) is [applied](#applyTheme) to the survey.
-   * @see applyTheme
-   */
-  onThemeApplied: EventBase<SurveyModel, ThemeAppliedEvent> = new EventBase<SurveyModel, ThemeAppliedEvent>();
-
   //#region Event declarations
   /**
    * An event that is raised after a [trigger](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#triggers) is executed.
@@ -2070,7 +2063,7 @@ export class SurveyModel extends SurveyElementCore
     if (this._isMobile !== newVal) {
       this._isMobile = newVal;
       this.updateCss();
-      this.getAllQuestions().map(q => q.setIsMobile(newVal));
+      this.getAllQuestions().forEach(q => q.setIsMobile(newVal));
     }
   }
   public get isMobile() {
@@ -7347,7 +7340,6 @@ export class SurveyModel extends SurveyElementCore
    *
    * [Themes & Styles](/form-library/documentation/manage-default-themes-and-styles (linkStyle))
    * @param theme An [`ITheme`](/form-library/documentation/api-reference/itheme) object with theme settings.
-   * @see onThemeApplied
    */
   public applyTheme(theme: ITheme): void {
     if (!theme) return;
@@ -7370,8 +7362,10 @@ export class SurveyModel extends SurveyElementCore
         (this as any)[key] = theme[key];
       }
     });
-
-    this.onThemeApplied.fire(this, { theme: theme });
+    this.themeChanged(theme);
+  }
+  public themeChanged(theme: ITheme): void {
+    this.getAllQuestions().forEach(q => q.themeChanged(theme));
   }
 
   /**

src/themes.ts

@@ -1,3 +1,5 @@
+import { HorizontalAlignment, VerticalAlignment } from "./base-interfaces";
+
 export type ImageFit = "auto" | "contain" | "cover";
 export type ImageAttachment = "fixed" | "scroll";
 
@@ -58,9 +60,26 @@ export interface ITheme {
   /**
    * An object with survey header settings.
    */
-  header?: {[index: string]: any};
+  header?: IHeader;
   /**
    * An object with CSS variables.
    */
   cssVariables?: { [index: string]: string };
 }
+
+export interface IHeader {
+  height: number;
+  inheritWidthFrom: "survey" | "page";
+  textAreaWidth: number;
+  // textGlowEnabled: boolean;
+  overlapEnabled: boolean;
+  backgroundImage: string;
+  backgroundImageOpacity: number;
+  backgroundImageFit: "cover" | "fill" | "contain" | "tile";
+  logoPositionX: HorizontalAlignment;
+  logoPositionY: VerticalAlignment;
+  titlePositionX: HorizontalAlignment;
+  titlePositionY: VerticalAlignment;
+  descriptionPositionX: HorizontalAlignment;
+  descriptionPositionY: VerticalAlignment;
+}