rename cover properties

packages/survey-angular-ui/src/components/cover/cover-cell.component.html

@@ -7,10 +7,10 @@
           <ng-template [component]="{ name: model.survey.getElementWrapperComponentName(model.survey, 'logo-image'), data: { data: model.survey.getElementWrapperComponentData(model.survey, 'logo-image') } }"></ng-template>
         </div>
       </div>
-      <div *ngIf="model.showTitle" class="sv-cover__title" [style]="{ maxWidth: model.textWidth }">
+      <div *ngIf="model.showTitle" class="sv-cover__title" [style]="{ maxWidth: model.textAreaWidth }">
         <sv-ng-element-title [element]="model.survey"></sv-ng-element-title>
       </div>
-      <div *ngIf="model.showDescription" class="sv-cover__description" [style]="{ maxWidth: model.textWidth }">
+      <div *ngIf="model.showDescription" class="sv-cover__description" [style]="{ maxWidth: model.textAreaWidth }">
         <h5 *ngIf="model.survey.renderedHasDescription" [class]="model.survey.css.description" [model]="model.survey.locDescription" sv-ng-string></h5>
       </div>
     </div>

packages/survey-angular-ui/src/components/cover/cover.component.html

@@ -1,5 +1,5 @@
 <ng-template #template>
-  <div *ngIf="(survey.titleView === 'cover' && survey.renderedHasHeader)" [class]="model.coverClasses" [style]="{ height: model.renderedHeight }">
+  <div *ngIf="(survey.headerView === 'advanced' && survey.renderedHasHeader)" [class]="model.coverClasses" [style]="{ height: model.renderedHeight }">
     <div *ngIf="!!model.backgroundImage" [style]="model.backgroundImageStyle" [class]="model.backgroundImageClasses"></div>
     <div [class]="model.contentClasses">
       <ng-container *ngFor="let cell of model.cells">

packages/survey-angular-ui/src/survey-content.component.html

@@ -5,7 +5,7 @@
       <form onsubmit="return false;">
         <div class="sv_custom_header" [hidden]="model.hasLogo"></div>
         <div [class]="model.css.container">
-          <div *ngIf="model.titleView === 'title' && model.renderedHasHeader" [class]="model.css.header" [survey]="model" sv-ng-survey-header></div>
+          <div *ngIf="model.headerView === 'basic' && model.renderedHasHeader" [class]="model.css.header" [survey]="model" sv-ng-survey-header></div>
           <ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'header', needRenderWrapper: false } }"></ng-template>
           <div *ngIf="model.isShowingPage" [class]="model.bodyContainerCss">
             <ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'left' } }"></ng-template>

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

@@ -14,7 +14,7 @@
       <form onsubmit="return false;">
         <div v-if="!vueSurvey.hasLogo" class="sv_custom_header"></div>
         <div :class="css.container">
-          <survey-header v-if="vueSurvey.titleView === 'title'" :survey="vueSurvey" />
+          <survey-header v-if="vueSurvey.headerView === 'basic'" :survey="vueSurvey" />
           <component
             :is="'sv-components-container'"
             :survey="vueSurvey"

packages/survey-vue3-ui/src/components/cover/CoverCell.vue

@@ -13,10 +13,10 @@
         />
       </div>
       </div>
-      <div v-if="model.showTitle" class="sv-cover__title" :style="{ 'maxWidth': model.textWidth }">
+      <div v-if="model.showTitle" class="sv-cover__title" :style="{ 'maxWidth': model.textAreaWidth }">
         <survey-element-title :element="model.survey" :css="model.survey.css" />
       </div>
-      <div v-if="model.showDescription" class="sv-cover__description" :style="{ 'maxWidth': model.textWidth }">
+      <div v-if="model.showDescription" class="sv-cover__description" :style="{ 'maxWidth': model.textAreaWidth }">
         <h5 v-if="model.survey.renderedHasDescription" :class="model.survey.css.description">
           <survey-string :locString="model.survey.locDescription" />
         </h5>

src/cover.ts

