survey-angular-ui 1.9.98 → 1.9.100

package/base-angular.d.ts

@@ -17,7 +17,7 @@ export declare abstract class BaseAngular<T extends Base = Base> extends Embedde
     ngOnDestroy(): void;
     private makeBaseElementAngular;
     private unMakeBaseElementAngular;
-    private update;
+    protected update(key?: string): void;
     private getChangeDetectorRef;
     protected getPropertiesToUpdateSync(): Array<string>;
     protected detectChanges(): void;

package/bundles/survey-angular-ui.umd.js

@@ -414,7 +414,7 @@
   }
   function __addDisposableResource(env, value, async) {
       if (value !== null && value !== void 0) {
-          if (typeof value !== "object")
+          if (typeof value !== "object" && typeof value !== "function")
               throw new TypeError("Object expected.");
           var dispose;
           if (async) {
@@ -597,7 +597,7 @@
           if (this.getIsRendering())
               return;
           this.beforeUpdate();
-          if (this.getPropertiesToUpdateSync().indexOf(key) > -1) {
+          if (key && this.getPropertiesToUpdateSync().indexOf(key) > -1) {
               this.detectChanges();
               this.afterUpdate();
           }
@@ -923,9 +923,9 @@
           this.popupService = popupService;
           this.functionDefined = false;
       }
-      ModalComponent.prototype.showDialog = function (dialogOptions, container) {
+      ModalComponent.prototype.showDialog = function (dialogOptions, rootElement) {
           var _this = this;
-          this.model = Survey.createPopupModalViewModel(dialogOptions, container);
+          this.model = Survey.createPopupModalViewModel(dialogOptions, rootElement);
           this.model.model.onHide = function () {
               _this.portalHost.detach();
               _this.model.dispose();
@@ -944,10 +944,14 @@
               var options = Survey.createDialogOptions(componentName, data, onApply, onCancel, undefined, undefined, cssClass, title, displayMode);
               return _this.showDialog(options);
           };
+          Survey.settings.showDialog = function (dialogOptions, rootElement) {
+              _this.showDialog(dialogOptions, rootElement);
+          };
       };
       ModalComponent.prototype.ngOnDestroy = function () {
           if (this.functionDefined) {
               Survey.settings.showModal = undefined;
+              Survey.settings.showDialog = undefined;
           }
       };
       return ModalComponent;
@@ -1386,6 +1390,84 @@
                   type: i0.Input
               }] } });
 
