Features/lazy prop calculation

packages/survey-angular-ui/src/questions/text.component.html

@@ -8,7 +8,7 @@
   <div *ngIf="model.isReadOnlyRenderDiv()" #contentElement>{{ value }}</div>
   <ng-template #input>
     <input #inputElement [style]="model.inputStyle" [class]="model.getControlClass()" [attr.list]="model.dataListId"
-    (change)="model.onChange($event)" [value]="value" [disabled]="model.isDisabledAttr" [type]="model.inputType" [id]="model.inputId" [attr.placeholder]="model.renderedPlaceholder || ''"
+    (change)="model.onChange($event)" [value]="value" [disabled]="model.isDisabledAttr" [type]="model.inputType" [id]="model.inputId" [attr.placeholder]="model.renderedPlaceholder"
     (keyup)="model.onKeyUp($event)" (keydown)="model.onKeyDown($event)" (blur)="blur($event)" (focus)="model.onFocus($event)" (compositionupdate)="model.onCompositionUpdate($event)" 
     [attr.size] = "model.renderedInputSize" [attr.maxlength]= "model.getMaxLength()" [attr.min]="model.renderedMin" [readonly]="model.isReadOnlyAttr"
     [attr.max]="model.renderedMax" [attr.step]="model.renderedStep" [attr.max]="model.renderedMax" [attr.aria-required]="model.a11y_input_ariaRequired"

packages/survey-core/src/base.ts