@@ -55,11 +55,11 @@ export class CoverCell {
   get showDescription(): boolean {
     return this.survey.renderedHasDescription && this.positionX === this.cover.descriptionPositionX && this.positionY === this.cover.descriptionPositionY;
   }
-  get textWidth(): string {
-    if (!this.cover.textWidth) {
+  get textAreaWidth(): string {
+    if (!this.cover.textAreaWidth) {
       return "";
     }
-    return "" + this.cover.textWidth + "px";
+    return "" + this.cover.textAreaWidth + "px";
   }
 }
 
@@ -94,11 +94,10 @@ export class Cover extends Base {
   public survey: SurveyModel;
   public cells: CoverCell[] = [];
   @property() public height: number;
-  @property() public areaWidth: "survey" | "container";
-  @property() public textWidth: number;
-  @property() public invertText: boolean;
-  @property() public glowText: boolean;
-  @property() public overlap: boolean;
+  @property() public inheritWidthFrom: "survey" | "page";
+  @property() public textAreaWidth: number;
+  @property() public textGlowEnabled: boolean;
+  @property() public overlapEnabled: boolean;
   @property() public backgroundColor: string;
   @property({
     onSet: (newVal: string, target: Cover) => {
@@ -121,22 +120,22 @@ export class Cover extends Base {
   public get renderedHeight(): string {
     return this.height ? this.height + "px" : undefined;
   }
-  public get renderedTextWidth(): string {
-    return this.textWidth ? this.textWidth + "px" : undefined;
+  public get renderedtextAreaWidth(): string {
+    return this.textAreaWidth ? this.textAreaWidth + "px" : undefined;
   }
 
   public get coverClasses(): string {
     return new CssClassBuilder()
       .append("sv-cover")
       .append("sv-conver__without-background", !this.backgroundColor && !this.backgroundImage)
-      .append("sv-conver__overlap", this.overlap)
+      .append("sv-conver__overlap", this.overlapEnabled)
       .toString();
   }
   public get contentClasses(): string {
     return new CssClassBuilder()
       .append("sv-conver__content")
-      .append("sv-conver__content--static", this.areaWidth === "survey" && this.survey.calculateWidthMode() === "static")
-      .append("sv-conver__content--responsive", this.areaWidth === "container" || this.survey.calculateWidthMode() === "responsive")
+      .append("sv-conver__content--static", this.inheritWidthFrom === "survey" && this.survey.calculateWidthMode() === "static")
+      .append("sv-conver__content--responsive", this.inheritWidthFrom === "page" || this.survey.calculateWidthMode() === "responsive")
       .toString();
   }
 
@@ -161,11 +160,10 @@ Serializer.addClass(
   "cover",
   [
     { name: "height:number", minValue: 0, default: 256 },
-    { name: "areaWidth", default: "survey" },
-    { name: "textWidth:number", minValue: 0, default: 512 },
-    { name: "invertText:boolean" },
-    { name: "glowText:boolean" },
-    { name: "overlap:boolean" },
+    { name: "inheritWidthFrom", default: "survey" },
+    { name: "textAreaWidth:number", minValue: 0, default: 512 },
+    { name: "textGlowEnabled:boolean" },
+    { name: "overlapEnabled:boolean" },
     { name: "backgroundImage" },
     { name: "backgroundImageOpacity:number", minValue: 0, maxValue: 1, default: 1 },
     { name: "backgroundImageFit", default: "cover", choices: ["cover", "fill", "contain"] },

src/knockout/components/cover/cover-cell.html

@@ -7,13 +7,13 @@
     </div>
     <!-- /ko -->
     <!-- ko if: showTitle -->
-    <div class="sv-cover__title" data-bind="style: { maxWidth: textWidth }">
+    <div class="sv-cover__title" data-bind="style: { maxWidth: textAreaWidth }">
     <!-- ko component: { name: 'survey-element-title', params: { element: survey } } -->
     <!-- /ko -->
     </div>
     <!-- /ko -->
     <!-- ko if: showDescription -->
-    <div class="sv-cover__description" data-bind="style: { maxWidth: textWidth }">
+    <div class="sv-cover__description" data-bind="style: { maxWidth: textAreaWidth }">
       <h5 data-bind="css: survey.css.description">
         <!-- ko template: { name: 'survey-string', data: survey.locDescription } -->
         <!-- /ko -->

src/knockout/components/cover/cover.html

@@ -1,4 +1,4 @@
-<!-- ko if: (survey.titleView === 'cover' && survey.renderedHasHeader) -->
+<!-- ko if: (survey.headerView === 'advanced' && survey.renderedHasHeader) -->
 <div data-bind="css: model.coverClasses, style: { height: model.renderedHeight }">
   <!-- ko if: !!model.backgroundImage -->
   <div data-bind="style: model.backgroundImageStyle, css: model.backgroundImageClasses"></div>

src/knockout/templates/index.html

@@ -12,7 +12,7 @@
       <form onsubmit="return false;">
           <div class="sv_custom_header" data-bind="visible: !hasLogo"></div>
           <div data-bind="css: containerCss">
-              <!-- ko if: titleView === 'title' -->
+              <!-- ko if: headerView === 'basic' -->
               <!-- ko template: { name: koTitleTemplate, afterRender: koAfterRenderHeader } -->
               <!-- /ko -->
               <!-- /ko -->

src/react/components/cover.tsx

@@ -33,11 +33,11 @@ export class CoverCellComponent extends React.Component<any, any> {
         {this.model.showLogo ? (<div className="sv-cover__logo">
           {this.renderLogoImage()}
         </div>) : null}
-        {this.model.showTitle ? (<div className="sv-cover__title" style={{ maxWidth: this.model.textWidth }}>
+        {this.model.showTitle ? (<div className="sv-cover__title" style={{ maxWidth: this.model.textAreaWidth }}>
           {/* {ReactElementFactory.Instance.createElement("survey-element-title", { element: this.model.survey })} */}
           <TitleElement element={this.model.survey}/>
         </div>) : null}
-        {this.model.showDescription ? (<div className="sv-cover__description" style={{ maxWidth: this.model.textWidth }}>
+        {this.model.showDescription ? (<div className="sv-cover__description" style={{ maxWidth: this.model.textAreaWidth }}>
           <h5 className={this.model.survey.css.description}>
             {SurveyElementBase.renderLocString(this.model.survey.locDescription)}
           </h5>
@@ -58,7 +58,7 @@ export class CoverComponent extends SurveyElementBase<ILayoutElementProps<Cover>
   renderElement(): JSX.Element | null {
     this.model.survey = this.props.survey;
 
-    if(!(this.props.survey.titleView === "cover" && this.props.survey.renderedHasHeader)) {
+    if(!(this.props.survey.headerView === "advanced" && this.props.survey.renderedHasHeader)) {
       return null;
     }
 

src/react/reactSurvey.tsx

@@ -98,7 +98,7 @@ export class Survey extends SurveyElementBase<any, any>
       renderResult = this.renderSurvey();
     }
     const backgroundImage = !!this.survey.backgroundImage ? <div className={this.css.rootBackgroundImage} style={this.survey.backgroundImageStyle}></div> : null;
-    const header: JSX.Element | null = this.survey.titleView === "title" ? <SurveyHeader survey={this.survey}></SurveyHeader> : null;
+    const header: JSX.Element | null = this.survey.headerView === "basic" ? <SurveyHeader survey={this.survey}></SurveyHeader> : null;
 
     const onSubmit = function (event: React.FormEvent<HTMLFormElement>) {
       event.preventDefault();

src/survey.ts

@@ -1168,7 +1168,7 @@ export class SurveyModel extends SurveyElementCore
   @property({ onSet: (newValue, target: SurveyModel) => { target.updateCss(); } }) fitToContainer: boolean;
   @property({
     onSet: (newValue, target: SurveyModel) => {
-      if (newValue === "cover") {
+      if (newValue === "advanced") {
         const layoutElement = target.layoutElements.filter(a => a.id === newValue)[0];
         if (!layoutElement) {
           var cover = new Cover();
@@ -1190,7 +1190,7 @@ export class SurveyModel extends SurveyElementCore
         target.removeLayoutElement("cover");
       }
     }
-  }) titleView: "cover" | "title";
+  }) headerView: "advanced" | "basic";
 
   private getNavigationCss(main: string, btn: string) {
     return new CssClassBuilder().append(main)
@@ -7648,7 +7648,7 @@ Serializer.addClass("survey", [
   },
   { name: "width", visibleIf: (obj: any) => { return obj.widthMode === "static"; } },
   { name: "fitToContainer:boolean", default: false },
-  { name: "titleView", default: "title", choices: ["title", "cover"], visible: false },
+  { name: "headerView", default: "basic", choices: ["basic", "advanced"], visible: false },
   { name: "backgroundImage", visible: false },
   { name: "backgroundImageFit", default: "cover", choices: ["auto", "contain", "cover"], visible: false },
   { name: "backgroundImageAttachment", default: "scroll", choices: ["scroll", "fixed"], visible: false },

src/vue/components/cover/cover-cell.vue

@@ -13,10 +13,10 @@
         />
       </div>
       </div>
-      <div v-if="model.showTitle" class="sv-cover__title" :style="{ 'maxWidth': model.textWidth }">
+      <div v-if="model.showTitle" class="sv-cover__title" :style="{ 'maxWidth': model.textAreaWidth }">
         <survey-element-title :element="model.survey" :css="model.survey.css" />
       </div>
-      <div v-if="model.showDescription" class="sv-cover__description" :style="{ 'maxWidth': model.textWidth }">
+      <div v-if="model.showDescription" class="sv-cover__description" :style="{ 'maxWidth': model.textAreaWidth }">
         <h5 v-if="model.survey.renderedHasDescription" :class="model.survey.css.description">
           <survey-string :locString="model.survey.locDescription" />
         </h5>

src/vue/survey.vue

@@ -7,7 +7,7 @@
       <form onsubmit="return false;">
         <div v-if="!vueSurvey.hasLogo" class="sv_custom_header"></div>
         <div :class="css.container">
-          <survey-header v-if="vueSurvey.titleView === 'title'" :survey="vueSurvey" />
+          <survey-header v-if="vueSurvey.headerView === 'basic'" :survey="vueSurvey" />
           <component :is="'sv-components-container'" :survey="vueSurvey" :container="'header'"></component>
           <template
             v-if="vueSurvey.isShowingPage"

tests/coverTests.ts

@@ -58,7 +58,7 @@ QUnit.test("contentClasses",
     cover.survey = new SurveyModel();
 
     assert.equal(cover.survey.widthMode, "auto", "default widthMode");
-    assert.equal(cover.areaWidth, "survey", "default areaWidth");
+    assert.equal(cover.inheritWidthFrom, "survey", "default inheritWidthFrom");
     assert.equal(cover.contentClasses, "sv-conver__content sv-conver__content--static", "default contentClasses");
 
     cover.survey.widthMode = "responsive";
@@ -67,8 +67,8 @@ QUnit.test("contentClasses",
     cover.survey.widthMode = "static";
     assert.equal(cover.contentClasses, "sv-conver__content sv-conver__content--static", "survey.widthMode is static");
 
-    cover.areaWidth = "container";
-    assert.equal(cover.contentClasses, "sv-conver__content sv-conver__content--responsive", "areaWidth is container");
+    cover.inheritWidthFrom = "page";
+    assert.equal(cover.contentClasses, "sv-conver__content sv-conver__content--responsive", "inheritWidthFrom is page");
   }
 );
 
@@ -197,11 +197,11 @@ QUnit.test("cell calculations - test width",
   function (assert) {
     const cover = new Cover();
 
-    assert.equal(cover.cells[0].textWidth, "512px", "default");
-    assert.equal(cover.cells[0].textWidth, cover.textWidth + "px", "equal to cover + px");
+    assert.equal(cover.cells[0].textAreaWidth, "512px", "default");
+    assert.equal(cover.cells[0].textAreaWidth, cover.textAreaWidth + "px", "equal to cover + px");
 
-    cover.textWidth = 120;
-    assert.equal(cover.textWidth, 120, "cover text width");
-    assert.equal(cover.cells[0].textWidth, "120px", "cell text width");
+    cover.textAreaWidth = 120;
+    assert.equal(cover.textAreaWidth, 120, "cover text width");
+    assert.equal(cover.cells[0].textAreaWidth, "120px", "cell text width");
   }
 );

visualRegressionTests/tests/defaultV2/survey.ts

@@ -117,7 +117,7 @@ frameworks.forEach(framework => {
         ]
       });
       await ClientFunction(() => {
-        (<any>window).survey.titleView = "cover";
+        (<any>window).survey.headerView = "advanced";
       })();
       await takeElementScreenshot("survey-cover-default.png", Selector(".sd-root-modern"), t, comparer);
     });