+  var SvgIconComponent = /** @class */ (function () {
+      function SvgIconComponent(viewContaierRef) {
+          this.viewContaierRef = viewContaierRef;
+      }
+      SvgIconComponent.prototype.createSvg = function () {
+          if (!!this.iconName) {
+              Survey__namespace.createSvg(this.size, this.width, this.height, this.iconName, this.viewContaierRef.element.nativeElement, this.title);
+          }
+      };
+      Object.defineProperty(SvgIconComponent.prototype, "rootClass", {
+          get: function () {
+              var className = "sv-svg-icon";
+              if (!this.css && !!this.partCss) {
+                  className += " " + this.partCss;
+              }
+              else if (!!this.css) {
+                  className = this.css;
+              }
+              return className;
+          },
+          enumerable: false,
+          configurable: true
+      });
+      Object.defineProperty(SvgIconComponent.prototype, "rootRole", {
+          get: function () {
+              return "img";
+          },
+          enumerable: false,
+          configurable: true
+      });
+      Object.defineProperty(SvgIconComponent.prototype, "ariaLabel", {
+          get: function () {
+              return this.title;
+          },
+          enumerable: false,
+          configurable: true
+      });
+      SvgIconComponent.prototype.ngOnChanges = function () {
+          var el = this.viewContaierRef.element.nativeElement;
+          el.innerHTML = "";
+          el.appendChild(document.createElementNS("http://www.w3.org/2000/svg", "use"));
+          this.createSvg();
+      };
+      return SvgIconComponent;
+  }());
+  SvgIconComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SvgIconComponent, deps: [{ token: i0__namespace.ViewContainerRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  SvgIconComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: { size: "size", width: "width", height: "height", iconName: "iconName", partCss: "partCss", css: "css", title: "title" }, host: { properties: { "class": "this.rootClass", "[attr.role]": "this.rootRole", "[attr.aria-label]": "this.ariaLabel" } }, usesOnChanges: true, ngImport: i0__namespace, template: "", isInline: true });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SvgIconComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: "'[sv-ng-svg-icon]'",
+                      template: ""
+                  }]
+          }], ctorParameters: function () { return [{ type: i0__namespace.ViewContainerRef }]; }, propDecorators: { size: [{
+                  type: i0.Input
+              }], width: [{
+                  type: i0.Input
+              }], height: [{
+                  type: i0.Input
+              }], iconName: [{
+                  type: i0.Input
+              }], partCss: [{
+                  type: i0.Input
+              }], css: [{
+                  type: i0.Input
+              }], title: [{
+                  type: i0.Input
+              }], rootClass: [{
+                  type: i0.HostBinding,
+                  args: ["class"]
+              }], rootRole: [{
+                  type: i0.HostBinding,
+                  args: ["[attr.role]"]
+              }], ariaLabel: [{
+                  type: i0.HostBinding,
+                  args: ["[attr.aria-label]"]
+              }] } });
+
   var PopupSurveyComponent = /** @class */ (function (_super) {
       __extends(PopupSurveyComponent, _super);
       function PopupSurveyComponent(changeDetectorRef) {
@@ -1407,6 +1489,9 @@
           if (this.isExpanded !== undefined) {
               this.popup.isExpanded = this.isExpanded;
           }
+          if (this.allowClose !== undefined) {
+              this.popup.allowClose = this.allowClose;
+          }
           if (this.closeOnCompleteTimeout !== undefined) {
               this.popup.closeOnCompleteTimeout = this.closeOnCompleteTimeout;
           }
@@ -1416,7 +1501,7 @@
       return PopupSurveyComponent;
   }(BaseAngular));
   PopupSurveyComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PopupSurveyComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  PopupSurveyComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PopupSurveyComponent, selector: "popup-survey", inputs: { model: "model", isExpanded: "isExpanded", closeOnCompleteTimeout: "closeOnCompleteTimeout" }, usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<div *ngIf=\"!!popup && popup.isShowing\" [class]=\"popup.cssRoot\" style=\"position: fixed; bottom: 3px; right: 10px;\" [style.width]=\"popup.renderedWidth\" [style.maxWidth]=\"popup.renderedWidth\">\n  <div [class]=\"popup.cssHeaderRoot\">\n      <span (click)=\"popup.changeExpandCollapse()\" style=\"width: 100%; cursor: pointer;\">\n          <span style=\"padding-right:10px\" [class]=\"popup.cssHeaderTitle\">{{popup.locTitle.renderedHtml}}</span>\n          <span aria-hidden=\"true\" [class]=\"popup.cssButton\"></span>\n      </span>\n      <span *ngIf=\"popup.isExpanded\" (click)=\"popup.changeExpandCollapse()\" style=\"float: right; cursor: pointer;\">\n          <span style=\"padding-right:10px\" [class]=\"popup.cssHeaderTitle\">X</span>\n      </span>\n  </div>\n  <div *ngIf=\"popup.isExpanded\" [class]=\"popup.cssBody\" (scroll)=\"popup.onScroll()\">\n    <survey [model]=\"popup.survey\"></survey>\n  </div>\n</div>", styles: [""], components: [{ type: SurveyComponent, selector: "survey", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  PopupSurveyComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PopupSurveyComponent, selector: "popup-survey", inputs: { model: "model", isExpanded: "isExpanded", allowClose: "allowClose", closeOnCompleteTimeout: "closeOnCompleteTimeout" }, usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<div *ngIf=\"!!popup && popup.isShowing\" [class]=\"popup.cssRoot\" style=\"position: fixed; bottom: 3px; right: 10px;\" [style.width]=\"popup.renderedWidth\" [style.maxWidth]=\"popup.renderedWidth\">\n  <div [class]=\"popup.cssHeaderRoot\">\n      <span (click)=\"popup.changeExpandCollapse()\" style=\"width: 100%; cursor: pointer;\">\n          <span style=\"padding-right:10px\" [class]=\"popup.cssHeaderTitle\">{{popup.locTitle.renderedHtml}}</span>\n          <span aria-hidden=\"true\" [class]=\"popup.cssButton\"></span>\n      </span>\n      <span *ngIf=\"popup.allowClose\" (click)=\"popup.hide()\" [class]=\"popup.cssHeaderButton\" style=\"float: right; cursor: pointer; width: 24px; height: 24px; transform: rotate(45deg);\">\n        <svg [iconName]=\"'icon-expanddetail'\" [size]=\"16\" sv-ng-svg-icon></svg>\n    </span>\n      <span *ngIf=\"popup.isExpanded\" (click)=\"popup.changeExpandCollapse()\" [class]=\"popup.cssHeaderButton\" style=\"float: right; cursor: pointer; width: 24px; height: 24px;\">\n          <svg [iconName]=\"'icon-collapsedetail'\" [size]=\"16\" sv-ng-svg-icon></svg>\n      </span>\n  </div>\n  <div *ngIf=\"popup.isExpanded\" [class]=\"popup.cssBody\" (scroll)=\"popup.onScroll()\">\n    <survey [model]=\"popup.survey\"></survey>\n  </div>\n</div>", styles: [""], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: SurveyComponent, selector: "survey", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PopupSurveyComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -1428,6 +1513,8 @@
                   type: i0.Input
               }], isExpanded: [{
                   type: i0.Input
+              }], allowClose: [{
+                  type: i0.Input
               }], closeOnCompleteTimeout: [{
                   type: i0.Input
               }] } });
