survey-angular-ui 1.11.13 → 1.12.1

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

@@ -2103,7 +2103,7 @@
       return TagboxFilterComponent;
   }(BaseAngular));
   TagboxFilterComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TagboxFilterComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  TagboxFilterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxFilterComponent, selector: "sv-tagbox-filter", inputs: { model: "model", question: "question" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div [class]=\"question.cssClasses.hint\">\n    <div *ngIf=\"model.showHintPrefix\" [class]=\"question.cssClasses.hintPrefix\">\n        <span>{{ model.hintStringPrefix }}</span>\n    </div>\n    <div [class]=\"question.cssClasses.hintSuffixWrapper\">\n        <div *ngIf=\"model.showHintString\" [class]=\"question.cssClasses.hintSuffix\">\n            <span style=\"visibility: hidden\">{{ model.inputStringRendered }}</span>\n            <span>{{ model.hintStringSuffix }}</span>\n        </div>\n    <input\n      type=\"text\"\n      autocomplete=\"off\"\n      [(ngModel)]=\"model.inputStringRendered\"\n      [attr.id]=\"question.getInputId()\"\n      [class]=\"question.cssClasses.filterStringInput\"\n      [attr.inputmode]=\"model.inputMode\"\n      [attr.role]=\"model.filterStringEnabled ? question.ariaRole : null\"\n      [attr.readonly]=\"model.filterReadOnly ? true : null\"\n      [attr.disabled]=\"question.isDisabledAttr ? true : null\"\n      [attr.size]=\"!model.inputStringRendered ? 1 : null\"\n      [attr.aria-label]=\"question.a11y_input_ariaLabel\"\n      [attr.aria-labelledby]=\"question.a11y_input_ariaLabelledBy\"\n      [attr.aria-describedby]=\"question.a11y_input_ariaDescribedBy\"\n      [attr.aria-controls]=\"model.listElementId\"\n      [attr.aria-expanded]=\"question.ariaExpanded\"\n      [attr.aria-activedescendant]=\"model.ariaActivedescendant\"\n      [attr.placeholder]=\"model.filterStringPlaceholder\"\n      (keydown)=\"model.inputKeyHandler($event)\"\n      (blur)=\"model.onBlur($event)\"\n      (focus)=\"model.onFocus($event)\"\n    />\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:none}\n"], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+  TagboxFilterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxFilterComponent, selector: "sv-tagbox-filter", inputs: { model: "model", question: "question" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div [class]=\"question.cssClasses.hint\">\n    <div *ngIf=\"model.showHintPrefix\" [class]=\"question.cssClasses.hintPrefix\">\n        <span>{{ model.hintStringPrefix }}</span>\n    </div>\n    <div [class]=\"question.cssClasses.hintSuffixWrapper\">\n        <div *ngIf=\"model.showHintString\" [class]=\"question.cssClasses.hintSuffix\">\n            <span style=\"visibility: hidden\">{{ model.inputStringRendered }}</span>\n            <span>{{ model.hintStringSuffix }}</span>\n        </div>\n    <input\n      type=\"text\"\n      autocomplete=\"off\"\n      [(ngModel)]=\"model.inputStringRendered\"\n      [attr.id]=\"question.getInputId()\"\n      [class]=\"question.cssClasses.filterStringInput\"\n      [attr.inputmode]=\"model.inputMode\"\n      [attr.role]=\"model.filterStringEnabled ? question.ariaRole : null\"\n      [attr.readonly]=\"model.filterReadOnly ? true : null\"\n      [attr.disabled]=\"question.isDisabledAttr ? true : null\"\n      [attr.size]=\"!model.inputStringRendered ? 1 : null\"\n      [attr.aria-label]=\"question.a11y_input_ariaLabel\"\n      [attr.aria-labelledby]=\"question.a11y_input_ariaLabelledBy\"\n      [attr.aria-describedby]=\"question.a11y_input_ariaDescribedBy\"\n      [attr.aria-controls]=\"model.listElementId\"\n      [attr.aria-expanded]=\"question.ariaExpanded\"\n      [attr.aria-activedescendant]=\"model.ariaActivedescendant\"\n      [attr.placeholder]=\"model.filterStringPlaceholder\"\n      (keydown)=\"model.inputKeyHandler($event)\"\n      (blur)=\"question.onBlur($event)\"\n      (focus)=\"question.onFocus($event)\"\n    />\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:none}\n"], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TagboxFilterComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2950,7 +2950,7 @@
       return ActionBarItemComponent;
   }(BaseAngular));
   ActionBarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ActionBarItemComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  ActionBarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ActionBarItemComponent, selector: "sv-action-bar-item", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <button type=\"button\" (click)=\"model.doAction($event)\" (mousedown)=\"model.doMouseDown()\" (focus)=\"model.doFocus($event)\" [key2click]=\"{ processEsc: false, disableTabStop: model.disableTabStop }\" [class]=\"model.getActionBarItemCss()\" [attr.title]=\"model.tooltip || model.title\" [attr.aria-checked]=\"model.ariaChecked\" [attr.aria-expanded]=\"model.ariaExpanded\" [attr.role]=\"model.ariaRole\" [disabled]=\"model.disabled\">\n    <svg *ngIf=\"model.iconName\" [iconName]=\"model.iconName\" [size]=\"model.iconSize\" [title]=\"model.tooltip || model.title\" [class]=\"model.cssClasses.itemIcon\" sv-ng-svg-icon></svg>\n    <span *ngIf=\"model.hasTitle\" [class]=\"model.getActionBarItemTitleCss()\">{{ model.title }}</span>\n  </button>\n<ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  ActionBarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ActionBarItemComponent, selector: "sv-action-bar-item", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <button type=\"button\" (click)=\"model.doAction($event)\" (mousedown)=\"model.doMouseDown($event)\" (focus)=\"model.doFocus($event)\" [key2click]=\"{ processEsc: false, disableTabStop: model.disableTabStop }\" [class]=\"model.getActionBarItemCss()\" [attr.title]=\"model.tooltip || model.title\" [attr.aria-checked]=\"model.ariaChecked\" [attr.aria-expanded]=\"model.ariaExpanded\" [attr.role]=\"model.ariaRole\" [disabled]=\"model.disabled\">\n    <svg *ngIf=\"model.iconName\" [iconName]=\"model.iconName\" [size]=\"model.iconSize\" [title]=\"model.tooltip || model.title\" [class]=\"model.cssClasses.itemIcon\" sv-ng-svg-icon></svg>\n    <span *ngIf=\"model.hasTitle\" [class]=\"model.getActionBarItemTitleCss()\">{{ model.title }}</span>\n  </button>\n<ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { 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: ActionBarItemComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -3007,10 +3007,34 @@
       SelectBaseItemComponent.prototype.getModel = function () {
           return this.model;
       };
