Merge branch 'master' into feature/preact

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [1.10.6](https://github.com/surveyjs/survey-library/compare/v1.10.5...v1.10.6) (2024-05-28)
+
 ## [1.10.5](https://github.com/surveyjs/survey-library/compare/v1.10.4...v1.10.5) (2024-05-21)
 
 ## [1.10.4](https://github.com/surveyjs/survey-library/compare/v1.10.3...v1.10.4) (2024-05-15)

package.json

@@ -100,7 +100,7 @@
     "prepare": "husky install",
     "test:postcss": "postcss build/survey-core/defaultV2.css --silent  -u postcss-calc -u autoprefixer -u postcss-fail-on-warn -o defaultV2.postcss.css && rimraf defaultV2.postcss.css"
   },
-  "version": "1.10.5",
+  "version": "1.10.6",
   "name": "survey-library",
   "private": true,
   "devDependencies": {

packages/survey-angular-ui/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [1.10.6](https://github.com/surveyjs/surveyjs/compare/v1.10.5...v1.10.6) (2024-05-28)
+
 ## [1.10.5](https://github.com/surveyjs/surveyjs/compare/v1.10.4...v1.10.5) (2024-05-21)
 
 ## [1.10.4](https://github.com/surveyjs/surveyjs/compare/v1.10.3...v1.10.4) (2024-05-15)

packages/survey-angular-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-angular-ui",
-  "version": "1.10.5",
+  "version": "1.10.6",
   "description": "survey.js is a JavaScript Survey Library. It is a modern way to add a survey to your website. It uses JSON for survey metadata and results.",
   "keywords": [
     "Survey",

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

@@ -46,6 +46,8 @@ import { SurveyHeaderComponent } from "./components/survey-header/survey-header.
 import { DynamicHeadComponent } from "./components/element-title/dynamic-head.component";
 import { ListComponent } from "./components/list/list.component";
 import { ListItemComponent } from "./components/list/list-item.component";
+import { ListItemContentComponent } from "./components/list/list-item-content.component";
+import { ListItemGroupComponent } from "./components/list/list-item-group.component";
 import { RatingItemComponent } from "./components/rating/rating-item.component";
 import { RatingItemStarComponent } from "./components/rating/rating-item-star.component";
 import { RatingItemSmileyComponent } from "./components/rating/rating-item-smiley.component";
@@ -129,7 +131,7 @@ import { SvgBundleComponent } from "./svgbundle.component";
     QuestionSkeletonComponent, TextQuestionComponent, RadiogroupComponent, RadiogroupItemComponent, CheckboxComponent, CheckboxItemComponent,
     DropdownComponent, DropdownQuestionComponent, DropdownSelectComponent, DropdownOptionItemComponent,
     PopupComponent, PopupBaseContainerComponent, PopupPointerComponent,
-    CharacterCounterComponent, ListComponent, ListItemComponent, RatingItemComponent, RatingItemStarComponent, RatingItemSmileyComponent,
+    CharacterCounterComponent, ListComponent, ListItemComponent, ListItemContentComponent, ListItemGroupComponent, RatingItemComponent, RatingItemStarComponent, RatingItemSmileyComponent,
     TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
     ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
     SelectBaseItemComponent, SelectBaseComponent, SurveyCommentComponent, SurveyCommentOtherComponent, ElementHeaderComponent, ElementTitleActionsComponent, ElementTitleComponent, DynamicHeadComponent, RowComponent,
@@ -151,7 +153,7 @@ import { SvgBundleComponent } from "./svgbundle.component";
     CharacterCounterComponent,
     DropdownComponent, DropdownQuestionComponent, DropdownSelectComponent, DropdownOptionItemComponent,
     PopupComponent, PopupBaseContainerComponent, PopupPointerComponent,
-    CharacterCounterComponent, ListComponent, ListItemComponent, RatingItemComponent, RatingItemStarComponent, RatingItemSmileyComponent,
+    CharacterCounterComponent, ListComponent, ListItemComponent, ListItemContentComponent, ListItemGroupComponent, RatingItemComponent, RatingItemStarComponent, RatingItemSmileyComponent,
     TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
     ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
     SelectBaseItemComponent, SelectBaseComponent, SurveyCommentComponent, SurveyCommentOtherComponent, ElementHeaderComponent, ElementTitleComponent, DynamicHeadComponent, RowComponent,

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

@@ -50,6 +50,8 @@ export * from "./components/notifier/notifier.component";
 export * from "./components/element-title/dynamic-head.component";
 export * from "./components/list/list.component";
 export * from "./components/list/list-item.component";
+export * from "./components/list/list-item-content.component";
+export * from "./components/list/list-item-group.component";
 export * from "./components/rating/rating-item.component";
 export * from "./components/rating/rating-item-star.component";
 export * from "./components/rating/rating-item-smiley.component";

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

@@ -68,6 +68,7 @@ export abstract class BaseAngular<T extends Base = Base> extends EmbeddedViewCon
           this.update(key);
         }
       };
+      stateElement.enableOnElementRenderedEvent();
     }
   }
   private unMakeBaseElementAngular(stateElement?: Base) {
@@ -82,6 +83,7 @@ export abstract class BaseAngular<T extends Base = Base> extends EmbeddedViewCon
           val["onArrayChanged"] = () => { };
         }
       });