@@ -1805,84 +1892,6 @@
               }] } });
   AngularComponentFactory.Instance.registerComponent("skeleton-question", QuestionSkeletonComponent);
 
-  var SvgIconComponent = /** @class */ (function () {
-      function SvgIconComponent(viewContaierRef) {
-          this.viewContaierRef = viewContaierRef;
-      }
-      SvgIconComponent.prototype.createSvg = function () {
-          if (!!this.iconName) {
-              Survey__namespace.createSvg(this.size, this.width, this.height, this.iconName, this.viewContaierRef.element.nativeElement, this.title);
-          }
-      };
-      Object.defineProperty(SvgIconComponent.prototype, "rootClass", {
-          get: function () {
-              var className = "sv-svg-icon";
-              if (!this.css && !!this.partCss) {
-                  className += " " + this.partCss;
-              }
-              else if (!!this.css) {
-                  className = this.css;
-              }
-              return className;
-          },
-          enumerable: false,
-          configurable: true
-      });
-      Object.defineProperty(SvgIconComponent.prototype, "rootRole", {
-          get: function () {
-              return "img";
-          },
-          enumerable: false,
-          configurable: true
-      });
-      Object.defineProperty(SvgIconComponent.prototype, "ariaLabel", {
-          get: function () {
-              return this.title;
-          },
-          enumerable: false,
-          configurable: true
-      });
-      SvgIconComponent.prototype.ngOnChanges = function () {
-          var el = this.viewContaierRef.element.nativeElement;
-          el.innerHTML = "";
-          el.appendChild(document.createElementNS("http://www.w3.org/2000/svg", "use"));
-          this.createSvg();
-      };
-      return SvgIconComponent;
-  }());
-  SvgIconComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SvgIconComponent, deps: [{ token: i0__namespace.ViewContainerRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  SvgIconComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: { size: "size", width: "width", height: "height", iconName: "iconName", partCss: "partCss", css: "css", title: "title" }, host: { properties: { "class": "this.rootClass", "[attr.role]": "this.rootRole", "[attr.aria-label]": "this.ariaLabel" } }, usesOnChanges: true, ngImport: i0__namespace, template: "", isInline: true });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SvgIconComponent, decorators: [{
-              type: i0.Component,
-              args: [{
-                      selector: "'[sv-ng-svg-icon]'",
-                      template: ""
-                  }]
-          }], ctorParameters: function () { return [{ type: i0__namespace.ViewContainerRef }]; }, propDecorators: { size: [{
-                  type: i0.Input
-              }], width: [{
-                  type: i0.Input
-              }], height: [{
-                  type: i0.Input
-              }], iconName: [{
-                  type: i0.Input
-              }], partCss: [{
-                  type: i0.Input
-              }], css: [{
-                  type: i0.Input
-              }], title: [{
-                  type: i0.Input
-              }], rootClass: [{
-                  type: i0.HostBinding,
-                  args: ["class"]
-              }], rootRole: [{
-                  type: i0.HostBinding,
-                  args: ["[attr.role]"]
-              }], ariaLabel: [{
-                  type: i0.HostBinding,
-                  args: ["[attr.aria-label]"]
-              }] } });
-
   var DropdownComponent = /** @class */ (function (_super) {
       __extends(DropdownComponent, _super);
       function DropdownComponent() {
@@ -2223,7 +2232,7 @@
       return LogoImageComponent;
   }(EmbeddedViewContentComponent));
   LogoImageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LogoImageComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  LogoImageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LogoImageComponent, selector: "sv-logo-image", inputs: { data: "data" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <img\n  [class]=\"survey.css.logoImage\"\n  [attr.src]=\"survey.locLogo.renderedHtml | safeUrl\"\n  [attr.width]=\"survey.logoWidth ? survey.logoWidth : undefined\"\n  [attr.height]=\"survey.logoHeight ? survey.logoHeight : undefined\"\n  [attr.alt]=\"survey.locTitle.renderedHtml\"\n  [style.objectFit]=\"survey.logoFit\"\n  />\n</ng-template>", styles: [":host{display:none}\n"], pipes: { "safeUrl": SafeUrlPipe } });