+      SelectBaseItemComponent.prototype.onModelChanged = function () {
+          var _a;
+          _super.prototype.onModelChanged.call(this);
+          if (!this.question.isDesignMode) {
+              if (this.previousModel) {
+                  this.previousModel.setRootElement(undefined);
+              }
+              if (this.model && ((_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
+                  this.model.setRootElement(this.container.nativeElement);
+              }
+          }
+      };
+      SelectBaseItemComponent.prototype.ngAfterViewInit = function () {
+          var _a;
+          if (this.model && ((_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement) && !this.question.isDesignMode) {
+              this.model.setRootElement(this.container.nativeElement);
+          }
+      };
+      SelectBaseItemComponent.prototype.ngOnDestroy = function () {
+          _super.prototype.ngOnDestroy.call(this);
+          if (this.model && !this.question.isDesignMode) {
+              this.model.setRootElement(undefined);
+          }
+      };
       return SelectBaseItemComponent;
   }(BaseAngular));
   SelectBaseItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SelectBaseItemComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  SelectBaseItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SelectBaseItemComponent, selector: "['sv-ng-selectbase-item'], sv-ng-selebase-item", inputs: { question: "question", model: "model", inputType: "inputType", showLabel: "showLabel" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div role=\"presentation\" [class]=\"question.getItemClass(model)\">\n    <ng-container [ngSwitch]=\"inputType\">\n      <label *ngSwitchCase=\"'checkbox'\" [class]=\"question.getLabelClass(model)\" [model]=\"model\" [question]=\"question\" sv-ng-checkbox-item>\n        <ng-container *ngTemplateOutlet=\"itemDecorator\"></ng-container>\n      </label>\n      <label *ngSwitchCase=\"'radio'\" (mousedown)=\"question.onMouseDown()\" [class]=\"question.getLabelClass(model)\" [model]=\"model\" [question]=\"question\" sv-ng-radiogroup-item>\n        <ng-container *ngTemplateOutlet=\"itemDecorator\"></ng-container>\n      </label>\n    </ng-container>\n    <ng-template #itemDecorator>\n      <span *ngIf=\"question.cssClasses.materialDecorator\" [class]=\"question.cssClasses.materialDecorator\">\n        <svg *ngIf=\"question.itemSvgIcon\" [class]=\"question.cssClasses.itemDecorator\">\n          <use [attr.xlink:href]=\"question.itemSvgIcon\"></use>\n        </svg>\n      </span>\n      <span [class]=\"question.getControlLabelClass(model)\" *ngIf=\"!model.hideCaption\">\n        <sv-ng-string [model]=\"model.locText\"></sv-ng-string>\n      </span> \n    </ng-template>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: CheckboxItemComponent, selector: "sv-ng-checkbox-item, '[sv-ng-checkbox-item]'", inputs: ["question", "model"] }, { type: RadiogroupItemComponent, selector: "sv-ng-radiogroup-item, '[sv-ng-radiogroup-item]'", inputs: ["question", "model"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  SelectBaseItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SelectBaseItemComponent, selector: "['sv-ng-selectbase-item'], sv-ng-selebase-item", inputs: { question: "question", model: "model", inputType: "inputType", showLabel: "showLabel" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div role=\"presentation\" [class]=\"question.getItemClass(model)\" #container>\n    <ng-container [ngSwitch]=\"inputType\">\n      <label *ngSwitchCase=\"'checkbox'\" [class]=\"question.getLabelClass(model)\" [model]=\"model\" [question]=\"question\"\n        sv-ng-checkbox-item>\n        <ng-container *ngTemplateOutlet=\"itemDecorator\"></ng-container>\n      </label>\n      <label *ngSwitchCase=\"'radio'\" (mousedown)=\"question.onMouseDown()\" [class]=\"question.getLabelClass(model)\"\n        [model]=\"model\" [question]=\"question\" sv-ng-radiogroup-item>\n        <ng-container *ngTemplateOutlet=\"itemDecorator\"></ng-container>\n      </label>\n    </ng-container>\n    <ng-template #itemDecorator>\n      <span *ngIf=\"question.cssClasses.materialDecorator\" [class]=\"question.cssClasses.materialDecorator\">\n        <svg *ngIf=\"question.itemSvgIcon\" [class]=\"question.cssClasses.itemDecorator\">\n          <use [attr.xlink:href]=\"question.itemSvgIcon\"></use>\n        </svg>\n      </span>\n      <span [class]=\"question.getControlLabelClass(model)\" *ngIf=\"!model.hideCaption\">\n        <sv-ng-string [model]=\"model.locText\"></sv-ng-string>\n      </span>\n    </ng-template>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: CheckboxItemComponent, selector: "sv-ng-checkbox-item, '[sv-ng-checkbox-item]'", inputs: ["question", "model"] }, { type: RadiogroupItemComponent, selector: "sv-ng-radiogroup-item, '[sv-ng-radiogroup-item]'", inputs: ["question", "model"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { 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: SelectBaseItemComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -3026,6 +3050,9 @@
                   type: i0.Input
               }], showLabel: [{
                   type: i0.Input
+              }], container: [{
+                  type: i0.ViewChild,
+                  args: ["container", { read: i0.ElementRef }]
               }] } });
   AngularComponentFactory.Instance.registerComponent("sv-ng-selectbase-item", SelectBaseItemComponent);
 
