survey-angular-ui 1.9.46 → 1.9.47

package/esm2020/components/tagbox/tagbox.component.mjs

@@ -30,11 +30,11 @@ export class TagboxComponent {
     }
 }
 TagboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TagboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TagboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: TagboxComponent, selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.cssClasses.selectWrapper\">\n    <div *ngIf=\"!model.isReadOnly\" [tabindex]=\"model.isInputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (click)=\"click($event)\" (blur)=\"blur($event)\"\n        (keyup)=\"keyup($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n        [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n        [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.role]=\"model.ariaRole\">\n        <div *ngIf=\"model.isEmpty()\" [class]=\"model.cssClasses.controlValue\">{{ model.placeholder }}</div>\n        <ul *ngIf=\"!model.isEmpty()\" [class]=\"model.cssClasses.controlValue\">\n            <sv-ng-tagbox-item *ngFor=\"let item of model.selectedItems\" [item]=\"item\" [question]=\"model\"></sv-ng-tagbox-item>\n        </ul>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\" [class]=\"model.cssClasses.cleanButton\"\n            (click)=\"clear($event)\" [visible]=\"!model.isEmpty()\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\"\n                [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"popupModel\"></sv-ng-popup>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">{{ model.readOnlyText }}</div>\n</div>", components: [{ type: i1.TagboxItemComponent, selector: "sv-ng-tagbox-item, '[sv-ng-tagbox-item]'", inputs: ["item", "question"] }, { type: i2.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i3.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
+TagboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: TagboxComponent, selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.cssClasses.selectWrapper\">\n    <div *ngIf=\"!model.isReadOnly\" [tabindex]=\"model.isInputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (click)=\"click($event)\" (blur)=\"blur($event)\"\n        (keyup)=\"keyup($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n        [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n        [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.role]=\"model.ariaRole\">\n        <div *ngIf=\"model.isEmpty()\" [class]=\"model.cssClasses.controlValue\">{{ model.placeholder }}</div>\n        <ul *ngIf=\"!model.isEmpty()\" [class]=\"model.cssClasses.controlValue\">\n            <sv-ng-tagbox-item *ngFor=\"let item of model.selectedItems\" [item]=\"item\" [question]=\"model\"></sv-ng-tagbox-item>\n        </ul>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\" [class]=\"model.cssClasses.cleanButton\"\n            (click)=\"clear($event)\" [visible]=\"!model.isEmpty()\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.cleanButtonCaption\"\n                [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"popupModel\"></sv-ng-popup>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">{{ model.readOnlyText }}</div>\n</div>", components: [{ type: i1.TagboxItemComponent, selector: "sv-ng-tagbox-item, '[sv-ng-tagbox-item]'", inputs: ["item", "question"] }, { type: i2.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i3.PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TagboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", template: "<div [class]=\"model.cssClasses.selectWrapper\">\n    <div *ngIf=\"!model.isReadOnly\" [tabindex]=\"model.isInputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (click)=\"click($event)\" (blur)=\"blur($event)\"\n        (keyup)=\"keyup($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n        [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n        [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.role]=\"model.ariaRole\">\n        <div *ngIf=\"model.isEmpty()\" [class]=\"model.cssClasses.controlValue\">{{ model.placeholder }}</div>\n        <ul *ngIf=\"!model.isEmpty()\" [class]=\"model.cssClasses.controlValue\">\n            <sv-ng-tagbox-item *ngFor=\"let item of model.selectedItems\" [item]=\"item\" [question]=\"model\"></sv-ng-tagbox-item>\n        </ul>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\" [class]=\"model.cssClasses.cleanButton\"\n            (click)=\"clear($event)\" [visible]=\"!model.isEmpty()\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\"\n                [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"popupModel\"></sv-ng-popup>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">{{ model.readOnlyText }}</div>\n</div>" }]
+            args: [{ selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", template: "<div [class]=\"model.cssClasses.selectWrapper\">\n    <div *ngIf=\"!model.isReadOnly\" [tabindex]=\"model.isInputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (click)=\"click($event)\" (blur)=\"blur($event)\"\n        (keyup)=\"keyup($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n        [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n        [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.role]=\"model.ariaRole\">\n        <div *ngIf=\"model.isEmpty()\" [class]=\"model.cssClasses.controlValue\">{{ model.placeholder }}</div>\n        <ul *ngIf=\"!model.isEmpty()\" [class]=\"model.cssClasses.controlValue\">\n            <sv-ng-tagbox-item *ngFor=\"let item of model.selectedItems\" [item]=\"item\" [question]=\"model\"></sv-ng-tagbox-item>\n        </ul>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\" [class]=\"model.cssClasses.cleanButton\"\n            (click)=\"clear($event)\" [visible]=\"!model.isEmpty()\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.cleanButtonCaption\"\n                [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"popupModel\"></sv-ng-popup>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">{{ model.readOnlyText }}</div>\n</div>" }]
         }], propDecorators: { model: [{
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFnYm94LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL3N1cnZleS1hbmd1bGFyLXVpL3NyYy9jb21wb25lbnRzL3RhZ2JveC90YWdib3guY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvc3VydmV5LWFuZ3VsYXItdWkvc3JjL2NvbXBvbmVudHMvdGFnYm94L3RhZ2JveC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBcUIsTUFBTSxlQUFlLENBQUM7QUFDcEUsT0FBTyxFQUFFLGlCQUFpQixFQUFjLE1BQU0sYUFBYSxDQUFDOzs7Ozs7O0FBTTVELE1BQU0sT0FBTyxlQUFlO0lBSXhCLElBQUksVUFBVTtRQUNaLE9BQU8sSUFBSSxDQUFDLGlCQUFpQixDQUFDLFVBQVUsQ0FBQztJQUMzQyxDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksQ0FBQyxpQkFBaUIsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLGlCQUFpQixJQUFJLElBQUksaUJBQWlCLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzdGLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLGlCQUFpQixFQUFFLE9BQU8sRUFBRSxDQUFDO0lBQ3BDLENBQUM7SUFFRCxLQUFLLENBQUMsS0FBVTtRQUNkLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxPQUFPLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDekMsQ0FBQztJQUNELEtBQUssQ0FBQyxLQUFVO1FBQ2QsSUFBSSxDQUFDLGlCQUFpQixFQUFFLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN6QyxDQUFDO0lBQ0QsS0FBSyxDQUFDLEtBQVU7UUFDZCxJQUFJLENBQUMsaUJBQWlCLEVBQUUsT0FBTyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3pDLENBQUM7SUFDRCxJQUFJLENBQUMsS0FBVTtRQUNiLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDeEMsQ0FBQzs7NEdBM0JRLGVBQWU7Z0dBQWYsZUFBZSxrR0NQNUIsK3NEQW9CTTsyRkRiTyxlQUFlO2tCQUozQixTQUFTOytCQUNFLGdDQUFnQzs4QkFJL0IsS0FBSztzQkFBYixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25EZXN0cm95LCBPbkluaXQgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgRHJvcGRvd25MaXN0TW9kZWwsIFBvcHVwTW9kZWwgfSBmcm9tIFwic3VydmV5LWNvcmVcIjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiBcInN2LW5nLXRhZ2JveCwgJ1tzdi1uZy10YWdib3hdJ1wiLFxuICB0ZW1wbGF0ZVVybDogXCIuL3RhZ2JveC5jb21wb25lbnQuaHRtbFwiXG59KVxuZXhwb3J0IGNsYXNzIFRhZ2JveENvbXBvbmVudCBpbXBsZW1lbnRzIE9uRGVzdHJveSwgT25Jbml0IHtcbiAgICBASW5wdXQoKSBtb2RlbDogYW55O1xuICAgIHByaXZhdGUgZHJvcGRvd25MaXN0TW9kZWwhOiBEcm9wZG93bkxpc3RNb2RlbDtcblxuICAgIGdldCBwb3B1cE1vZGVsKCk6IFBvcHVwTW9kZWwge1xuICAgICAgcmV0dXJuIHRoaXMuZHJvcGRvd25MaXN0TW9kZWwucG9wdXBNb2RlbDtcbiAgICB9XG5cbiAgICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICAgIHRoaXMuZHJvcGRvd25MaXN0TW9kZWwgPSB0aGlzLm1vZGVsLmRyb3Bkb3duTGlzdE1vZGVsIHx8IG5ldyBEcm9wZG93bkxpc3RNb2RlbCh0aGlzLm1vZGVsKTtcbiAgICB9XG5cbiAgICBuZ09uRGVzdHJveSgpIHtcbiAgICAgIHRoaXMuZHJvcGRvd25MaXN0TW9kZWw/LmRpc3Bvc2UoKTtcbiAgICB9XG5cbiAgICBjbGljayhldmVudDogYW55KSB7XG4gICAgICB0aGlzLmRyb3Bkb3duTGlzdE1vZGVsPy5vbkNsaWNrKGV2ZW50KTtcbiAgICB9XG4gICAgY2xlYXIoZXZlbnQ6IGFueSkge1xuICAgICAgdGhpcy5kcm9wZG93bkxpc3RNb2RlbD8ub25DbGVhcihldmVudCk7XG4gICAgfVxuICAgIGtleXVwKGV2ZW50OiBhbnkpIHtcbiAgICAgIHRoaXMuZHJvcGRvd25MaXN0TW9kZWw/Lm9uS2V5VXAoZXZlbnQpO1xuICAgIH1cbiAgICBibHVyKGV2ZW50OiBhbnkpIHtcbiAgICAgIHRoaXMuZHJvcGRvd25MaXN0TW9kZWw/Lm9uQmx1cihldmVudCk7XG4gICAgfVxufSIsIjxkaXYgW2NsYXNzXT1cIm1vZGVsLmNzc0NsYXNzZXMuc2VsZWN0V3JhcHBlclwiPlxuICAgIDxkaXYgKm5nSWY9XCIhbW9kZWwuaXNSZWFkT25seVwiIFt0YWJpbmRleF09XCJtb2RlbC5pc0lucHV0UmVhZE9ubHkgPyBudWxsIDogMFwiIFtjbGFzc109XCJtb2RlbC5nZXRDb250cm9sQ2xhc3MoKVwiXG4gICAgICAgIFthdHRyLmRpc2FibGVkXT1cIm1vZGVsLmlzSW5wdXRSZWFkT25seSA/IHRydWUgOiBudWxsXCIgKGNsaWNrKT1cImNsaWNrKCRldmVudClcIiAoYmx1cik9XCJibHVyKCRldmVudClcIlxuICAgICAgICAoa2V5dXApPVwia2V5dXAoJGV2ZW50KVwiIFthdHRyLmlkXT1cIm1vZGVsLmlucHV0SWRcIiBbYXR0ci5hcmlhLXJlcXVpcmVkXT1cIm1vZGVsLmFyaWFSZXF1aXJlZFwiXG4gICAgICAgIFthdHRyLmFyaWEtbGFiZWxdPVwibW9kZWwuYXJpYUxhYmVsXCIgW2F0dHIuYXJpYS1pbnZhbGlkXT1cIm1vZGVsLmFyaWFJbnZhbGlkXCJcbiAgICAgICAgW2F0dHIuYXJpYS1kZXNjcmliZWRieV09XCJtb2RlbC5hcmlhRGVzY3JpYmVkQnlcIiBbYXR0ci5yb2xlXT1cIm1vZGVsLmFyaWFSb2xlXCI+XG4gICAgICAgIDxkaXYgKm5nSWY9XCJtb2RlbC5pc0VtcHR5KClcIiBbY2xhc3NdPVwibW9kZWwuY3NzQ2xhc3Nlcy5jb250cm9sVmFsdWVcIj57eyBtb2RlbC5wbGFjZWhvbGRlciB9fTwvZGl2PlxuICAgICAgICA8dWwgKm5nSWY9XCIhbW9kZWwuaXNFbXB0eSgpXCIgW2NsYXNzXT1cIm1vZGVsLmNzc0NsYXNzZXMuY29udHJvbFZhbHVlXCI+XG4gICAgICAgICAgICA8c3YtbmctdGFnYm94LWl0ZW0gKm5nRm9yPVwibGV0IGl0ZW0gb2YgbW9kZWwuc2VsZWN0ZWRJdGVtc1wiIFtpdGVtXT1cIml0ZW1cIiBbcXVlc3Rpb25dPVwibW9kZWxcIj48L3N2LW5nLXRhZ2JveC1pdGVtPlxuICAgICAgICA8L3VsPlxuICAgICAgICA8ZGl2ICpuZ0lmPVwiKG1vZGVsLmFsbG93Q2xlYXIgJiYgbW9kZWwuY3NzQ2xhc3Nlcy5jbGVhbkJ1dHRvbkljb25JZClcIiBbY2xhc3NdPVwibW9kZWwuY3NzQ2xhc3Nlcy5jbGVhbkJ1dHRvblwiXG4gICAgICAgICAgICAoY2xpY2spPVwiY2xlYXIoJGV2ZW50KVwiIFt2aXNpYmxlXT1cIiFtb2RlbC5pc0VtcHR5KClcIj5cbiAgICAgICAgICAgIDwhLS0ga28gY29tcG9uZW50OiB7IG5hbWU6ICdzdi1zdmctaWNvbicsIHBhcmFtczogeyBjc3M6IG1vZGVsLmNzc0NsYXNzZXMuY2xlYW5CdXR0b25TdmcsIGljb25OYW1lOiBtb2RlbC5jc3NDbGFzc2VzLmNsZWFuQnV0dG9uSWNvbklkLCBzaXplOiAnYXV0bycgfSB9IC0tPlxuICAgICAgICAgICAgPCEtLSAva28gLS0+XG4gICAgICAgICAgICA8c3ZnIFtpY29uTmFtZV09XCJtb2RlbC5jc3NDbGFzc2VzLmNsZWFuQnV0dG9uSWNvbklkXCIgW3BhcnRDc3NdPVwibW9kZWwuY3NzQ2xhc3Nlcy5jbGVhbkJ1dHRvblN2Z1wiXG4gICAgICAgICAgICAgICAgW3NpemVdPVwiJ2F1dG8nXCIgc3Ytbmctc3ZnLWljb24+PC9zdmc+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICAgIDxzdi1uZy1wb3B1cCAqbmdJZj1cIiFtb2RlbC5pc1JlYWRPbmx5XCIgW3BvcHVwTW9kZWxdPVwicG9wdXBNb2RlbFwiPjwvc3YtbmctcG9wdXA+XG4gICAgPGRpdiBkaXNhYmxlZCAqbmdJZj1cIm1vZGVsLmlzUmVhZE9ubHlcIiBbY2xhc3NdPVwibW9kZWwuZ2V0Q29udHJvbENsYXNzKClcIiBbYXR0ci5pZF09XCJtb2RlbC5pbnB1dElkXCI+e3sgbW9kZWwucmVhZE9ubHlUZXh0IH19PC9kaXY+XG48L2Rpdj4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFnYm94LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL3N1cnZleS1hbmd1bGFyLXVpL3NyYy9jb21wb25lbnRzL3RhZ2JveC90YWdib3guY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvc3VydmV5LWFuZ3VsYXItdWkvc3JjL2NvbXBvbmVudHMvdGFnYm94L3RhZ2JveC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBcUIsTUFBTSxlQUFlLENBQUM7QUFDcEUsT0FBTyxFQUFFLGlCQUFpQixFQUFjLE1BQU0sYUFBYSxDQUFDOzs7Ozs7O0FBTTVELE1BQU0sT0FBTyxlQUFlO0lBSXhCLElBQUksVUFBVTtRQUNaLE9BQU8sSUFBSSxDQUFDLGlCQUFpQixDQUFDLFVBQVUsQ0FBQztJQUMzQyxDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksQ0FBQyxpQkFBaUIsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLGlCQUFpQixJQUFJLElBQUksaUJBQWlCLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzdGLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLGlCQUFpQixFQUFFLE9BQU8sRUFBRSxDQUFDO0lBQ3BDLENBQUM7SUFFRCxLQUFLLENBQUMsS0FBVTtRQUNkLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxPQUFPLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDekMsQ0FBQztJQUNELEtBQUssQ0FBQyxLQUFVO1FBQ2QsSUFBSSxDQUFDLGlCQUFpQixFQUFFLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN6QyxDQUFDO0lBQ0QsS0FBSyxDQUFDLEtBQVU7UUFDZCxJQUFJLENBQUMsaUJBQWlCLEVBQUUsT0FBTyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3pDLENBQUM7SUFDRCxJQUFJLENBQUMsS0FBVTtRQUNiLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDeEMsQ0FBQzs7NEdBM0JRLGVBQWU7Z0dBQWYsZUFBZSxrR0NQNUIsb3ZEQW9CTTsyRkRiTyxlQUFlO2tCQUozQixTQUFTOytCQUNFLGdDQUFnQzs4QkFJL0IsS0FBSztzQkFBYixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25EZXN0cm95LCBPbkluaXQgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgRHJvcGRvd25MaXN0TW9kZWwsIFBvcHVwTW9kZWwgfSBmcm9tIFwic3VydmV5LWNvcmVcIjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiBcInN2LW5nLXRhZ2JveCwgJ1tzdi1uZy10YWdib3hdJ1wiLFxuICB0ZW1wbGF0ZVVybDogXCIuL3RhZ2JveC5jb21wb25lbnQuaHRtbFwiXG59KVxuZXhwb3J0IGNsYXNzIFRhZ2JveENvbXBvbmVudCBpbXBsZW1lbnRzIE9uRGVzdHJveSwgT25Jbml0IHtcbiAgICBASW5wdXQoKSBtb2RlbDogYW55O1xuICAgIHByaXZhdGUgZHJvcGRvd25MaXN0TW9kZWwhOiBEcm9wZG93bkxpc3RNb2RlbDtcblxuICAgIGdldCBwb3B1cE1vZGVsKCk6IFBvcHVwTW9kZWwge1xuICAgICAgcmV0dXJuIHRoaXMuZHJvcGRvd25MaXN0TW9kZWwucG9wdXBNb2RlbDtcbiAgICB9XG5cbiAgICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICAgIHRoaXMuZHJvcGRvd25MaXN0TW9kZWwgPSB0aGlzLm1vZGVsLmRyb3Bkb3duTGlzdE1vZGVsIHx8IG5ldyBEcm9wZG93bkxpc3RNb2RlbCh0aGlzLm1vZGVsKTtcbiAgICB9XG5cbiAgICBuZ09uRGVzdHJveSgpIHtcbiAgICAgIHRoaXMuZHJvcGRvd25MaXN0TW9kZWw/LmRpc3Bvc2UoKTtcbiAgICB9XG5cbiAgICBjbGljayhldmVudDogYW55KSB7XG4gICAgICB0aGlzLmRyb3Bkb3duTGlzdE1vZGVsPy5vbkNsaWNrKGV2ZW50KTtcbiAgICB9XG4gICAgY2xlYXIoZXZlbnQ6IGFueSkge1xuICAgICAgdGhpcy5kcm9wZG93bkxpc3RNb2RlbD8ub25DbGVhcihldmVudCk7XG4gICAgfVxuICAgIGtleXVwKGV2ZW50OiBhbnkpIHtcbiAgICAgIHRoaXMuZHJvcGRvd25MaXN0TW9kZWw/Lm9uS2V5VXAoZXZlbnQpO1xuICAgIH1cbiAgICBibHVyKGV2ZW50OiBhbnkpIHtcbiAgICAgIHRoaXMuZHJvcGRvd25MaXN0TW9kZWw/Lm9uQmx1cihldmVudCk7XG4gICAgfVxufSIsIjxkaXYgW2NsYXNzXT1cIm1vZGVsLmNzc0NsYXNzZXMuc2VsZWN0V3JhcHBlclwiPlxuICAgIDxkaXYgKm5nSWY9XCIhbW9kZWwuaXNSZWFkT25seVwiIFt0YWJpbmRleF09XCJtb2RlbC5pc0lucHV0UmVhZE9ubHkgPyBudWxsIDogMFwiIFtjbGFzc109XCJtb2RlbC5nZXRDb250cm9sQ2xhc3MoKVwiXG4gICAgICAgIFthdHRyLmRpc2FibGVkXT1cIm1vZGVsLmlzSW5wdXRSZWFkT25seSA/IHRydWUgOiBudWxsXCIgKGNsaWNrKT1cImNsaWNrKCRldmVudClcIiAoYmx1cik9XCJibHVyKCRldmVudClcIlxuICAgICAgICAoa2V5dXApPVwia2V5dXAoJGV2ZW50KVwiIFthdHRyLmlkXT1cIm1vZGVsLmlucHV0SWRcIiBbYXR0ci5hcmlhLXJlcXVpcmVkXT1cIm1vZGVsLmFyaWFSZXF1aXJlZFwiXG4gICAgICAgIFthdHRyLmFyaWEtbGFiZWxdPVwibW9kZWwuYXJpYUxhYmVsXCIgW2F0dHIuYXJpYS1pbnZhbGlkXT1cIm1vZGVsLmFyaWFJbnZhbGlkXCJcbiAgICAgICAgW2F0dHIuYXJpYS1kZXNjcmliZWRieV09XCJtb2RlbC5hcmlhRGVzY3JpYmVkQnlcIiBbYXR0ci5yb2xlXT1cIm1vZGVsLmFyaWFSb2xlXCI+XG4gICAgICAgIDxkaXYgKm5nSWY9XCJtb2RlbC5pc0VtcHR5KClcIiBbY2xhc3NdPVwibW9kZWwuY3NzQ2xhc3Nlcy5jb250cm9sVmFsdWVcIj57eyBtb2RlbC5wbGFjZWhvbGRlciB9fTwvZGl2PlxuICAgICAgICA8dWwgKm5nSWY9XCIhbW9kZWwuaXNFbXB0eSgpXCIgW2NsYXNzXT1cIm1vZGVsLmNzc0NsYXNzZXMuY29udHJvbFZhbHVlXCI+XG4gICAgICAgICAgICA8c3YtbmctdGFnYm94LWl0ZW0gKm5nRm9yPVwibGV0IGl0ZW0gb2YgbW9kZWwuc2VsZWN0ZWRJdGVtc1wiIFtpdGVtXT1cIml0ZW1cIiBbcXVlc3Rpb25dPVwibW9kZWxcIj48L3N2LW5nLXRhZ2JveC1pdGVtPlxuICAgICAgICA8L3VsPlxuICAgICAgICA8ZGl2ICpuZ0lmPVwiKG1vZGVsLmFsbG93Q2xlYXIgJiYgbW9kZWwuY3NzQ2xhc3Nlcy5jbGVhbkJ1dHRvbkljb25JZClcIiBbY2xhc3NdPVwibW9kZWwuY3NzQ2xhc3Nlcy5jbGVhbkJ1dHRvblwiXG4gICAgICAgICAgICAoY2xpY2spPVwiY2xlYXIoJGV2ZW50KVwiIFt2aXNpYmxlXT1cIiFtb2RlbC5pc0VtcHR5KClcIj5cbiAgICAgICAgICAgIDwhLS0ga28gY29tcG9uZW50OiB7IG5hbWU6ICdzdi1zdmctaWNvbicsIHBhcmFtczogeyBjc3M6IG1vZGVsLmNzc0NsYXNzZXMuY2xlYW5CdXR0b25TdmcsIGljb25OYW1lOiBtb2RlbC5jc3NDbGFzc2VzLmNsZWFuQnV0dG9uSWNvbklkLCBzaXplOiAnYXV0bycgfSB9IC0tPlxuICAgICAgICAgICAgPCEtLSAva28gLS0+XG4gICAgICAgICAgICA8c3ZnIFtpY29uTmFtZV09XCJtb2RlbC5jc3NDbGFzc2VzLmNsZWFuQnV0dG9uSWNvbklkXCIgW3BhcnRDc3NdPVwibW9kZWwuY3NzQ2xhc3Nlcy5jbGVhbkJ1dHRvblN2Z1wiIFt0aXRsZV09XCJtb2RlbC5jbGVhbkJ1dHRvbkNhcHRpb25cIlxuICAgICAgICAgICAgICAgIFtzaXplXT1cIidhdXRvJ1wiIHN2LW5nLXN2Zy1pY29uPjwvc3ZnPlxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgICA8c3YtbmctcG9wdXAgKm5nSWY9XCIhbW9kZWwuaXNSZWFkT25seVwiIFtwb3B1cE1vZGVsXT1cInBvcHVwTW9kZWxcIj48L3N2LW5nLXBvcHVwPlxuICAgIDxkaXYgZGlzYWJsZWQgKm5nSWY9XCJtb2RlbC5pc1JlYWRPbmx5XCIgW2NsYXNzXT1cIm1vZGVsLmdldENvbnRyb2xDbGFzcygpXCIgW2F0dHIuaWRdPVwibW9kZWwuaW5wdXRJZFwiPnt7IG1vZGVsLnJlYWRPbmx5VGV4dCB9fTwvZGl2PlxuPC9kaXY+Il19

package/esm2020/popup.survey.component.mjs

@@ -0,0 +1,30 @@
+import { Component, Input } from "@angular/core";
+import { BaseAngular } from "./base-angular";
+import * as i0 from "@angular/core";
+import * as i1 from "./survey.component";
+import * as i2 from "@angular/common";
+export class PopupSurveyComponent extends BaseAngular {
+    constructor(changeDetectorRef) {
+        super(changeDetectorRef);
+        changeDetectorRef.detach();
+    }
+    getModel() {
+        return this.model;
+    }
+    get survey() {
+        return this.model.survey;
+    }
+    onModelChanged() {
+        this.model.isShowing = true;
+        this.changeDetectorRef.detectChanges();
+    }
+}
+PopupSurveyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PopupSurveyComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PopupSurveyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: PopupSurveyComponent, selector: "popup-survey", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!!model && model.isShowing\" [class]=\"model.cssRoot\" style=\"position: fixed; bottom: 3px; right: 10px; max-width: 60%;\">\n  <div [class]=\"model.cssHeaderRoot\">\n      <span (click)=\"model.changeExpandCollapse()\" style=\"width: 100%; cursor: pointer;\">\n          <span style=\"padding-right:10px\" [class]=\"model.cssHeaderTitle\">{{model.locTitle.renderedHtml}}</span>\n          <span aria-hidden=\"true\" [class]=\"model.cssButton\"></span>\n      </span>\n      <span *ngIf=\"model.isExpanded\" (click)=\"model.changeExpandCollapse()\" style=\"float: right; cursor: pointer;\">\n          <span style=\"padding-right:10px\" [class]=\"model.cssHeaderTitle\">X</span>\n      </span>\n  </div>\n  <div *ngIf=\"model.isExpanded\" [class]=\"model.cssBody\">\n    <survey [model]=\"model.survey\"></survey>\n  </div>\n</div>", styles: [""], components: [{ type: i1.SurveyComponent, selector: "survey", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PopupSurveyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "popup-survey", template: "<div *ngIf=\"!!model && model.isShowing\" [class]=\"model.cssRoot\" style=\"position: fixed; bottom: 3px; right: 10px; max-width: 60%;\">\n  <div [class]=\"model.cssHeaderRoot\">\n      <span (click)=\"model.changeExpandCollapse()\" style=\"width: 100%; cursor: pointer;\">\n          <span style=\"padding-right:10px\" [class]=\"model.cssHeaderTitle\">{{model.locTitle.renderedHtml}}</span>\n          <span aria-hidden=\"true\" [class]=\"model.cssButton\"></span>\n      </span>\n      <span *ngIf=\"model.isExpanded\" (click)=\"model.changeExpandCollapse()\" style=\"float: right; cursor: pointer;\">\n          <span style=\"padding-right:10px\" [class]=\"model.cssHeaderTitle\">X</span>\n      </span>\n  </div>\n  <div *ngIf=\"model.isExpanded\" [class]=\"model.cssBody\">\n    <survey [model]=\"model.survey\"></survey>\n  </div>\n</div>", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { model: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicG9wdXAuc3VydmV5LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3BhY2thZ2VzL3N1cnZleS1hbmd1bGFyLXVpL3NyYy9wb3B1cC5zdXJ2ZXkuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vcGFja2FnZXMvc3VydmV5LWFuZ3VsYXItdWkvc3JjL3BvcHVwLnN1cnZleS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQXFCLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFcEUsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7O0FBTTdDLE1BQU0sT0FBTyxvQkFBcUIsU0FBUSxXQUE2QjtJQVFyRSxZQUFZLGlCQUFvQztRQUM5QyxLQUFLLENBQUMsaUJBQWlCLENBQUMsQ0FBQztRQUN6QixpQkFBaUIsQ0FBQyxNQUFNLEVBQUUsQ0FBQztJQUM3QixDQUFDO0lBVFMsUUFBUTtRQUNoQixPQUFPLElBQUksQ0FBQyxLQUFLLENBQUM7SUFDcEIsQ0FBQztJQUNELElBQVcsTUFBTTtRQUNmLE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUM7SUFDM0IsQ0FBQztJQUtrQixjQUFjO1FBQy9CLElBQUksQ0FBQyxLQUFLLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQztRQUM1QixJQUFJLENBQUMsaUJBQWlCLENBQUMsYUFBYSxFQUFFLENBQUM7SUFDekMsQ0FBQzs7aUhBZlUsb0JBQW9CO3FHQUFwQixvQkFBb0IsdUdDUmpDLDgwQkFhTTsyRkRMTyxvQkFBb0I7a0JBTGhDLFNBQVM7K0JBQ0UsY0FBYzt3R0FLZixLQUFLO3NCQUFiLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3RvclJlZiwgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBQb3B1cFN1cnZleU1vZGVsLCBTdXJ2ZXlNb2RlbCB9IGZyb20gXCJzdXJ2ZXktY29yZVwiO1xuaW1wb3J0IHsgQmFzZUFuZ3VsYXIgfSBmcm9tIFwiLi9iYXNlLWFuZ3VsYXJcIjtcbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJwb3B1cC1zdXJ2ZXlcIixcbiAgdGVtcGxhdGVVcmw6IFwiLi9wb3B1cC5zdXJ2ZXkuY29tcG9uZW50Lmh0bWxcIixcbiAgc3R5bGVVcmxzOiBbXCIuL3BvcHVwLnN1cnZleS5jb21wb25lbnQuc2Nzc1wiXVxufSlcbmV4cG9ydCBjbGFzcyBQb3B1cFN1cnZleUNvbXBvbmVudCBleHRlbmRzIEJhc2VBbmd1bGFyPFBvcHVwU3VydmV5TW9kZWw+IHtcbiAgQElucHV0KCkgbW9kZWwhOiBQb3B1cFN1cnZleU1vZGVsO1xuICBwcm90ZWN0ZWQgZ2V0TW9kZWwoKTogUG9wdXBTdXJ2ZXlNb2RlbCB7XG4gICAgcmV0dXJuIHRoaXMubW9kZWw7XG4gIH1cbiAgcHVibGljIGdldCBzdXJ2ZXkoKTogU3VydmV5TW9kZWwge1xuICAgIHJldHVybiB0aGlzLm1vZGVsLnN1cnZleTtcbiAgfVxuICBjb25zdHJ1Y3RvcihjaGFuZ2VEZXRlY3RvclJlZjogQ2hhbmdlRGV0ZWN0b3JSZWYpIHtcbiAgICBzdXBlcihjaGFuZ2VEZXRlY3RvclJlZik7XG4gICAgY2hhbmdlRGV0ZWN0b3JSZWYuZGV0YWNoKCk7XG4gIH1cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIG9uTW9kZWxDaGFuZ2VkKCk6IHZvaWQge1xuICAgIHRoaXMubW9kZWwuaXNTaG93aW5nID0gdHJ1ZTtcbiAgICB0aGlzLmNoYW5nZURldGVjdG9yUmVmLmRldGVjdENoYW5nZXMoKTtcbiAgfVxufSIsIjxkaXYgKm5nSWY9XCIhIW1vZGVsICYmIG1vZGVsLmlzU2hvd2luZ1wiIFtjbGFzc109XCJtb2RlbC5jc3NSb290XCIgc3R5bGU9XCJwb3NpdGlvbjogZml4ZWQ7IGJvdHRvbTogM3B4OyByaWdodDogMTBweDsgbWF4LXdpZHRoOiA2MCU7XCI+XG4gIDxkaXYgW2NsYXNzXT1cIm1vZGVsLmNzc0hlYWRlclJvb3RcIj5cbiAgICAgIDxzcGFuIChjbGljayk9XCJtb2RlbC5jaGFuZ2VFeHBhbmRDb2xsYXBzZSgpXCIgc3R5bGU9XCJ3aWR0aDogMTAwJTsgY3Vyc29yOiBwb2ludGVyO1wiPlxuICAgICAgICAgIDxzcGFuIHN0eWxlPVwicGFkZGluZy1yaWdodDoxMHB4XCIgW2NsYXNzXT1cIm1vZGVsLmNzc0hlYWRlclRpdGxlXCI+e3ttb2RlbC5sb2NUaXRsZS5yZW5kZXJlZEh0bWx9fTwvc3Bhbj5cbiAgICAgICAgICA8c3BhbiBhcmlhLWhpZGRlbj1cInRydWVcIiBbY2xhc3NdPVwibW9kZWwuY3NzQnV0dG9uXCI+PC9zcGFuPlxuICAgICAgPC9zcGFuPlxuICAgICAgPHNwYW4gKm5nSWY9XCJtb2RlbC5pc0V4cGFuZGVkXCIgKGNsaWNrKT1cIm1vZGVsLmNoYW5nZUV4cGFuZENvbGxhcHNlKClcIiBzdHlsZT1cImZsb2F0OiByaWdodDsgY3Vyc29yOiBwb2ludGVyO1wiPlxuICAgICAgICAgIDxzcGFuIHN0eWxlPVwicGFkZGluZy1yaWdodDoxMHB4XCIgW2NsYXNzXT1cIm1vZGVsLmNzc0hlYWRlclRpdGxlXCI+WDwvc3Bhbj5cbiAgICAgIDwvc3Bhbj5cbiAgPC9kaXY+XG4gIDxkaXYgKm5nSWY9XCJtb2RlbC5pc0V4cGFuZGVkXCIgW2NsYXNzXT1cIm1vZGVsLmNzc0JvZHlcIj5cbiAgICA8c3VydmV5IFttb2RlbF09XCJtb2RlbC5zdXJ2ZXlcIj48L3N1cnZleT5cbiAgPC9kaXY+XG48L2Rpdj4iXX0=

package/fesm2015/survey-angular-ui.mjs

@@ -132,7 +132,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
 
 class DynamicHeadComponent extends EmbeddedViewContentComponent {
     get ariaLabel() {
-        return this.element.getType() !== "radiogroup" ? this.element.locTitle.renderedHtml : null;
+        return this.element.titleAriaLabel;
     }
 }
 DynamicHeadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DynamicHeadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -453,6 +453,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 args: ["surveyContainer", { static: false }]
             }] } });
 
+class PopupSurveyComponent extends BaseAngular {
+    constructor(changeDetectorRef) {
+        super(changeDetectorRef);
+        changeDetectorRef.detach();
+    }
+    getModel() {
+        return this.model;
+    }
+    get survey() {
+        return this.model.survey;
+    }
+    onModelChanged() {
+        this.model.isShowing = true;
+        this.changeDetectorRef.detectChanges();
+    }
+}
+PopupSurveyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PopupSurveyComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PopupSurveyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: PopupSurveyComponent, selector: "popup-survey", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!!model && model.isShowing\" [class]=\"model.cssRoot\" style=\"position: fixed; bottom: 3px; right: 10px; max-width: 60%;\">\n  <div [class]=\"model.cssHeaderRoot\">\n      <span (click)=\"model.changeExpandCollapse()\" style=\"width: 100%; cursor: pointer;\">\n          <span style=\"padding-right:10px\" [class]=\"model.cssHeaderTitle\">{{model.locTitle.renderedHtml}}</span>\n          <span aria-hidden=\"true\" [class]=\"model.cssButton\"></span>\n      </span>\n      <span *ngIf=\"model.isExpanded\" (click)=\"model.changeExpandCollapse()\" style=\"float: right; cursor: pointer;\">\n          <span style=\"padding-right:10px\" [class]=\"model.cssHeaderTitle\">X</span>\n      </span>\n  </div>\n  <div *ngIf=\"model.isExpanded\" [class]=\"model.cssBody\">\n    <survey [model]=\"model.survey\"></survey>\n  </div>\n</div>", styles: [""], components: [{ type: SurveyComponent, selector: "survey", inputs: ["model"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PopupSurveyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "popup-survey", template: "<div *ngIf=\"!!model && model.isShowing\" [class]=\"model.cssRoot\" style=\"position: fixed; bottom: 3px; right: 10px; max-width: 60%;\">\n  <div [class]=\"model.cssHeaderRoot\">\n      <span (click)=\"model.changeExpandCollapse()\" style=\"width: 100%; cursor: pointer;\">\n          <span style=\"padding-right:10px\" [class]=\"model.cssHeaderTitle\">{{model.locTitle.renderedHtml}}</span>\n          <span aria-hidden=\"true\" [class]=\"model.cssButton\"></span>\n      </span>\n      <span *ngIf=\"model.isExpanded\" (click)=\"model.changeExpandCollapse()\" style=\"float: right; cursor: pointer;\">\n          <span style=\"padding-right:10px\" [class]=\"model.cssHeaderTitle\">X</span>\n      </span>\n  </div>\n  <div *ngIf=\"model.isExpanded\" [class]=\"model.cssBody\">\n    <survey [model]=\"model.survey\"></survey>\n  </div>\n</div>", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { model: [{
+                type: Input
+            }] } });
+
 class ErrorsComponent {
     constructor(viewContainerRef) {
         this.viewContainerRef = viewContainerRef;
@@ -831,10 +856,10 @@ class DropdownComponent {
     }
 }
 DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: DropdownComponent, selector: "sv-ng-dropdown, '[sv-ng-dropdown]'", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.cssClasses.selectWrapper\">\n    <div *ngIf=\"!model.isReadOnly\" [tabindex]=\"model.isInputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (click)=\"click($event)\" (blur)=\"blur($event)\"\n        (keyup)=\"keyup($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n        [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n        [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.role]=\"model.ariaRole\">\n        <div [class]=\"model.cssClasses.controlValue\">{{ model.readOnlyText }}</div>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\"\n            [class]=\"model.cssClasses.cleanButton\" (click)=\"clear($event)\" [visible]=\"!model.isEmpty()\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\"\n                [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"popupModel\"></sv-ng-popup>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">{{ model.readOnlyText }}</div>\n</div>", components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
+DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: DropdownComponent, selector: "sv-ng-dropdown, '[sv-ng-dropdown]'", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.cssClasses.selectWrapper\">\n    <div *ngIf=\"!model.isReadOnly\" [tabindex]=\"model.isInputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (click)=\"click($event)\" (blur)=\"blur($event)\"\n        (keyup)=\"keyup($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n        [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n        [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.role]=\"model.ariaRole\">\n        <div [class]=\"model.cssClasses.controlValue\">{{ model.readOnlyText }}</div>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\"\n            [class]=\"model.cssClasses.cleanButton\" (click)=\"clear($event)\" [visible]=\"!model.isEmpty()\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.cleanButtonCaption\"\n                [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"popupModel\"></sv-ng-popup>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">{{ model.readOnlyText }}</div>\n</div>", components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: "sv-ng-dropdown, '[sv-ng-dropdown]'", template: "<div [class]=\"model.cssClasses.selectWrapper\">\n    <div *ngIf=\"!model.isReadOnly\" [tabindex]=\"model.isInputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (click)=\"click($event)\" (blur)=\"blur($event)\"\n        (keyup)=\"keyup($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n        [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n        [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.role]=\"model.ariaRole\">\n        <div [class]=\"model.cssClasses.controlValue\">{{ model.readOnlyText }}</div>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\"\n            [class]=\"model.cssClasses.cleanButton\" (click)=\"clear($event)\" [visible]=\"!model.isEmpty()\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\"\n                [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"popupModel\"></sv-ng-popup>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">{{ model.readOnlyText }}</div>\n</div>" }]
+            args: [{ selector: "sv-ng-dropdown, '[sv-ng-dropdown]'", template: "<div [class]=\"model.cssClasses.selectWrapper\">\n    <div *ngIf=\"!model.isReadOnly\" [tabindex]=\"model.isInputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (click)=\"click($event)\" (blur)=\"blur($event)\"\n        (keyup)=\"keyup($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n        [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n        [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.role]=\"model.ariaRole\">\n        <div [class]=\"model.cssClasses.controlValue\">{{ model.readOnlyText }}</div>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\"\n            [class]=\"model.cssClasses.cleanButton\" (click)=\"clear($event)\" [visible]=\"!model.isEmpty()\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.cleanButtonCaption\"\n                [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"popupModel\"></sv-ng-popup>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">{{ model.readOnlyText }}</div>\n</div>" }]
         }], propDecorators: { model: [{
                 type: Input
             }] } });
@@ -889,10 +914,10 @@ class TagboxComponent {
     }
 }
 TagboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TagboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TagboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: TagboxComponent, selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.cssClasses.selectWrapper\">\n    <div *ngIf=\"!model.isReadOnly\" [tabindex]=\"model.isInputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (click)=\"click($event)\" (blur)=\"blur($event)\"\n        (keyup)=\"keyup($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n        [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n        [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.role]=\"model.ariaRole\">\n        <div *ngIf=\"model.isEmpty()\" [class]=\"model.cssClasses.controlValue\">{{ model.placeholder }}</div>\n        <ul *ngIf=\"!model.isEmpty()\" [class]=\"model.cssClasses.controlValue\">\n            <sv-ng-tagbox-item *ngFor=\"let item of model.selectedItems\" [item]=\"item\" [question]=\"model\"></sv-ng-tagbox-item>\n        </ul>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\" [class]=\"model.cssClasses.cleanButton\"\n            (click)=\"clear($event)\" [visible]=\"!model.isEmpty()\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\"\n                [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"popupModel\"></sv-ng-popup>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">{{ model.readOnlyText }}</div>\n</div>", components: [{ type: TagboxItemComponent, selector: "sv-ng-tagbox-item, '[sv-ng-tagbox-item]'", inputs: ["item", "question"] }, { type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
+TagboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: TagboxComponent, selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.cssClasses.selectWrapper\">\n    <div *ngIf=\"!model.isReadOnly\" [tabindex]=\"model.isInputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (click)=\"click($event)\" (blur)=\"blur($event)\"\n        (keyup)=\"keyup($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n        [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n        [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.role]=\"model.ariaRole\">\n        <div *ngIf=\"model.isEmpty()\" [class]=\"model.cssClasses.controlValue\">{{ model.placeholder }}</div>\n        <ul *ngIf=\"!model.isEmpty()\" [class]=\"model.cssClasses.controlValue\">\n            <sv-ng-tagbox-item *ngFor=\"let item of model.selectedItems\" [item]=\"item\" [question]=\"model\"></sv-ng-tagbox-item>\n        </ul>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\" [class]=\"model.cssClasses.cleanButton\"\n            (click)=\"clear($event)\" [visible]=\"!model.isEmpty()\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.cleanButtonCaption\"\n                [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"popupModel\"></sv-ng-popup>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">{{ model.readOnlyText }}</div>\n</div>", components: [{ type: TagboxItemComponent, selector: "sv-ng-tagbox-item, '[sv-ng-tagbox-item]'", inputs: ["item", "question"] }, { type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TagboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", template: "<div [class]=\"model.cssClasses.selectWrapper\">\n    <div *ngIf=\"!model.isReadOnly\" [tabindex]=\"model.isInputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (click)=\"click($event)\" (blur)=\"blur($event)\"\n        (keyup)=\"keyup($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n        [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n        [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.role]=\"model.ariaRole\">\n        <div *ngIf=\"model.isEmpty()\" [class]=\"model.cssClasses.controlValue\">{{ model.placeholder }}</div>\n        <ul *ngIf=\"!model.isEmpty()\" [class]=\"model.cssClasses.controlValue\">\n            <sv-ng-tagbox-item *ngFor=\"let item of model.selectedItems\" [item]=\"item\" [question]=\"model\"></sv-ng-tagbox-item>\n        </ul>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\" [class]=\"model.cssClasses.cleanButton\"\n            (click)=\"clear($event)\" [visible]=\"!model.isEmpty()\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\"\n                [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"popupModel\"></sv-ng-popup>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">{{ model.readOnlyText }}</div>\n</div>" }]
+            args: [{ selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", template: "<div [class]=\"model.cssClasses.selectWrapper\">\n    <div *ngIf=\"!model.isReadOnly\" [tabindex]=\"model.isInputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (click)=\"click($event)\" (blur)=\"blur($event)\"\n        (keyup)=\"keyup($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n        [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n        [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.role]=\"model.ariaRole\">\n        <div *ngIf=\"model.isEmpty()\" [class]=\"model.cssClasses.controlValue\">{{ model.placeholder }}</div>\n        <ul *ngIf=\"!model.isEmpty()\" [class]=\"model.cssClasses.controlValue\">\n            <sv-ng-tagbox-item *ngFor=\"let item of model.selectedItems\" [item]=\"item\" [question]=\"model\"></sv-ng-tagbox-item>\n        </ul>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\" [class]=\"model.cssClasses.cleanButton\"\n            (click)=\"clear($event)\" [visible]=\"!model.isEmpty()\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.cleanButtonCaption\"\n                [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"popupModel\"></sv-ng-popup>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">{{ model.readOnlyText }}</div>\n</div>" }]
         }], propDecorators: { model: [{
                 type: Input
             }] } });