+  LogoImageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LogoImageComponent, selector: "sv-logo-image", inputs: { data: "data" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <img\n  [class]=\"survey.css.logoImage\"\n  [attr.src]=\"survey.locLogo.renderedHtml | safeUrl\"\n  [style.width]=\"survey.renderedStyleLogoWidth\"\n  [style.height]=\"survey.renderedStyleLogoHeight\"\n  [attr.width]=\"survey.renderedLogoWidth\"\n  [attr.height]=\"survey.renderedLogoHeight\"\n  [attr.alt]=\"survey.locTitle.renderedHtml\"\n  [style.objectFit]=\"survey.logoFit\"\n  />\n</ng-template>", styles: [":host{display:none}\n"], pipes: { "safeUrl": SafeUrlPipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LogoImageComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2573,7 +2582,7 @@
       return ImagePickerItemComponent;
   }(BaseAngular));
   ImagePickerItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImagePickerItemComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  ImagePickerItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ImagePickerItemComponent, selector: "sv-ng-imagepicker-item", inputs: { question: "question", model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div [class]=\"question.getItemClass(model)\">\n    <label [class]=\"question.cssClasses.label\">\n        <input [type]=\"question.inputType\" [attr.name]=\"question.questionName\" [attr.value]=\"model.value\" [id]=\"question.getItemId(model)\" [attr.aria-required]=\"question.ariaRequired\" [attr.aria-label]=\"question.ariaLabel\" [attr.aria-invalid]=\"question.ariaInvalid\" [attr.aria-describedby]=\"question.ariaDescribedBy\"\n        (change)=\"onChange($event)\" [checked]=\"question.isItemSelected(model)\" [disabled]=\"!question.getItemEnabled(model)\" [class]=\"question.cssClasses.itemControl\"\n        />\n        <div [class]=\"question.cssClasses.itemDecorator\">\n            <div [class]=\"question.cssClasses.imageContainer\">\n              <span *ngIf=\"question.cssClasses.checkedItemDecorator\" [class]=\"question.cssClasses.checkedItemDecorator\">\n                <svg *ngIf=\"question.cssClasses.checkedItemSvgIconId\" [class]=\"question.cssClasses.checkedItemSvgIcon\" [iconName]=\"question.cssClasses.checkedItemSvgIconId\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n              </span>\n              <img *ngIf=\"model.locImageLink.renderedHtml && !model.contentNotLoaded && question.contentMode === 'image'\" [class]=\"question.cssClasses.image\" [attr.src]=\"model.locImageLink.renderedHtml\" [attr.width]=\"question.renderedImageWidth\" [attr.height]=\"question.renderedImageHeight\" [attr.alt]=\"model.locText.renderedHtml\"  [style.objectFit]=\"question.imageFit\" (load)=\"question.onContentLoaded(model, $event)\" (error)=\"model.onErrorHandler()\"/>\n              <video *ngIf=\"model.locImageLink.renderedHtml && !model.contentNotLoaded && question.contentMode === 'video'\" controls [class]=\"question.cssClasses.image\" [attr.src]=\"model.locImageLink.renderedHtml\" [attr.width]=\"question.renderedImageWidth\" [attr.height]=\"question.renderedImageHeight\" [style.objectFit]=\"question.imageFit\" (loadedmetadata)=\"question.onContentLoaded(model, $event)\" (error)=\"model.onErrorHandler()\"></video>\n              <div *ngIf=\"!model.locImageLink.renderedHtml || model.contentNotLoaded\" [class]=\"question.cssClasses.itemNoImage\" [style.width]=\"question.renderedImageWidth\" [style.height]=\"question.renderedImageHeight\" [style.objectFit]=\"question.imageFit\">\n                <svg *ngIf=\"question.cssClasses.itemNoImageSvgIconId\" [class]=\"question.cssClasses.itemNoImageSvgIcon\" [iconName]=\"question.cssClasses.itemNoImageSvgIconId\" [size]=\"48\" sv-ng-svg-icon></svg>\n              </div>\n            </div>\n            <span *ngIf=\"question.showLabel\" [class]=\"question.cssClasses.itemText\" [model]=\"model.locText\" sv-ng-string></span>\n        </div>\n    </label>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  ImagePickerItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ImagePickerItemComponent, selector: "sv-ng-imagepicker-item", inputs: { question: "question", model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div [class]=\"question.getItemClass(model)\">\n    <label [class]=\"question.cssClasses.label\">\n        <input [type]=\"question.inputType\" [attr.name]=\"question.questionName\" [attr.value]=\"model.value\" [id]=\"question.getItemId(model)\" [attr.aria-required]=\"question.ariaRequired\" [attr.aria-label]=\"question.ariaLabel\" [attr.aria-invalid]=\"question.ariaInvalid\" [attr.aria-describedby]=\"question.ariaDescribedBy\"\n        (change)=\"onChange($event)\" [checked]=\"question.isItemSelected(model)\" [disabled]=\"!question.getItemEnabled(model)\" [class]=\"question.cssClasses.itemControl\"\n        />\n        <div [class]=\"question.cssClasses.itemDecorator\">\n            <div [class]=\"question.cssClasses.imageContainer\">\n              <span *ngIf=\"question.cssClasses.checkedItemDecorator\" [class]=\"question.cssClasses.checkedItemDecorator\">\n                <svg *ngIf=\"question.cssClasses.checkedItemSvgIconId\" [class]=\"question.cssClasses.checkedItemSvgIcon\" [iconName]=\"question.cssClasses.checkedItemSvgIconId\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n              </span>\n              <img *ngIf=\"model.locImageLink.renderedHtml && !model.contentNotLoaded && question.contentMode === 'image'\" [class]=\"question.cssClasses.image\" [attr.src]=\"model.locImageLink.renderedHtml\" [attr.width]=\"question.renderedImageWidth\" [attr.height]=\"question.renderedImageHeight\" [attr.alt]=\"model.locText.renderedHtml\"  [style.objectFit]=\"question.imageFit\" (load)=\"question.onContentLoaded(model, $event)\" (error)=\"model.onErrorHandler()\"/>\n              <video *ngIf=\"model.locImageLink.renderedHtml && !model.contentNotLoaded && question.contentMode === 'video'\" controls [class]=\"question.cssClasses.image\" [attr.src]=\"model.locImageLink.renderedHtml\" [attr.width]=\"question.renderedImageWidth\" [attr.height]=\"question.renderedImageHeight\" [style.objectFit]=\"question.imageFit\" (loadedmetadata)=\"question.onContentLoaded(model, $event)\" (error)=\"model.onErrorHandler()\"></video>\n              <div *ngIf=\"!model.locImageLink.renderedHtml || model.contentNotLoaded\" [class]=\"question.cssClasses.itemNoImage\" [style.width]=\"question.renderedImageWidth + 'px'\" [style.height]=\"question.renderedImageHeight + 'px'\" [style.objectFit]=\"question.imageFit\">\n                <svg *ngIf=\"question.cssClasses.itemNoImageSvgIconId\" [class]=\"question.cssClasses.itemNoImageSvgIcon\" [iconName]=\"question.cssClasses.itemNoImageSvgIconId\" [size]=\"48\" sv-ng-svg-icon></svg>\n              </div>\n            </div>\n            <span *ngIf=\"question.showLabel\" [class]=\"question.cssClasses.itemText\" [model]=\"model.locText\" sv-ng-string></span>\n        </div>\n    </label>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImagePickerItemComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2980,7 +2989,7 @@
       return ListItemComponent;
   }(BaseAngular));
   ListItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ListItemComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  ListItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ListItemComponent, selector: "sv-ng-list-item, '[sv-ng-list-item]'", inputs: { element: "element", model: "model", listModel: "listModel" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <li role=\"option\" [key2click] [visible]=\"listModel.isItemVisible(model)\" [class]=\"class\" [attr.id]=\"elementId\" [attr.aria-selected]=\"ariaSelected ? 'true' : 'false'\" (click)=\"click($event)\" (pointerdown)=\"pointerdown($event)\">\n    <ng-container *ngIf=\"model.needSeparator\">\n    <div [class]=\"listModel.cssClasses.itemSeparator\"></div>\n    </ng-container>\n    <div [class]=\"listModel.cssClasses.itemBody\" [style.paddingInlineStart]=\"paddingLeft\">\n    <ng-container *ngIf=\"!model.component\">\n      <svg *ngIf=\"model.iconName\" [class]=\"listModel.cssClasses.itemIcon\" [iconName]=\"model.iconName\" [size]=\"24\"\n        sv-ng-svg-icon></svg>\n      <sv-ng-string [model]=\"model.locTitle\"></sv-ng-string>\n    </ng-container>\n    <ng-container *ngIf=\"model.component\">\n      <ng-template [component]=\"{ name: model.component, data: { model: model } }\"></ng-template>\n    </ng-container>\n    </div>\n  </li>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+  ListItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ListItemComponent, selector: "sv-ng-list-item, '[sv-ng-list-item]'", inputs: { element: "element", model: "model", listModel: "listModel" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <li role=\"option\" [key2click] [visible]=\"listModel.isItemVisible(model)\" [class]=\"class\" [attr.id]=\"elementId\" [attr.aria-selected]=\"ariaSelected ? 'true' : 'false'\" (click)=\"click($event)\" (pointerdown)=\"pointerdown($event)\">\n    <ng-container *ngIf=\"model.needSeparator\">\n    <div [class]=\"listModel.cssClasses.itemSeparator\"></div>\n    </ng-container>\n    <div [class]=\"listModel.cssClasses.itemBody\" [style.paddingInlineStart]=\"paddingLeft\">\n    <ng-container *ngIf=\"!model.component\">\n      <svg *ngIf=\"model.iconName\" [class]=\"listModel.cssClasses.itemIcon\" [iconName]=\"model.iconName\" [size]=\"model.iconSize\"\n        sv-ng-svg-icon></svg>\n      <sv-ng-string [model]=\"model.locTitle\"></sv-ng-string>\n    </ng-container>\n    <ng-container *ngIf=\"model.component\">\n      <ng-template [component]=\"{ name: model.component, data: { model: model } }\"></ng-template>\n    </ng-container>\n    </div>\n  </li>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ListItemComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -3808,7 +3817,7 @@
           var _this = this;
           _super.prototype.onModelChanged.call(this);
           this.model.panelCountChangedCallback = function () {
-              _this.detectChanges();
+              _this.update();
           };
           this.model.currentIndexChangedCallback = function () {
               _this.detectChanges();
@@ -4318,7 +4327,7 @@
       return ImageQuestionComponent;
   }(QuestionAngular));
   ImageQuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImageQuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  ImageQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ImageQuestionComponent, selector: "sv-ng-image-question", usesInheritance: true, ngImport: i0__namespace, template: "<div [class]=\"model.cssClasses.root\" #contentElement>\n  <img\n    *ngIf=\"model.renderedMode === 'image'\"\n    [visible]=\"!!model.locImageLink.renderedHtml && !model.contentNotLoaded\"\n    [class]=\"model.getImageCss()\"\n    [attr.src]=\"model.locImageLink.renderedHtml\"\n    [attr.alt]=\"model.altText || model.title\"\n    [attr.width]=\"model.renderedWidth\"\n    [attr.height]=\"model.renderedHeight\"\n    [style]=\"{ objectFit: model.imageFit }\"\n    (load)=\"model.onLoadHandler()\"\n    (error)=\"model.onErrorHandler()\"\n  /><video\n    controls\n    *ngIf=\"model.renderedMode === 'video'\"\n    [visible]=\"!!model.locImageLink.renderedHtml && !model.contentNotLoaded\"\n    [class]=\"model.getImageCss()\"\n    [attr.src]=\"model.locImageLink.renderedHtml\"\n    [attr.width]=\"model.renderedWidth\"\n    [attr.height]=\"model.renderedHeight\"\n    [style]=\"{ objectFit: model.imageFit }\"\n    (loadedmetadata)=\"model.onLoadHandler()\"\n    (error)=\"model.onErrorHandler()\"\n  ></video>\n  <iframe\n    *ngIf=\"model.renderedMode === 'youtube'\"\n    [class]=\"model.getImageCss()\"\n    [attr.src]=\"model.locImageLink.renderedHtml | safeResourceUrl\"\n    [attr.width]=\"model.renderedWidth\"\n    [attr.height]=\"model.renderedHeight\"\n    [style]=\"{ objectFit: model.imageFit }\"\n    ></iframe>\n    <div *ngIf=\"!model.locImageLink.renderedHtml || model.contentNotLoaded\" [class]=\"model.cssClasses.noImage\">\n      <svg [iconName]=\"model.cssClasses.noImageSvgIconId\" [size]=\"48\" sv-ng-svg-icon></svg>\n    </div>\n</div>", components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }], pipes: { "safeResourceUrl": SafeResourceUrlPipe } });
