Merge commit '1e9ed297162430566de10c954cf0a7f3218acb13' into issue/74…

…40-WAVE-Alert-Level-A-and-Level-AA---Skipped-heading-level-because-a-survey-title-uses-H5-and-survey-description-uses-H3---The-H4-tag-is-missing

build-packages.yml

@@ -746,6 +746,7 @@ jobs:
     - checkout: Service
       persistCredentials: true
       clean: true
+      fetchDepth: 1
 
     - task: NodeTool@0
       inputs:
@@ -916,9 +917,9 @@ jobs:
         $env:GIT_REDIRECT_STDERR = '2>&1'
         git config --global user.email "[email protected]"
         git config --global user.name "dmitrykurmanov"
-        git checkout master
         git pull origin master
-        git fetch --tags --force
+        git fetch origin master --tags --force
+        git checkout master
         git add surveyjs.io/App_Data/DocsLibrary
         git commit -m "updated survey-library docs [azurepipelines skip]"
         git pull origin master

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

@@ -118,6 +118,7 @@ import { HeaderCellComponent } from "./components/header/header-cell.component";
 import { HeaderMobileComponent } from "./components/header/header-mobile.component";
 import { ChooseFileBtn } from "./components/file/choose-file.component";
 import { FilePreviewComponent } from "./components/file/file-preview.component";
+import { SvgBundleComponent } from "./svgbundle.component";
 
 @NgModule({
   declarations: [
@@ -135,7 +136,7 @@ import { FilePreviewComponent } from "./components/file/file-preview.component";
     MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent, MatrixCellComponent, MatrixTableComponent, MatrixDropdownComponent,
     MatrixDynamicComponent, MatrixDetailButtonComponent, MatrixDynamicRemoveButtonComponent, MatrixDynamicDragDropIconComponent, MatrixRequiredHeader, ExpressionComponent, SafeResourceUrlPipe, BrandInfoComponent,
     CustomQuestionComponent, CompositeQuestionComponent, ButtonGroupItemComponent, ButtonGroupQuestionComponent, MatrixRowComponent, ModalComponent, LogoImageComponent, SkeletonComponent, TimerPanelComponent, PaneldynamicRemoveButtonComponent,
-    NotifierComponent, ComponentsContainerComponent, MultipleTextRowComponent, LoadingIndicatorComponent, HeaderComponent, HeaderCellComponent, HeaderMobileComponent, ChooseFileBtn, FilePreviewComponent
+    NotifierComponent, ComponentsContainerComponent, MultipleTextRowComponent, LoadingIndicatorComponent, HeaderComponent, HeaderCellComponent, HeaderMobileComponent, ChooseFileBtn, FilePreviewComponent, SvgBundleComponent
   ],
   imports: [
     CommonModule, FormsModule
@@ -156,7 +157,7 @@ import { FilePreviewComponent } from "./components/file/file-preview.component";
     MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent, MatrixCellComponent, MatrixTableComponent, MatrixDropdownComponent,
     MatrixDynamicComponent, MatrixDetailButtonComponent, MatrixDynamicRemoveButtonComponent, MatrixDynamicDragDropIconComponent, MatrixRequiredHeader, ExpressionComponent, SafeResourceUrlPipe,
     CustomQuestionComponent, CompositeQuestionComponent, ButtonGroupQuestionComponent, ModalComponent, LogoImageComponent, SkeletonComponent, TimerPanelComponent, PaneldynamicRemoveButtonComponent,
-    NotifierComponent, ComponentsContainerComponent, MultipleTextRowComponent, LoadingIndicatorComponent, HeaderComponent, HeaderCellComponent, HeaderMobileComponent, FilePreviewComponent
+    NotifierComponent, ComponentsContainerComponent, MultipleTextRowComponent, LoadingIndicatorComponent, HeaderComponent, HeaderCellComponent, HeaderMobileComponent, FilePreviewComponent, SvgBundleComponent
   ],
   providers: [PopupService],
 })

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

@@ -113,6 +113,7 @@ export * from "./components/loading-indicator/loading-indicator.component";
 export * from "./components/header/header.component";
 export * from "./components/header/header-cell.component";
 export * from "./components/header/header-mobile.component";
+export * from "./svgbundle.component";
 
 export * from "./component-factory";
 export * from "./angular-ui.module";

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