@@ -1372,10 +1397,10 @@ class ListItemComponent extends BaseAngular {
     }
 }
 ListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ListItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ListItemComponent, selector: "sv-ng-list-item, '[sv-ng-list-item]'", inputs: { element: "element", model: "model", listModel: "listModel" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <li role=\"option\" [key2click] [visible]=\"listModel.isItemVisible(model)\" [class]=\"class\" [style.paddingLeft]=\"paddingLeft\" [attr.aria-selected]=\"ariaSelected\" (click)=\"click($event)\" (pointerdown)=\"pointerdown($event)\">\n    <ng-container *ngIf=\"!model.component\">\n      <svg *ngIf=\"model.iconName\" class=\"sv-list__item-icon\" [iconName]=\"model.iconName\" [size]=\"24\"\n        sv-ng-svg-icon></svg>\n      <span>{{ model.title }}</span>\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  </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"] }], directives: [{ type: Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+ListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ListItemComponent, selector: "sv-ng-list-item, '[sv-ng-list-item]'", inputs: { element: "element", model: "model", listModel: "listModel" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <li role=\"option\" [key2click] [visible]=\"listModel.isItemVisible(model)\" [class]=\"class\" [style.paddingLeft]=\"paddingLeft\" [attr.aria-selected]=\"ariaSelected\" (click)=\"click($event)\" (pointerdown)=\"pointerdown($event)\">\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      <span>{{ model.title }}</span>\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  </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"] }], directives: [{ type: Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ListItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: "sv-ng-list-item, '[sv-ng-list-item]'", template: "<ng-template #template>\n  <li role=\"option\" [key2click] [visible]=\"listModel.isItemVisible(model)\" [class]=\"class\" [style.paddingLeft]=\"paddingLeft\" [attr.aria-selected]=\"ariaSelected\" (click)=\"click($event)\" (pointerdown)=\"pointerdown($event)\">\n    <ng-container *ngIf=\"!model.component\">\n      <svg *ngIf=\"model.iconName\" class=\"sv-list__item-icon\" [iconName]=\"model.iconName\" [size]=\"24\"\n        sv-ng-svg-icon></svg>\n      <span>{{ model.title }}</span>\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  </li>\n</ng-template>", styles: [":host{display:none}\n"] }]