@@ -495,12 +495,19 @@ export class Base {
    * @param name A property name.
    * @param defaultValue *(Optional)* A value to return if the property is not found or does not have a value.
    */
-  public getPropertyValue(name: string, defaultValue: any = null): any {
+  public getPropertyValue(name: string, defaultValue?: any, calcFunc?: ()=> any): any {
     const res = this.getPropertyValueWithoutDefault(name);
     if (this.isPropertyEmpty(res)) {
       const locStr = this.localizableStrings ? this.localizableStrings[name] : undefined;
       if (locStr) return locStr.text;
       if (defaultValue !== null && defaultValue !== undefined) return defaultValue;
+      if(!!calcFunc) {
+        const newVal = calcFunc();
+        if(newVal !== undefined) {
+          this.setPropertyValueDirectly(name, newVal);
+          return newVal;
+        }
+      }
       const propDefaultValue = this.getDefaultPropertyValue(name);
       if (propDefaultValue !== undefined) return propDefaultValue;
     }

packages/survey-core/src/dropdownListModel.ts

@@ -39,7 +39,6 @@ export class DropdownListModel extends Base {
   }
   private itemsSettings: { skip: number, take: number, totalCount: number, items: any[] } = { skip: 0, take: 0, totalCount: 0, items: [] };
   protected listModel: ListModel<ItemValue>;
-  protected popupCssClasses = "sv-single-select-list";
   protected listModelFilterStringChanged = (newValue: string) => {
     if (this.filterString !== newValue) {
       this.filterString = newValue;
@@ -134,7 +133,6 @@ export class DropdownListModel extends Base {
     this.listModel.registerPropertyChangedHandlers(["showFilter"], () => {
       this.updatePopupFocusFirstInputSelector();
     });
-    this._popupModel.cssClass = this.popupCssClasses;
     this._popupModel.onVisibilityChanged.add((_, option: { isVisible: boolean }) => {
       if (option.isVisible) {
         this.listModel.renderElements = true;
@@ -251,8 +249,9 @@ export class DropdownListModel extends Base {
     model.isAllDataLoaded = !this.question.choicesLazyLoadEnabled;
     model.actions.forEach(a => a.disableTabStop = true);
   }
+  protected getPopupCssClasses(): string { return "sv-single-select-list"; }
   public updateCssClasses(popupCssClass: string, listCssClasses: any): void {
-    this.popupModel.cssClass = new CssClassBuilder().append(popupCssClass).append(this.popupCssClasses).toString();
+    this.popupModel.cssClass = new CssClassBuilder().append(popupCssClass).append(this.getPopupCssClasses()).toString();
     this.listModel.cssClasses = listCssClasses;
   }
   protected resetFilterString(): void {
@@ -413,7 +412,6 @@ export class DropdownListModel extends Base {
   constructor(protected question: Question, protected onSelectionChanged?: (item: IAction, ...params: any[]) => void) {
     super();
     this.htmlCleanerElement = DomDocumentHelper.createElement("div") as HTMLDivElement;
-    this.question.ariaExpanded = "false";
     question.onPropertyChanged.add(this.questionPropertyChangedHandler);
     this.showInputFieldComponent = this.question.showInputFieldComponent;
 
@@ -424,6 +422,8 @@ export class DropdownListModel extends Base {
     this.setTextWrapEnabled(this.question.textWrapEnabled);
     this.createPopup();
     this.resetItemsSettings();
+    const classes = question.cssClasses;
+    this.updateCssClasses(classes.popup, classes.list);
   }
 
   get popupModel(): PopupModel {

packages/survey-core/src/dropdownMultiSelectListModel.ts

@@ -9,8 +9,6 @@ import { settings } from "./settings";
 import { IsTouch } from "./utils/devices";
 
 export class DropdownMultiSelectListModel extends DropdownListModel {
-  protected popupCssClasses = "sv-multi-select-list";
-
   @property({ defaultValue: "" }) filterStringPlaceholder: string;
   @property({ defaultValue: true }) closeOnSelect: boolean;
 
@@ -41,6 +39,7 @@ export class DropdownMultiSelectListModel extends DropdownListModel {
       return super.getFocusFirstInputSelector();
     }
   }
+  protected getPopupCssClasses(): string { return "sv-multi-select-list"; }
   protected createListModel(): MultiSelectListModel<ItemValue> {
     const visibleItems = this.getAvailableItems();
     let _onSelectionChanged = this.onSelectionChanged;
@@ -70,7 +69,6 @@ export class DropdownMultiSelectListModel extends DropdownListModel {
       elementId: this.listElementId
     };
     const res = new MultiSelectListModel<ItemValue>(listOptions);
-    res.actions.forEach(a => a.disableTabStop = true);
     this.setOnTextSearchCallbackForListModel(res);
     res.forceShowFilter = true;
     return res;

packages/survey-core/src/jsonobject.ts

@@ -86,9 +86,11 @@ export function property(options: IPropertyDecoratorOptions = {}) {
         set: function (val: any) {
           const newValue = processComputedUpdater(this, val);
           const prevValue = this.getPropertyValue(key);
-          this.setPropertyValue(key, newValue);
-          if (!!options && options.onSet) {
-            options.onSet(newValue, this, prevValue);
+          if(newValue !== prevValue) {
+            this.setPropertyValue(key, newValue);
+            if (!!options && options.onSet) {
+              options.onSet(newValue, this, prevValue);
+            }
           }
         },
       });

packages/survey-core/src/list.ts

@@ -118,6 +118,9 @@ export class ListModel<T extends BaseAction = Action> extends ActionContainer<T>
     if (!!this.onFilterStringChangedCallback) {
       this.onFilterStringChangedCallback(text);
     }
+    this.updateIsEmpty();
+  }
+  private updateIsEmpty(): void {
     this.isEmpty = this.renderedActions.filter(action => this.isItemVisible(action)).length === 0;
   }
   private scrollToItem(selector: string, ms = 0): void {
@@ -158,6 +161,7 @@ export class ListModel<T extends BaseAction = Action> extends ActionContainer<T>
             (this as any)[key] = options[key];
         }
       });
+      this.updateActionsIds();
     } else {
       this.setItems(items as Array<IAction>);
       this.selectedItem = selectedItem;
@@ -171,13 +175,16 @@ export class ListModel<T extends BaseAction = Action> extends ActionContainer<T>
   }
   public setItems(items: Array<IAction>, sortByVisibleIndex = true): void {
     super.setItems(items, sortByVisibleIndex);
-    if (this.elementId) {
-      this.renderedActions.forEach((action: IAction) => { action.elementId = this.elementId + action.id; });
-    }
+    this.updateActionsIds();
     if (!this.isAllDataLoaded && !!this.actions.length) {
       this.actions.push(this.loadingIndicator);
     }
   }
+  private updateActionsIds(): void {
+    if (this.elementId) {
+      this.renderedActions.forEach((action: IAction) => { action.elementId = this.elementId + action.id; });
+    }
+  }
   public setSearchEnabled(newValue: boolean): void {
     this.searchEnabled = newValue;
     this.showSearchClearButton = newValue;
@@ -311,7 +318,11 @@ export class ListModel<T extends BaseAction = Action> extends ActionContainer<T>
   }
   public onPointerDown(event: PointerEvent, item: any) { }
   public refresh(): void { // used in popup
-    this.filterString = "";
+    if(this.filterString !== "") {
+      this.filterString = "";
+    } else {
+      this.updateIsEmpty();
+    }
     this.resetFocusedItem();
   }
   public onClickSearchClearButton(event: any) {

packages/survey-core/src/page.ts

@@ -108,10 +108,6 @@ export class PageModel extends PanelModelBase implements IPage {
       this.removeSelfFromList(this.survey.pages);
     }
   }
-  public onFirstRendering(): void {
-    if (this.wasShown) return;
-    super.onFirstRendering();
-  }
   /**
    * The visible index of the page. It has values from 0 to visible page count - 1.
    * @see SurveyModel.visiblePages

packages/survey-core/src/panel.ts

@@ -396,15 +396,16 @@ export class PanelModelBase extends SurveyElement<Question>
       }
     );
     this.registerPropertyChangedHandlers(["title"], () => {
-      this.calcHasTextInTitle();
+      this.resetHasTextInTitle();
     });
 
     this.dragDropPanelHelper = new DragDropPanelHelperV1(this);
   }
   public getType(): string {
     return "panelbase";
   }
-  public setSurveyImpl(value: ISurveyImpl, isLight?: boolean) {
+  public setSurveyImpl(value: ISurveyImpl, isLight?: boolean): void {
+    //if(this.surveyImpl === value) return; TODO refactor
     this.blockAnimations();
     super.setSurveyImpl(value, isLight);
     if (this.isDesignMode) this.onVisibleChanged();
@@ -425,11 +426,12 @@ export class PanelModelBase extends SurveyElement<Question>
 
   @property({ defaultValue: true }) showTitle: boolean;
 
-  @property({ defaultValue: false }) public hasTextInTitle: boolean;
-  protected calcHasTextInTitle(): void {
-    this.hasTextInTitle = !!this.title;
+  public get hasTextInTitle(): boolean {
+    return this.getPropertyValue("hasTextInTitle", undefined, (): boolean => !!this.title);
+  }
+  private resetHasTextInTitle(): void {
+    this.resetPropertyValue("hasTextInTitle");
   }
-
   get hasTitle(): boolean {
     return (
       (this.canShowTitle(this.survey) && (this.hasTextInTitle || this.locTitle.textOrHtml.length > 0)) ||
@@ -1357,14 +1359,11 @@ export class PanelModelBase extends SurveyElement<Question>
     }
     this.onElementVisibilityChanged(this);
     this.releaseAnimations();
-    this.calcHasTextInTitle();
   }
-  public onFirstRendering(): void {
-    super.onFirstRendering();
-    for (var i = 0; i < this.elements.length; i++) {
-      this.elements[i].onFirstRendering();
-    }
+  protected onFirstRenderingCore(): void {
+    super.onFirstRenderingCore();
     this.onRowsChanged();
+    this.elements.forEach(el => el.onFirstRendering());
   }
   public updateRows(): void {
     if (this.isLoadingFromJson) return;
@@ -1759,22 +1758,20 @@ export class PanelModelBase extends SurveyElement<Question>
   protected getPanelStartIndex(index: number): number {
     return index;
   }
-  protected isContinueNumbering() {
-    return true;
-  }
+  protected isContinueNumbering(): boolean { return true; }
   public get isReadOnly(): boolean {
     var isParentReadOnly = !!this.parent && this.parent.isReadOnly;
     var isSurveyReadOnly = !!this.survey && this.survey.isDisplayMode;
     return this.readOnly || isParentReadOnly || isSurveyReadOnly;
   }
-  protected onReadOnlyChanged() {
+  protected onReadOnlyChanged(): void {
     for (var i = 0; i < this.elements.length; i++) {
       var el = <SurveyElement>(<any>this.elements[i]);
       el.setPropertyValue("isReadOnly", el.isReadOnly);
     }
     super.onReadOnlyChanged();
   }
-  public updateElementCss(reNew?: boolean) {
+  public updateElementCss(reNew?: boolean): void {
     super.updateElementCss(reNew);
     for (let i = 0; i < this.elements.length; i++) {
       const el = <SurveyElement>(<any>this.elements[i]);
@@ -2068,7 +2065,7 @@ export class PanelModel extends PanelModelBase implements IElement {
       }
     });
     this.registerPropertyChangedHandlers(
-      ["indent", "innerIndent", "rightIndent"], () => { this.onIndentChanged(); });
+      ["indent", "innerIndent", "rightIndent"], () => { this.resetIndents(); });
     this.registerPropertyChangedHandlers(["colSpan"], () => { this.parent?.updateColumns(); });
   }
   public getType(): string {
@@ -2083,15 +2080,6 @@ export class PanelModel extends PanelModelBase implements IElement {
     }
     return super.getSurvey(live);
   }
-  onSurveyLoad() {
-    super.onSurveyLoad();
-    this.onIndentChanged();
-  }
-  protected onSetData() {
-    super.onSetData();
-    this.onIndentChanged();
-    this.calcHasTextInTitle();
-  }
   public get isPanel(): boolean {
     return true;
   }
@@ -2269,24 +2257,33 @@ export class PanelModel extends PanelModelBase implements IElement {
     this.setPropertyValue("allowAdaptiveActions", val);
   }
   get innerPaddingLeft(): string {
-    return this.getPropertyValue("innerPaddingLeft", "");
+    const func = (): string => {
+      return this.getIndentSize(this.innerIndent);
+    };
+    return this.getPropertyValue("innerPaddingLeft", undefined, func);
   }
   set innerPaddingLeft(val: string) {
     this.setPropertyValue("innerPaddingLeft", val);
   }
-  private onIndentChanged() {
-    if (!this.getSurvey()) return;
-    this.innerPaddingLeft = this.getIndentSize(this.innerIndent);
-    this.paddingLeft = this.getIndentSize(this.indent);
-    this.paddingRight = this.getIndentSize(this.rightIndent);
+  protected calcPaddingLeft(): string {
+    return this.getIndentSize(this.indent);
   }
+  protected calcPaddingRight(): string {
+    return this.getIndentSize(this.rightIndent);
+  }
+  protected resetIndents(): void {
+    this.resetPropertyValue("innerPaddingLeft");
+    super.resetIndents();
+  }
+
   private getIndentSize(indent: number): string {
+    if(!this.survey) return undefined;
     if (indent < 1) return "";
     var css = (<any>this).survey["css"];
-    if (!css || !css.question.indent) return "";
+    if (!css || !css.question || !css.question.indent) return "";
     return indent * css.question.indent + "px";
   }
-  public clearOnDeletingContainer() {
+  public clearOnDeletingContainer(): void {
     this.elements.forEach((element) => {
       if (element instanceof Question || element instanceof PanelModel) {
         element.clearOnDeletingContainer();