+      stateElement.disableOnElementRenderedEvent();
     }
   }
 
@@ -120,6 +122,10 @@ export abstract class BaseAngular<T extends Base = Base> extends EmbeddedViewCon
   }
   protected afterUpdate(isSync: boolean = false): void {
     this.setIsRendering(false);
+    const model = this.getModel();
+    if(model && !this.isDestroyed) {
+      model.afterRerender();
+    }
   }
   ngAfterViewChecked(): void {
     this.setIsRendering(false);

packages/survey-angular-ui/src/components/list/list-item-content.component.html

@@ -0,0 +1,7 @@
+<ng-template #template>
+<svg *ngIf="model.iconName" [class]="listModel.cssClasses.itemIcon" [iconName]="model.iconName" [size]="model.iconSize"
+  sv-ng-svg-icon></svg>
+<sv-ng-string [model]="model.locTitle"></sv-ng-string>
+<svg *ngIf="model.markerIconName" [class]="model.cssClasses.itemMarkerIcon" [iconName]="model.markerIconName" [size]="model.markerIconSize"
+  sv-ng-svg-icon></svg>
+</ng-template>

packages/survey-angular-ui/src/components/list/list-item-content.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input } from "@angular/core";
+import { ListModel, Action } from "survey-core";
+import { BaseAngular } from "../../base-angular";
+import { AngularComponentFactory } from "../../component-factory";
+
+@Component({
+  selector: "sv-ng-list-item-content, '[sv-ng-list-item-content]'",
+  templateUrl: "./list-item-content.component.html",
+  styleUrls: ["../../hide-host.scss"],
+})
+
+export class ListItemContentComponent extends BaseAngular {
+  @Input() element: any;
+  @Input() model!: Action;
+  @Input() listModel!: ListModel;
+
+  getModel() {
+    return this.model;
+  }
+}
+
+AngularComponentFactory.Instance.registerComponent("sv-list-item-content", ListItemContentComponent);

packages/survey-angular-ui/src/components/list/list-item-group.component.html

@@ -0,0 +1,4 @@
+<ng-template #template>
+  <sv-ng-list-item-content [model]="model" [listModel]="listModel"></sv-ng-list-item-content>
+  <sv-ng-popup [popupModel]="model.popupModel"></sv-ng-popup>
+</ng-template>