+            args: [{ selector: "sv-ng-list-item, '[sv-ng-list-item]'", template: "<ng-template #template>\n  <li role=\"option\" [key2click] [visible]=\"listModel.isItemVisible(model)\" [class]=\"class\" [style.paddingLeft]=\"paddingLeft\" [attr.aria-selected]=\"ariaSelected\" (click)=\"click($event)\" (pointerdown)=\"pointerdown($event)\">\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      <span>{{ model.title }}</span>\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  </li>\n</ng-template>", styles: [":host{display:none}\n"] }]
         }], propDecorators: { element: [{
                 type: Input
             }], model: [{
@@ -1400,10 +1425,10 @@ class ListComponent extends BaseAngular {
     }
 }
 ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ListComponent, selector: "sv-ng-list, '[sv-ng-list]'", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n    <div class=\"sv-list__container\">\n        <div *ngIf=\"model.needFilter\" class=\"sv-list__filter\">\n            <div class=\"sv-list__filter-icon\">\n                <svg class=\"sv-list__item-icon\" [iconName]=\"'icon-search'\" [size]=\"24\" sv-ng-svg-icon></svg>\n            </div>\n            <input type=\"text\" class=\"sv-list__input\" [(ngModel)]=\"model.filteredText\"\n                [attr.aria-label]=\"model.filteredTextPlaceholder || ''\"\n                [attr.placeholder]=\"model.filteredTextPlaceholder || ''\" \n                (keyup)=\"onGoToItems($event)\" />\n        </div>\n        <div *ngIf=\"model.isEmpty\" class=\"sv-list__empty-container\">\n            <div class=\"sv-list__empty-text\" [attr.aria-label]=\"model.emptyMessage || ''\">{{ model.emptyMessage }}</div>\n        </div>\n        <ul class=\"sv-list\" role=\"listbox\" (mousedown)=\"onMouseDown($event)\" (keydown)=\"onKeyDown($event)\">\n            <sv-ng-list-item *ngFor=\"let item of model.renderedActions\" [listModel]=\"model\" [model]=\"item\"></sv-ng-list-item>\n            <!--ko foreach: model.renderedActions -->\n            <!-- ko component: { name: 'sv-list-item', params: { item: $data, model: $parent.model } } -->\n            <!-- /ko -->\n            <!-- /ko -->\n        </ul>\n    </div>\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: ListItemComponent, selector: "sv-ng-list-item, '[sv-ng-list-item]'", inputs: ["element", "model", "listModel"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ListComponent, selector: "sv-ng-list, '[sv-ng-list]'", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n    <div [class]=\"model.cssClasses.root\">\n        <div *ngIf=\"model.needFilter\" [class]=\"model.cssClasses.filter\">\n            <div [class]=\"model.cssClasses.filterIcon\">\n                <svg [iconName]=\"'icon-search'\" [size]=\"24\" sv-ng-svg-icon></svg>\n            </div>\n            <input type=\"text\" [class]=\"model.cssClasses.filterInput\" [(ngModel)]=\"model.filteredText\"\n                [attr.aria-label]=\"model.filteredTextPlaceholder || ''\"\n                [attr.placeholder]=\"model.filteredTextPlaceholder || ''\" \n                (keyup)=\"onGoToItems($event)\" />\n        </div>\n        <div *ngIf=\"model.isEmpty\" [class]=\"model.cssClasses.emptyContainer\">\n            <div [class]=\"model.cssClasses.emptyText\" [attr.aria-label]=\"model.emptyMessage || ''\">{{ model.emptyMessage }}</div>\n        </div>\n        <ul [class]=\"model.cssClasses.itemsContainer\" role=\"listbox\" (mousedown)=\"onMouseDown($event)\" (keydown)=\"onKeyDown($event)\">\n            <sv-ng-list-item *ngFor=\"let item of model.renderedActions\" [listModel]=\"model\" [model]=\"item\"></sv-ng-list-item>\n            <!--ko foreach: model.renderedActions -->\n            <!-- ko component: { name: 'sv-list-item', params: { item: $data, model: $parent.model } } -->\n            <!-- /ko -->\n            <!-- /ko -->\n        </ul>\n    </div>\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: ListItemComponent, selector: "sv-ng-list-item, '[sv-ng-list-item]'", inputs: ["element", "model", "listModel"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
-            args: [{ selector: "sv-ng-list, '[sv-ng-list]'", template: "<ng-template #template>\n    <div class=\"sv-list__container\">\n        <div *ngIf=\"model.needFilter\" class=\"sv-list__filter\">\n            <div class=\"sv-list__filter-icon\">\n                <svg class=\"sv-list__item-icon\" [iconName]=\"'icon-search'\" [size]=\"24\" sv-ng-svg-icon></svg>\n            </div>\n            <input type=\"text\" class=\"sv-list__input\" [(ngModel)]=\"model.filteredText\"\n                [attr.aria-label]=\"model.filteredTextPlaceholder || ''\"\n                [attr.placeholder]=\"model.filteredTextPlaceholder || ''\" \n                (keyup)=\"onGoToItems($event)\" />\n        </div>\n        <div *ngIf=\"model.isEmpty\" class=\"sv-list__empty-container\">\n            <div class=\"sv-list__empty-text\" [attr.aria-label]=\"model.emptyMessage || ''\">{{ model.emptyMessage }}</div>\n        </div>\n        <ul class=\"sv-list\" role=\"listbox\" (mousedown)=\"onMouseDown($event)\" (keydown)=\"onKeyDown($event)\">\n            <sv-ng-list-item *ngFor=\"let item of model.renderedActions\" [listModel]=\"model\" [model]=\"item\"></sv-ng-list-item>\n            <!--ko foreach: model.renderedActions -->\n            <!-- ko component: { name: 'sv-list-item', params: { item: $data, model: $parent.model } } -->\n            <!-- /ko -->\n            <!-- /ko -->\n        </ul>\n    </div>\n</ng-template>", styles: [":host{display:none}\n"] }]
+            args: [{ selector: "sv-ng-list, '[sv-ng-list]'", template: "<ng-template #template>\n    <div [class]=\"model.cssClasses.root\">\n        <div *ngIf=\"model.needFilter\" [class]=\"model.cssClasses.filter\">\n            <div [class]=\"model.cssClasses.filterIcon\">\n                <svg [iconName]=\"'icon-search'\" [size]=\"24\" sv-ng-svg-icon></svg>\n            </div>\n            <input type=\"text\" [class]=\"model.cssClasses.filterInput\" [(ngModel)]=\"model.filteredText\"\n                [attr.aria-label]=\"model.filteredTextPlaceholder || ''\"\n                [attr.placeholder]=\"model.filteredTextPlaceholder || ''\" \n                (keyup)=\"onGoToItems($event)\" />\n        </div>\n        <div *ngIf=\"model.isEmpty\" [class]=\"model.cssClasses.emptyContainer\">\n            <div [class]=\"model.cssClasses.emptyText\" [attr.aria-label]=\"model.emptyMessage || ''\">{{ model.emptyMessage }}</div>\n        </div>\n        <ul [class]=\"model.cssClasses.itemsContainer\" role=\"listbox\" (mousedown)=\"onMouseDown($event)\" (keydown)=\"onKeyDown($event)\">\n            <sv-ng-list-item *ngFor=\"let item of model.renderedActions\" [listModel]=\"model\" [model]=\"item\"></sv-ng-list-item>\n            <!--ko foreach: model.renderedActions -->\n            <!-- ko component: { name: 'sv-list-item', params: { item: $data, model: $parent.model } } -->\n            <!-- /ko -->\n            <!-- /ko -->\n        </ul>\n    </div>\n</ng-template>", styles: [":host{display:none}\n"] }]
         }], propDecorators: { model: [{
                 type: Input
             }] } });