@@ -1,5 +1,6 @@
 <ng-template #template>
   <div #surveyContainer *ngIf="!!model" [class]="model.getRootCss()" [style]="model.themeVariables">
+    <sv-svg-bundle *ngIf="model.needRenderIcons"></sv-svg-bundle>
     <div [class]="model.wrapperFormCss">
       <div *ngIf="!!model.renderBackgroundImage" [class]="model.css.rootBackgroundImage" [style]="model.backgroundImageStyle"></div>
       <form onsubmit="return false;">

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

@@ -26,12 +26,6 @@ export class SurveyContentComponent extends BaseAngular<SurveyModel> implements
     }
     this.isSurveyUpdated = true;
   }
-  override ngOnInit(): void {
-    super.ngOnInit();
-    if (!!this.model && this.model["needRenderIcons"]) {
-      SvgRegistry.renderIcons();
-    }
-  }
   override ngOnDestroy(): void {
     super.ngOnDestroy();
     if (!!this.model) {

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

@@ -0,0 +1,13 @@
+import { SvgRegistry } from "survey-core";
+import { Component, ElementRef, OnInit, ViewChild } from "@angular/core";
+@Component({
+  selector: "sv-svg-bundle",
+  template: "<svg id='sv-icon-holder-global-container' #svgContainer></svg>",
+  styles: [":host { display: none; }"]
+})
+export class SvgBundleComponent implements OnInit {
+  @ViewChild("svgContainer", { static: true }) svgContainer!: ElementRef<SVGElement>;
+  ngOnInit(): void {
+    this.svgContainer.nativeElement.innerHTML = SvgRegistry.iconsRenderedHtml();
+  }
+}

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

@@ -4,6 +4,7 @@
     :style="vueSurvey.themeVariables"
     ref="root"
   >
+    <sv-svg-bundle v-if="vueSurvey.needRenderIcons"></sv-svg-bundle>
     <div :class="vueSurvey.wrapperFormCss">
       <survey-popup-modal></survey-popup-modal>
       <div
@@ -107,7 +108,7 @@
 </template>
 
 <script lang="ts" setup>
-import { SvgRegistry, SurveyModel } from "survey-core";
+import type { SurveyModel } from "survey-core";
 import {
   toRaw,
   ref,
@@ -161,9 +162,6 @@ useBase(() => vueSurvey.value);
 
 onMounted(() => {
   if (!vueSurvey.value) return;
-  if (vueSurvey.value["needRenderIcons"]) {
-    SvgRegistry.renderIcons();
-  }
   var el = root.value;
   if (el) vueSurvey.value.afterRenderSurvey(el);
   vueSurvey.value.renderCallback = () => {

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

@@ -0,0 +1,11 @@
+<template>
+  <svg id="sv-icon-holder-global-container" ref="root" v-show="false"></svg>
+</template>
+<script setup lang="ts">
+import { SvgRegistry } from "survey-core";
+import { onMounted, ref } from "vue";
+const root = ref();
+onMounted(() => {
+  root.value.innerHTML = SvgRegistry.iconsRenderedHtml();
+});
+</script>

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

@@ -126,12 +126,15 @@ import FilePreview from "./components/file/FilePreview.vue";
 import ButtonGroup from "./buttongroup/ButtonGroup.vue";
 import ButtonGroupItem from "./buttongroup/ButtonGroupItem.vue";
 import Logo from "./Logo.vue";
+import SvgBundle from "./SvgBundle.vue";
+
 export { useBase, useLocString, useQuestion } from "./base";
 
 SurveyModel.platform = "vue3";
 
 function registerComponents(app: App) {
   app.component("SurveyComponent", SurveyVue);
+  app.component("sv-svg-bundle", SvgBundle);
   app.component("PopupSurveyComponent", PopupSurvey);
   app.component("survey", SurveyVue);
   app.component("popup-survey", PopupSurvey);

src/entries/knockout-ui-model.ts

@@ -82,6 +82,7 @@ export * from "../knockout/components/paneldynamic-actions/paneldynamic-actions"
 export * from "../knockout/components/brand-info/brand-info";
 export * from "../knockout/components/notifier/notifier";
 export * from "../knockout/components/loading-indicator/loading-indicator";
+export * from "../knockout/svg-bundle";
 
 import * as ko from "knockout";
 import { SurveyModel } from "survey-core";

src/entries/react-ui-model.ts

@@ -106,5 +106,7 @@ export { SurveyLocStringViewer } from "../react/string-viewer";
 export { SurveyLocStringEditor } from "../react/string-editor";
 export { LoadingIndicatorComponent } from "../react/components/loading-indicator";
 
+export { SvgBundleComponent } from "../react/svgbundle";
+
 //Uncomment to include the "date" question type.
 //export {default as SurveyQuestionDate} from "../plugins/react/reactquestiondate";

src/entries/vue-ui-model.ts

@@ -105,6 +105,8 @@ export { HeaderCellViewModel } from "../vue/components/header/header-cell.vue";
 export { HeaderMobileViewModel } from "../vue/components/header/header-mobile.vue";
 export { HeaderViewModel } from "../vue/components/header/header.vue";
 
+export { SvgBundle } from "../vue/svgbundle.vue";
+
 import { SurveyModel } from "survey-core";
 
 SurveyModel.platform = "vue";

src/knockout/kosurvey.ts

@@ -90,9 +90,6 @@ export class SurveyImplementor extends ImplementorBase {
     );
   }
   public koEventAfterRender(element: any, survey: any) {
-    if (survey["needRenderIcons"]) {
-      SvgRegistry.renderIcons();
-    }
     survey.afterRenderSurvey(element);
   }
   public dispose(): void {

src/knockout/svg-bundle.ts

@@ -0,0 +1,13 @@
+import * as ko from "knockout";
+import { SvgRegistry } from "survey-core";
+
+ko.components.register("sv-svg-bundle", {
+  viewModel: {
+    createViewModel: (params: any, componentInfo: any) => {
+      const element = componentInfo.element.querySelector && componentInfo.element.querySelector("svg") || componentInfo.element.nextElementSibling;
+      element.innerHTML = SvgRegistry.iconsRenderedHtml();
+      return params;
+    }
+  },
+  template: "<svg id='sv-icon-holder-global-container' style=\"display:none\"></svg>"
+});

src/knockout/templates/index.html

@@ -5,6 +5,10 @@
 
 <script type="text/html" id="survey-content-template">
   <div data-bind="css: rootCss, elementStyle: themeVariables">
+    <!-- ko if: needRenderIcons -->
+      <!-- ko component: { name: 'sv-svg-bundle'} -->
+      <!-- /ko -->
+    <!-- /ko -->
     <div data-bind="css: wrapperFormCss">
       <!-- ko if: !!renderBackgroundImage -->
       <div data-bind="css: css.rootBackgroundImage, elementStyle: backgroundImageStyle"></div>

src/react/reactSurvey.tsx

@@ -5,13 +5,12 @@ import { ISurveyCreator } from "./reactquestion";
 import { SurveyElementBase } from "./reactquestion_element";
 import { SurveyLocStringViewer } from "./string-viewer";
 import { SurveyHeader } from "./components/survey-header/survey-header";
-import { SurveyTimerPanel } from "./reacttimerpanel";
 import { ReactQuestionFactory } from "./reactquestion_factory";
 import { ReactElementFactory } from "./element-factory";
-import { SurveyActionBar } from "./components/action-bar/action-bar";
 import { BrandInfo } from "./components/brand-info";
 import { NotifierComponent } from "./components/notifier";
 import { ComponentsContainer } from "./components/components-container";
+import { SvgBundleComponent } from "./svgbundle";
 
 export class Survey extends SurveyElementBase<any, any>
   implements ISurveyCreator {
@@ -82,9 +81,6 @@ export class Survey extends SurveyElementBase<any, any>
     this.destroySurvey();
   }
   doRender(): JSX.Element {
-    if(this.survey["needRenderIcons"]) {
-      SvgRegistry.renderIcons();
-    }
     let renderResult: JSX.Element | null;
     if (this.survey.state == "completed") {
       renderResult = this.renderCompleted();
@@ -112,6 +108,7 @@ export class Survey extends SurveyElementBase<any, any>
 
     return (
       <div id={this.rootNodeId} ref={this.rootRef} className={cssClasses} style={this.survey.themeVariables}>
+        {this.survey.needRenderIcons ? <SvgBundleComponent></SvgBundleComponent> : null }
         <div className={this.survey.wrapperFormCss}>
           {backgroundImage}
           <form onSubmit={onSubmit}>

src/react/svgbundle.tsx

@@ -0,0 +1,23 @@
+
+import React from "react";
+import { SvgRegistry } from "survey-core";
+
+export class SvgBundleComponent extends React.Component {
+  private containerRef: React.RefObject<SVGSVGElement>;
+
+  constructor(props: any) {
+    super(props);
+    this.containerRef = React.createRef();
+  }
+  componentDidMount() {
+    if (!!this.containerRef.current) {
+      this.containerRef.current.innerHTML = SvgRegistry.iconsRenderedHtml();
+    }
+  }
+  render() {
+    const svgStyle = {
+      display: "none"
+    };
+    return <svg style={svgStyle} id="sv-icon-holder-global-container" ref={this.containerRef}></svg>;
+  }
+}

src/settings.ts

@@ -5,6 +5,9 @@ export type ISurveyEnvironment = {
   root: Document | ShadowRoot,
   rootElement: HTMLElement | ShadowRoot,
   popupMountContainer: HTMLElement | string,
+  /**
+   * @deprecated
+   */
   svgMountContainer: HTMLElement | string,
   stylesSheetsMountContainer: HTMLElement,
 }

src/survey.ts

@@ -7212,7 +7212,7 @@ export class SurveyModel extends SurveyElementCore
     this.isMovingQuestion = false;
   }
   get isQuestionDragging(): boolean { return this.isMovingQuestion; }
-  private needRenderIcons = true;
+  public needRenderIcons = true;
 
   private skippedPages: Array<{ from: any, to: any }> = [];
 

src/svgbundle.ts

@@ -1,6 +1,3 @@
-import { settings, ISurveyEnvironment } from "./settings";
-import { getElement } from "./utils/utils";
-
 class SvgIconData {
   [key: string]: string
 }
@@ -58,17 +55,6 @@ export class SvgIconRegistry {
   public iconsRenderedHtml() {
     return Object.keys(this.icons).map(icon => this.icons[icon]).join("");
   }
-  public renderIcons() {
-    const containerId = "sv-icon-holder-global-container";
-    if(!!settings.environment && !settings.environment.root.getElementById(containerId)) {
-      let iconsDiv = document.createElement("div");
-      iconsDiv.id = containerId;
-      iconsDiv.innerHTML = "<svg>" + this.iconsRenderedHtml() + "</svg>";
-      iconsDiv.style.display = "none";
-
-      getElement(settings.environment.svgMountContainer).appendChild(iconsDiv);
-    }
-  }
 }
 export var SvgRegistry: SvgIconRegistry = new SvgIconRegistry();
 export var SvgBundleViewModel: any;

src/vue/survey.vue

@@ -2,6 +2,7 @@
   <div :class="survey.getRootCss()"
     :style="vueSurvey.themeVariables"
     >
+    <sv-svg-bundle v-if="vueSurvey.needRenderIcons"></sv-svg-bundle>
     <div :class="vueSurvey.wrapperFormCss">
       <div v-if="vueSurvey.renderBackgroundImage" :class="css.rootBackgroundImage" :style="vueSurvey.backgroundImageStyle"></div>
       <form onsubmit="return false;">
@@ -80,9 +81,6 @@ export class Survey extends BaseVue {
 
   constructor() {
     super();
-    if(this.vueSurvey["needRenderIcons"]) {
-      SvgRegistry.renderIcons();
-    }
   }
   protected getModel(): Base {
     return this.vueSurvey;

src/vue/svgbundle.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg id="sv-icon-holder-global-container" ref="root" v-show="false"></svg>
+</template>
+<script lang="ts">
+import Vue from "vue";
+import { Component } from "vue-property-decorator";
+import { SvgRegistry } from "survey-core";
+
+@Component
+export class SvgBundle extends Vue {
+  mounted() {
+    this.$el.innerHTML = SvgRegistry.iconsRenderedHtml();
+  }
+}
+
+Vue.component("sv-svg-bundle", SvgBundle);
+export default SvgBundle;
+</script>

tests/markup/etalon_survey.ts

@@ -60,6 +60,9 @@ registerMarkupTests(
         ]
       },
       event: "onAfterRenderSurvey",
+      initSurvey(survey) {
+        survey.needRenderIcons = false;
+      },
       getSnapshot: el => {
         return el.children[0].children[0].outerHTML;
       },