@@ -3133,6 +3160,13 @@
       ListItemComponent.prototype.pointerdown = function (event) {
           this.listModel.onPointerDown(event, this.model);
       };
+      Object.defineProperty(ListItemComponent.prototype, "itemComponent", {
+          get: function () {
+              return this.model.component || this.listModel.itemComponent;
+          },
+          enumerable: false,
+          configurable: true
+      });
       ListItemComponent.prototype.getModel = function () {
           return this.model;
       };
@@ -3142,7 +3176,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]=\"{ processEsc: false, disableTabStop: model.disableTabStop }\" [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\" [attr.title]=\"model.locTitle.calculatedText\"\n    (mouseover)=\"listModel.onItemHover(model)\"\n    (mouseleave)=\"listModel.onItemLeave(model)\">\n    <ng-template [component]=\"{ name: model.component || 'sv-list-item-content', data: { model: model, listModel: listModel } }\"></ng-template>\n    </div>\n  </li>\n</ng-template>", styles: [":host{display:none}\n"], 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]=\"{ processEsc: false, disableTabStop: model.disableTabStop }\" [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\" [attr.title]=\"model.locTitle.calculatedText\"\n    (mouseover)=\"listModel.onItemHover(model)\"\n    (mouseleave)=\"listModel.onItemLeave(model)\">\n    <ng-template [component]=\"{ name: itemComponent, data: { model: model, listModel: listModel } }\"></ng-template>\n    </div>\n  </li>\n</ng-template>", styles: [":host{display:none}\n"], 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: [{
@@ -4092,7 +4126,7 @@
       return PanelDynamicAddBtn;
   }(PaneldynamicAction));
   PanelDynamicAddBtn.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PanelDynamicAddBtn, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  PanelDynamicAddBtn.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDynamicAddBtn, selector: "sv-ng-paneldynamic-add-btn", usesInheritance: true, ngImport: i0__namespace, template: "<button type=\"button\" *ngIf=\"question.canAddPanel\" [class]=\"question.getAddButtonCss()\" (click)=\"addPanelClick()\">\n<span [class]=\"question.cssClasses.buttonAddText\"><sv-ng-string [model]=\"question.locPanelAddText\"></sv-ng-string></span>\n</button>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  PanelDynamicAddBtn.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDynamicAddBtn, selector: "sv-ng-paneldynamic-add-btn", usesInheritance: true, ngImport: i0__namespace, template: "<button type=\"button\" [id]=\"question.addButtonId\" *ngIf=\"question.canAddPanel\" [class]=\"question.getAddButtonCss()\" (click)=\"addPanelClick()\">\n<span [class]=\"question.cssClasses.buttonAddText\"><sv-ng-string [model]=\"question.locPanelAddText\"></sv-ng-string></span>\n</button>", components: [{ 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: PanelDynamicAddBtn, decorators: [{
               type: i0.Component,
               args: [{
@@ -4405,7 +4439,7 @@
       return MatrixDynamicDragDropIconComponent;
   }(EmbeddedViewContentComponent));
   MatrixDynamicDragDropIconComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixDynamicDragDropIconComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  MatrixDynamicDragDropIconComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixDynamicDragDropIconComponent, selector: "sv-ng-matrix-drag-drop-icon", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <svg *ngIf=\"question.iconDragElement\" [class]=\"question.cssClasses.dragElementDecorator\">\n    <use [attr.xlink:href]=\"question.iconDragElement\"></use>\n  </svg>\n  <span *ngIf=\"!question.iconDragElement\" data-bind=\"css: question.cssClasses.iconDrag\"></span>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  MatrixDynamicDragDropIconComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixDynamicDragDropIconComponent, selector: "sv-ng-matrix-drag-drop-icon", inputs: { model: "model" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div>\n    <svg *ngIf=\"question.iconDragElement\" [class]=\"question.cssClasses.dragElementDecorator\">\n      <use [attr.xlink:href]=\"question.iconDragElement\"></use>\n    </svg>\n    <span *ngIf=\"!question.iconDragElement\" data-bind=\"css: question.cssClasses.iconDrag\"></span>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], 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: MatrixDynamicDragDropIconComponent, decorators: [{
               type: i0.Component,
               args: [{