@@ -2148,7 +2173,7 @@ class SurveyAngularModule {
 }
 SurveyAngularModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SurveyAngularModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 SurveyAngularModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SurveyAngularModule, declarations: [VisibleDirective, Key2ClickDirective, PanelDynamicAddBtn, PanelDynamicNextBtn, PanelDynamicPrevBtn, PanelDynamicProgressText, ElementComponent,
-        SurveyComponent, PageComponent, PanelComponent, QuestionComponent, StringViewerComponent, SurveyStringComponent, StringEditorComponent,
+        SurveyComponent, PopupSurveyComponent, PageComponent, PanelComponent, QuestionComponent, StringViewerComponent, SurveyStringComponent, StringEditorComponent,
         QuestionSkeletonComponent, TextQuestionComponent, RadiogroupComponent, RadiogroupItemComponent, CheckboxComponent, CheckboxItemComponent,
         DropdownComponent, DropdownQuestionComponent, DropdownSelectComponent, DropdownOptionItemComponent,
         PopupComponent, PopupContainerComponent,
@@ -2160,7 +2185,7 @@ SurveyAngularModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ver
         SurveyHeaderComponent, ProgressDefaultComponent, ProgressButtonsComponent, SurveyNavigationButton, MatrixQuestionComponent, SvgIconComponent, FileQuestionComponent, SafeUrlPipe, SafeHtmlPipe, CommentQuestionComponent, SignaturePadQuestionComponent, ErrorsComponent,
         MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent, MatrixCellComponent, MatrixTableComponent, MatrixDropdownComponent,
         MatrixDynamicComponent, MatrixDetailButtonComponent, MatrixDynamicRemoveButtonComponent, MatrixDynamicDragDropIconComponent, MatrixRequiredHeader, ExpressionComponent, SafeResourceUrlPipe, BrandInfoComponent,
-        CustomQuestionComponent, CompositeQuestionComponent], imports: [CommonModule, FormsModule], exports: [SurveyComponent, SvgIconComponent] });
+        CustomQuestionComponent, CompositeQuestionComponent], imports: [CommonModule, FormsModule], exports: [SurveyComponent, SvgIconComponent, PopupSurveyComponent] });
 SurveyAngularModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SurveyAngularModule, providers: [PopupService], imports: [[
             CommonModule, FormsModule
         ]] });