packages/survey-angular-ui/src/components/list/list-item-group.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input } from "@angular/core";
+import { ListModel, Action } from "survey-core";
+import { BaseAngular } from "../../base-angular";
+import { AngularComponentFactory } from "../../component-factory";
+
+@Component({
+  selector: "sv-ng-list-item-group, '[sv-ng-list-item-group]'",
+  templateUrl: "./list-item-group.component.html",
+  styleUrls: ["../../hide-host.scss"],
+})
+
+export class ListItemGroupComponent extends BaseAngular {
+  @Input() element: any;
+  @Input() model!: Action;
+  @Input() listModel!: ListModel;
+
+  getModel() {
+    return this.model;
+  }
+}
+
+AngularComponentFactory.Instance.registerComponent("sv-list-item-group", ListItemGroupComponent);

packages/survey-angular-ui/src/components/list/list-item.component.html

@@ -3,15 +3,10 @@
     <ng-container *ngIf="model.needSeparator">
     <div [class]="listModel.cssClasses.itemSeparator"></div>
     </ng-container>
-    <div [class]="listModel.cssClasses.itemBody" [style.paddingInlineStart]="paddingLeft" [attr.title]="model.locTitle.calculatedText">
-    <ng-container *ngIf="!model.component">
-      <svg *ngIf="model.iconName" [class]="listModel.cssClasses.itemIcon" [iconName]="model.iconName" [size]="model.iconSize"
-        sv-ng-svg-icon></svg>
-      <sv-ng-string [model]="model.locTitle"></sv-ng-string>
-    </ng-container>
-    <ng-container *ngIf="model.component">
-      <ng-template [component]="{ name: model.component, data: { model: model } }"></ng-template>
-    </ng-container>
+    <div [class]="listModel.cssClasses.itemBody" [style.paddingInlineStart]="paddingLeft" [attr.title]="model.locTitle.calculatedText"
+    (mouseover)="listModel.onItemHover(model)"
+    (mouseleave)="listModel.onItemLeave(model)">
+    <ng-template [component]="{ name: model.component || 'sv-list-item-content', data: { model: model, listModel: listModel } }"></ng-template>
     </div>
   </li>
 </ng-template>

packages/survey-angular-ui/src/components/popup/popup.component.ts