+  ImageQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ImageQuestionComponent, selector: "sv-ng-image-question", usesInheritance: true, ngImport: i0__namespace, template: "<div [class]=\"model.cssClasses.root\" #contentElement>\n  <img\n    *ngIf=\"model.renderedMode === 'image'\"\n    [visible]=\"!!model.locImageLink.renderedHtml && !model.contentNotLoaded\"\n    [class]=\"model.getImageCss()\"\n    [attr.src]=\"model.locImageLink.renderedHtml\"\n    [attr.alt]=\"model.altText || model.title\"\n    [attr.width]=\"model.renderedWidth\"\n    [attr.height]=\"model.renderedHeight\"\n    [style]=\"{ objectFit: model.imageFit,  width: model.renderedStyleWidth, height: model.renderedStyleHeight }\"\n    (load)=\"model.onLoadHandler()\"\n    (error)=\"model.onErrorHandler()\"\n  /><video\n    controls\n    *ngIf=\"model.renderedMode === 'video'\"\n    [visible]=\"!!model.locImageLink.renderedHtml && !model.contentNotLoaded\"\n    [class]=\"model.getImageCss()\"\n    [attr.src]=\"model.locImageLink.renderedHtml\"\n    [attr.width]=\"model.renderedWidth\"\n    [attr.height]=\"model.renderedHeight\"\n    [style]=\"{ objectFit: model.imageFit,  width: model.renderedStyleWidth, height: model.renderedStyleHeight }\"\n    (loadedmetadata)=\"model.onLoadHandler()\"\n    (error)=\"model.onErrorHandler()\"\n  ></video>\n  <iframe\n    *ngIf=\"model.renderedMode === 'youtube'\"\n    [class]=\"model.getImageCss()\"\n    [attr.src]=\"model.locImageLink.renderedHtml | safeResourceUrl\"\n    [attr.width]=\"model.renderedWidth\"\n    [attr.height]=\"model.renderedHeight\"\n    [style]=\"{ objectFit: model.imageFit,  width: model.renderedStyleWidth, height: model.renderedStyleHeight }\"\n    ></iframe>\n    <div *ngIf=\"!model.locImageLink.renderedHtml || model.contentNotLoaded\" [class]=\"model.cssClasses.noImage\">\n      <svg [iconName]=\"model.cssClasses.noImageSvgIconId\" [size]=\"48\" sv-ng-svg-icon></svg>\n    </div>\n</div>", components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }], pipes: { "safeResourceUrl": SafeResourceUrlPipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImageQuestionComponent, decorators: [{
               type: i0.Component,
               args: [{