@@ -2169,7 +2194,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             args: [{
                     declarations: [
                         VisibleDirective, Key2ClickDirective, PanelDynamicAddBtn, PanelDynamicNextBtn, PanelDynamicPrevBtn, PanelDynamicProgressText, ElementComponent,
-                        SurveyComponent, PageComponent, PanelComponent, QuestionComponent, StringViewerComponent, SurveyStringComponent, StringEditorComponent,
+                        SurveyComponent, PopupSurveyComponent, PageComponent, PanelComponent, QuestionComponent, StringViewerComponent, SurveyStringComponent, StringEditorComponent,
                         QuestionSkeletonComponent, TextQuestionComponent, RadiogroupComponent, RadiogroupItemComponent, CheckboxComponent, CheckboxItemComponent,
                         DropdownComponent, DropdownQuestionComponent, DropdownSelectComponent, DropdownOptionItemComponent,
                         PopupComponent, PopupContainerComponent,
@@ -2187,7 +2212,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                         CommonModule, FormsModule
                     ],
                     exports: [
-                        SurveyComponent, SvgIconComponent
+                        SurveyComponent, SvgIconComponent, PopupSurveyComponent
                     ],
                     providers: [PopupService],
                 }]
@@ -2197,5 +2222,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActionBarComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, ActionComponent, AngularComponentFactory, CheckboxComponent, CheckboxItemComponent, DropdownComponent, DropdownQuestionComponent, HtmlQuestionComponent, ListComponent, ListItemComponent, PageComponent, PopupComponent, PopupContainerComponent, PopupService, QuestionComponent, QuestionSkeletonComponent, RadiogroupComponent, RadiogroupItemComponent, StringViewerComponent, SurveyAngularModule, SurveyComponent, SvgIconComponent, TagboxComponent, TagboxItemComponent, TextQuestionComponent };
+export { ActionBarComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, ActionComponent, AngularComponentFactory, CheckboxComponent, CheckboxItemComponent, DropdownComponent, DropdownQuestionComponent, HtmlQuestionComponent, ListComponent, ListItemComponent, PageComponent, PopupComponent, PopupContainerComponent, PopupService, PopupSurveyComponent, QuestionComponent, QuestionSkeletonComponent, RadiogroupComponent, RadiogroupItemComponent, StringViewerComponent, SurveyAngularModule, SurveyComponent, SvgIconComponent, TagboxComponent, TagboxItemComponent, TextQuestionComponent };
 //# sourceMappingURL=survey-angular-ui.mjs.map