@@ -10,6 +10,7 @@ import { PopupBaseViewModel, PopupModel, createPopupViewModel } from "survey-cor
 export class PopupComponent extends BaseAngular<PopupModel> {
   @Input() popupModel!: PopupModel;
   @Input() getTarget?: (container: HTMLElement) => HTMLElement;
+  @Input() getArea?: (container: HTMLElement) => HTMLElement;
   @ViewChild("containerRef") containerRef!: ElementRef<HTMLDivElement>;
 
   public model!: PopupBaseViewModel;
@@ -31,7 +32,9 @@ export class PopupComponent extends BaseAngular<PopupModel> {
   ngAfterViewInit(): void {
     if (!!this.containerRef?.nativeElement) {
       const container = this.containerRef.nativeElement as HTMLElement;
-      this.model.setComponentElement(container, this.getTarget ? this.getTarget(container.parentElement as HTMLElement) : container?.parentElement?.parentElement);
+      this.model.setComponentElement(container,
+        this.getTarget ? this.getTarget(container.parentElement as HTMLElement) : container?.parentElement?.parentElement,
+        this.getArea ? this.getArea(container.parentElement as HTMLElement) : undefined);
     }
   }
   override ngOnInit() {

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

@@ -1,25 +1,25 @@
 <div *ngIf="!model.selectToRankEnabled" [class]="model.rootClass" #contentElement>
-  <ng-container *ngFor="let item of model.rankingChoices; index as index; trackBy: trackItemBy">
+  <ng-container *ngFor="let item of model.renderedRankingChoices; index as index; trackBy: trackItemBy">
     <ng-template [component]="{ name: getItemValueComponentName(item), data: getItemValueComponentData(item, index) }"></ng-template>
   </ng-container>
 </div>
 
 <div *ngIf="model.selectToRankEnabled" [class]="model.rootClass" #contentElement>
   <div [class]='model.getContainerClasses("from")' data-ranking="from-container">
-    <ng-container *ngFor="let item of model.unRankingChoices; index as index; trackBy: trackItemBy">
+    <ng-container *ngFor="let item of model.renderedUnRankingChoices; index as index; trackBy: trackItemBy">
       <ng-template [component]="{ name: getItemValueComponentName(item), data: getItemValueComponentData(item, index, true) }"></ng-template>
     </ng-container>
 
-    <div *ngIf="model.unRankingChoices.length === 0" [class]="model.cssClasses.containerPlaceholder" [model]="$any(model).locSelectToRankEmptyRankedAreaText" sv-ng-string></div>
+    <div *ngIf="model.renderedUnRankingChoices.length === 0" [class]="model.cssClasses.containerPlaceholder" [model]="$any(model).locSelectToRankEmptyRankedAreaText" sv-ng-string></div>
   </div>
 
   <div [class]="model.cssClasses.containersDivider"></div>
 
   <div [class]='model.getContainerClasses("to")' data-ranking="to-container">
-    <ng-container *ngFor="let item of model.rankingChoices; index as index; trackBy: trackItemBy">
+    <ng-container *ngFor="let item of model.renderedRankingChoices; index as index; trackBy: trackItemBy">
       <ng-template [component]="{ name: getItemValueComponentName(item), data: getItemValueComponentData(item, index) }"></ng-template>
     </ng-container>
 
-    <div *ngIf="model.rankingChoices.length === 0" [class]="model.cssClasses.containerPlaceholder" [model]="$any(model).locSelectToRankEmptyUnrankedAreaText" sv-ng-string></div>
+    <div *ngIf="model.renderedRankingChoices.length === 0" [class]="model.cssClasses.containerPlaceholder" [model]="$any(model).locSelectToRankEmptyUnrankedAreaText" sv-ng-string></div>
   </div>
 </div>

packages/survey-vue3-ui/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [1.10.6](https://github.com/surveyjs/survey-library/compare/v1.10.5...v1.10.6) (2024-05-28)
+
 ## [1.10.5](https://github.com/surveyjs/survey-library/compare/v1.10.4...v1.10.5) (2024-05-21)
 
 ## [1.10.4](https://github.com/surveyjs/survey-library/compare/v1.10.3...v1.10.4) (2024-05-15)

packages/survey-vue3-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-vue3-ui",
-  "version": "1.10.5",
+  "version": "1.10.6",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",

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

@@ -107,16 +107,18 @@ const getCellStyle = () => {
   return null;
 };
 const getCellIndex = () => (props.cell as any).index || "";
-const onVisibilityChanged = () =>
-  (isVisible.value = props.cell.question.isVisible);
+const onVisibilityChanged = () => {
+  if (!props.cell.hasQuestion || !props.question || !props.question.survey)
+    return;
+  isVisible.value = props.cell.question.isVisible;
+};
 const getComponentName = (element: Question | any) => {
   return getComponent(element);
 };
-
+onVisibilityChanged();
 onMounted(() => {
   if (!props.cell.hasQuestion || !props.question || !props.question.survey)
     return;
-  onVisibilityChanged();
   props.cell.question.registerPropertyChangedHandlers(["isVisible"], () => {
     onVisibilityChanged();
   });

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

@@ -30,7 +30,7 @@
     <component :is="contentComponentName" v-bind="contentComponentData">
       <div
         :class="getContentClass(element) || undefined"
-        v-show="element.renderedIsExpanded"
+        :style="{ display: !element.renderedIsExpanded ? 'none' : undefined }"
         role="presentation"
       >
         <survey-errors

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

@@ -2,7 +2,7 @@
   <div :class="question.rootClass" ref="root">
     <template v-if="!question.selectToRankEnabled">
       <component
-        v-for="(item, index) in question.rankingChoices"
+        v-for="(item, index) in question.renderedRankingChoices"
         :key="item.value + '-' + index + '-item'"
         :is="getItemValueComponentName(item)"
         v-bind="getItemValueComponentData(item, index)"
@@ -15,17 +15,19 @@
       data-ranking="from-container"
     >
       <component
-        v-for="(item, index) in question.unRankingChoices"
+        v-for="(item, index) in question.renderedUnRankingChoices"
         :key="item.value + '-' + index + '-item'"
         :is="getItemValueComponentName(item)"
         v-bind="getItemValueComponentData(item, index, true)"
       ></component>
 
       <div
-        v-if="question.unRankingChoices.length === 0"
+        v-if="question.renderedUnRankingChoices.length === 0"
         :class="question.cssClasses.containerPlaceholder"
       >
-        <survey-string :locString="question.locSelectToRankEmptyRankedAreaText"></survey-string>
+        <survey-string
+          :locString="question.locSelectToRankEmptyRankedAreaText"
+        ></survey-string>
       </div>
     </div>
 
@@ -40,17 +42,19 @@
       data-ranking="to-container"
     >
       <component
-        v-for="(item, index) in question.rankingChoices"
+        v-for="(item, index) in question.renderedRankingChoices"
         :key="item.value + '-' + index + '-item'"
         :is="getItemValueComponentName(item)"
         v-bind="getItemValueComponentData(item, index)"
       ></component>
 
       <div
-        v-if="question.rankingChoices.length === 0"
+        v-if="question.renderedRankingChoices.length === 0"
         :class="question.cssClasses.containerPlaceholder"
       >
-        <survey-string :locString="question.locSelectToRankEmptyUnrankedAreaText"></survey-string>
+        <survey-string
+          :locString="question.locSelectToRankEmptyUnrankedAreaText"
+        ></survey-string>
       </div>
     </div>
   </div>

packages/survey-vue3-ui/src/base.ts

@@ -11,6 +11,9 @@ import {
   type Ref,
   onBeforeUnmount,
   watchEffect,
+  nextTick,
+  onBeforeUpdate,
+  onUpdated,
 } from "vue";
 Base.createPropertiesHash = () => {
   const res = shallowReactive({});
@@ -51,6 +54,7 @@ export function makeReactive(surveyElement: Base) {
       }
     };
   }
+  surveyElement.enableOnElementRenderedEvent();
   (surveyElement as any).__vueImplemented++;
 }
 
@@ -67,6 +71,7 @@ export function unMakeReactive(surveyElement?: Base) {
       }
     });
     delete (surveyElement as any).__vueImplemented;
+    surveyElement.disableOnElementRenderedEvent();
     surveyElement.createArrayCoreHandler = undefined as any;
     surveyElement.getPropertyValueCoreHandler = undefined as any;
     surveyElement.setPropertyValueCoreHandler = undefined as any;
@@ -94,6 +99,9 @@ export function useBase<T extends Base>(
       immediate: true,
     }
   );
+  onUpdated(() => {
+    getModel().afterRerender();
+  });
   onBeforeUnmount(() => {
     const model = getModel();
     if (model) {

packages/survey-vue3-ui/src/components/header/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="model.headerClasses" :style="{ height: model.renderedHeight }">
+  <div v-if="survey.headerView === 'advanced'" :class="model.headerClasses" :style="{ height: model.renderedHeight }">
     <div
       v-if="!!model.backgroundImage"
       :class="model.backgroundImageClasses"

packages/survey-vue3-ui/src/components/list/ListItem.vue

@@ -20,15 +20,10 @@
       :style="{ paddingInlineStart: model.getItemIndent(item) }"
       v-bind:class="model.cssClasses.itemBody"
       :title="item.locTitle.calculatedText"
+      @mouseover="(e) => model.onItemHover(item)"
+      @mouseleave="(e) => model.onItemLeave(item)"
     >
-      <sv-svg-icon
-        v-if="item.iconName && !item.component"
-        v-bind:class="model.cssClasses.itemIcon"
-        :iconName="item.iconName"
-        :size="item.iconSize"
-      ></sv-svg-icon>
-      <survey-string v-if="!item.component" :locString="item.locTitle" />
-      <component v-if="item.component" :is="item.component" :item="item">
+      <component :is="item.component || 'sv-list-item-content'" :item="item" :model="model">
       </component>
     </div>
   </li>