survey-angular-ui 1.9.110 → 1.9.112

package/esm2015/survey-content.component.js

@@ -56,7 +56,7 @@ export class SurveyContentComponent extends BaseAngular {
     }
 }
 SurveyContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SurveyContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurveyContentComponent, selector: "survey-content", inputs: { model: "model" }, viewQueries: [{ propertyName: "rootEl", first: true, predicate: ["surveyContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div #surveyContainer *ngIf=\"!!model\" [class]=\"model.getRootCss()\" [style]=\"model.themeVariables\">\n    <div *ngIf=\"!!model.renderBackgroundImage\" [class]=\"model.css.rootBackgroundImage\" [style]=\"model.backgroundImageStyle\"></div>\n    <form onsubmit=\"return false;\">\n      <div class=\"sv_custom_header\" [hidden]=\"model.hasLogo\"></div>\n      <div [class]=\"model.css.container\">\n        <div *ngIf=\"model.titleView === 'title' && model.renderedHasHeader\" [class]=\"model.css.header\" [survey]=\"model\" sv-ng-survey-header></div>\n        <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'header', needRenderWrapper: false } }\"></ng-template>\n        <div *ngIf=\"model.isShowingPage\" [class]=\"model.bodyContainerCss\">\n          <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'left' } }\"></ng-template>\n          <div [class]=\"model.bodyCss\" [style.maxWidth]=\"model.renderedWidth\" [id]=\"model.activePage ? model.activePage.id : ''\">\n            <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'contentTop' } }\"></ng-template>\n            <!-- ko if: activePage -->\n              <ng-container *ngIf=\"model.activePage\">\n                  <sv-ng-page [model]=\"model.activePage\" [survey]=\"model\"></sv-ng-page>\n              </ng-container>\n              <!-- ko if: activePage.rows.length == 0 && $data.emptyPageTemplate -->\n              <!-- ko template: { name: emptyPageTemplate, data: $data.emptyPageTemplateData || $data } -->\n              <!-- /ko -->\n              <!-- /ko -->\n            <!-- /ko -->\n            <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'contentBottom' } }\"></ng-template>\n          </div>\n          <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'right' } }\"></ng-template>\n        </div>\n        <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'footer', needRenderWrapper: false } }\"></ng-template>\n        <div *ngIf=\"model.state === 'completed' && model.showCompletedPage\" [class]=\"model.completedCss\"\n          [innerHtml]=\"model.processedCompletedHtml\"></div>\n        <ng-template *ngIf=\"model.state === 'completed' && model.showCompletedPage\" [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'completePage' } }\"></ng-template>\n        <div *ngIf=\"model.state === 'completedbefore'\" [class]=\"model.completedBeforeCss\"\n          [innerHtml]=\"model.processedCompletedBeforeHtml\"></div>\n        <div *ngIf=\"model.state === 'loading'\" [class]=\"model.loadingBodyCss\" [innerHtml]=\"model.processedLoadingHtml\"></div>\n        <div *ngIf=\"model.state === 'empty'\" [class]=\"model.css.bodyEmpty\">{{model.emptySurveyText}}</div>\n      </div>\n    </form>\n    <sv-brand-info *ngIf=\"model.showBrandInfo\"></sv-brand-info>\n    <sv-notifier [notifier]=\"model.notifier\"></sv-notifier>\n  </div>\n</ng-template>", components: [{ type: i1.SurveyHeaderComponent, selector: "'[sv-ng-survey-header]'", inputs: ["survey"] }, { type: i2.PageComponent, selector: "page, sv-ng-page", inputs: ["model", "survey"] }, { type: i3.BrandInfoComponent, selector: "sv-brand-info" }, { type: i4.NotifierComponent, selector: "sv-notifier", inputs: ["notifier"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+SurveyContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurveyContentComponent, selector: "survey-content", inputs: { model: "model" }, viewQueries: [{ propertyName: "rootEl", first: true, predicate: ["surveyContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div #surveyContainer *ngIf=\"!!model\" [class]=\"model.getRootCss()\" [style]=\"model.themeVariables\">\n    <div [class]=\"model.wrapperFormCss\">\n      <div *ngIf=\"!!model.renderBackgroundImage\" [class]=\"model.css.rootBackgroundImage\" [style]=\"model.backgroundImageStyle\"></div>\n      <form onsubmit=\"return false;\">\n        <div class=\"sv_custom_header\" [hidden]=\"model.hasLogo\"></div>\n        <div [class]=\"model.css.container\">\n          <div *ngIf=\"model.headerView === 'basic' && model.renderedHasHeader\" [class]=\"model.css.header\" [survey]=\"model\" sv-ng-survey-header></div>\n          <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'header', needRenderWrapper: false } }\"></ng-template>\n          <div *ngIf=\"model.isShowingPage\" [class]=\"model.bodyContainerCss\">\n            <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'left' } }\"></ng-template>\n            <div [class]=\"model.bodyCss\" [style.maxWidth]=\"model.renderedWidth\" [id]=\"model.activePage ? model.activePage.id : ''\">\n              <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'contentTop' } }\"></ng-template>\n              <!-- ko if: activePage -->\n                <ng-container *ngIf=\"model.activePage\">\n                    <sv-ng-page [model]=\"model.activePage\" [survey]=\"model\"></sv-ng-page>\n                </ng-container>\n                <!-- ko if: activePage.rows.length == 0 && $data.emptyPageTemplate -->\n                <!-- ko template: { name: emptyPageTemplate, data: $data.emptyPageTemplateData || $data } -->\n                <!-- /ko -->\n                <!-- /ko -->\n              <!-- /ko -->\n              <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'contentBottom' } }\"></ng-template>\n            </div>\n            <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'right' } }\"></ng-template>\n          </div>\n          <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'footer', needRenderWrapper: false } }\"></ng-template>\n          <div *ngIf=\"model.state === 'completed' && model.showCompletedPage\" [class]=\"model.completedCss\"\n            [innerHtml]=\"model.processedCompletedHtml\"></div>\n          <ng-template *ngIf=\"model.state === 'completed' && model.showCompletedPage\" [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'completePage' } }\"></ng-template>\n          <div *ngIf=\"model.state === 'completedbefore'\" [class]=\"model.completedBeforeCss\"\n            [innerHtml]=\"model.processedCompletedBeforeHtml\"></div>\n          <div *ngIf=\"model.state === 'loading'\" [class]=\"model.loadingBodyCss\" [innerHtml]=\"model.processedLoadingHtml\"></div>\n          <div *ngIf=\"model.state === 'empty'\" [class]=\"model.css.bodyEmpty\">{{model.emptySurveyText}}</div>\n        </div>\n      </form>\n      <sv-brand-info *ngIf=\"model.showBrandInfo\"></sv-brand-info>\n      <sv-notifier [notifier]=\"model.notifier\"></sv-notifier>\n    </div>\n  </div>\n</ng-template>", components: [{ type: i1.SurveyHeaderComponent, selector: "'[sv-ng-survey-header]'", inputs: ["survey"] }, { type: i2.PageComponent, selector: "page, sv-ng-page", inputs: ["model", "survey"] }, { type: i3.BrandInfoComponent, selector: "sv-brand-info" }, { type: i4.NotifierComponent, selector: "sv-notifier", inputs: ["notifier"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyContentComponent, decorators: [{
             type: Component,
             args: [{
@@ -70,4 +70,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 args: ["surveyContainer", { static: false }]
             }] } });
 AngularComponentFactory.Instance.registerComponent("survey", SurveyContentComponent);
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3VydmV5LWNvbnRlbnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL3N1cnZleS1jb250ZW50LmNvbXBvbmVudC50cyIsIi4uLy4uL3NyYy9zdXJ2ZXktY29udGVudC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQSxPQUFPLEVBQWlCLFNBQVMsRUFBYyxLQUFLLEVBQVUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQy9GLE9BQU8sRUFBZSxXQUFXLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFDdkQsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzdDLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLHFCQUFxQixDQUFDOzs7Ozs7Ozs7QUFLOUQsTUFBTSxPQUFPLHNCQUF1QixTQUFRLFdBQXdCO0lBSnBFOztRQU9VLG9CQUFlLEdBQVksS0FBSyxDQUFDO0tBd0MxQztJQXZDVyxRQUFRO1FBQ2hCLE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBQztJQUNwQixDQUFDO0lBQ2tCLGNBQWM7UUFDL0IsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLGFBQWEsRUFBRTtZQUN4QixJQUFJLENBQUMsYUFBYSxDQUFDLHFCQUFxQixFQUFFLENBQUM7WUFDM0MsSUFBSSxDQUFDLGFBQWEsQ0FBQyxjQUFjLEdBQVEsU0FBUyxDQUFDO1NBQ3BEO1FBQ0QsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRTtZQUNoQixJQUFJLENBQUMsS0FBSyxDQUFDLGNBQWMsR0FBRyxHQUFHLEVBQUU7Z0JBQy9CLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztZQUN2QixDQUFDLENBQUM7U0FDSDtRQUNELElBQUksQ0FBQyxlQUFlLEdBQUcsSUFBSSxDQUFDO0lBQzlCLENBQUM7SUFDUSxRQUFRO1FBQ2YsS0FBSyxDQUFDLFFBQVEsRUFBRSxDQUFDO1FBQ2pCLElBQUksQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLElBQUksSUFBSSxDQUFDLEtBQUssQ0FBQyxpQkFBaUIsQ0FBQyxFQUFFO1lBQ2pELFdBQVcsQ0FBQyxXQUFXLEVBQUUsQ0FBQztTQUMzQjtJQUNILENBQUM7SUFDUSxXQUFXO1FBQ2xCLEtBQUssQ0FBQyxXQUFXLEVBQUUsQ0FBQztRQUNwQixJQUFJLENBQUMsQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFO1lBQ2hCLElBQUksQ0FBQyxLQUFLLENBQUMsV0FBVyxHQUFHLFNBQWdCLENBQUM7WUFDMUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxxQkFBcUIsRUFBRSxDQUFDO1lBQ25DLElBQUksQ0FBQyxLQUFLLENBQUMsY0FBYyxHQUFRLFNBQVMsQ0FBQztTQUM1QztJQUNILENBQUM7SUFDRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLGVBQWUsR0FBRyxJQUFJLENBQUM7SUFDOUIsQ0FBQztJQUNRLGtCQUFrQjtRQUN6QixJQUFJLENBQUMsQ0FBQyxJQUFJLENBQUMsS0FBSyxJQUFJLElBQUksQ0FBQyxlQUFlLEVBQUU7WUFDeEMsSUFBSSxDQUFDLEtBQUssQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1lBQ3hELElBQUksQ0FBQyxLQUFLLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQztTQUMvQjtRQUNELEtBQUssQ0FBQyxrQkFBa0IsRUFBRSxDQUFDO0lBQzdCLENBQUM7O29IQTFDVSxzQkFBc0I7d0dBQXRCLHNCQUFzQixvTkNUbkMsZ25HQXNDYzs0RkQ3QkQsc0JBQXNCO2tCQUpsQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxnQkFBZ0I7b0JBQzFCLFdBQVcsRUFBRSxpQ0FBaUM7aUJBQy9DOzhCQUVVLEtBQUs7c0JBQWIsS0FBSztnQkFDMkMsTUFBTTtzQkFBdEQsU0FBUzt1QkFBQyxpQkFBaUIsRUFBRSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUU7O0FBMkNqRCx1QkFBdUIsQ0FBQyxRQUFRLENBQUMsaUJBQWlCLENBQUMsUUFBUSxFQUFFLHNCQUFzQixDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJcbmltcG9ydCB7IEFmdGVyVmlld0luaXQsIENvbXBvbmVudCwgRWxlbWVudFJlZiwgSW5wdXQsIE9uSW5pdCwgVmlld0NoaWxkIH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IFN1cnZleU1vZGVsLCBTdmdSZWdpc3RyeSB9IGZyb20gXCJzdXJ2ZXktY29yZVwiO1xuaW1wb3J0IHsgQmFzZUFuZ3VsYXIgfSBmcm9tIFwiLi9iYXNlLWFuZ3VsYXJcIjtcbmltcG9ydCB7IEFuZ3VsYXJDb21wb25lbnRGYWN0b3J5IH0gZnJvbSBcIi4vY29tcG9uZW50LWZhY3RvcnlcIjtcbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJzdXJ2ZXktY29udGVudFwiLFxuICB0ZW1wbGF0ZVVybDogXCIuL3N1cnZleS1jb250ZW50LmNvbXBvbmVudC5odG1sXCJcbn0pXG5leHBvcnQgY2xhc3MgU3VydmV5Q29udGVudENvbXBvbmVudCBleHRlbmRzIEJhc2VBbmd1bGFyPFN1cnZleU1vZGVsPiBpbXBsZW1lbnRzIE9uSW5pdCwgQWZ0ZXJWaWV3SW5pdCB7XG4gIEBJbnB1dCgpIG1vZGVsITogU3VydmV5TW9kZWw7XG4gIEBWaWV3Q2hpbGQoXCJzdXJ2ZXlDb250YWluZXJcIiwgeyBzdGF0aWM6IGZhbHNlIH0pIHJvb3RFbCE6IEVsZW1lbnRSZWY8SFRNTERpdkVsZW1lbnQ+O1xuICBwcml2YXRlIGlzU3VydmV5VXBkYXRlZDogYm9vbGVhbiA9IGZhbHNlO1xuICBwcm90ZWN0ZWQgZ2V0TW9kZWwoKTogU3VydmV5TW9kZWwge1xuICAgIHJldHVybiB0aGlzLm1vZGVsO1xuICB9XG4gIHByb3RlY3RlZCBvdmVycmlkZSBvbk1vZGVsQ2hhbmdlZCgpOiB2b2lkIHtcbiAgICBpZiAoISF0aGlzLnByZXZpb3VzTW9kZWwpIHtcbiAgICAgIHRoaXMucHJldmlvdXNNb2RlbC5kZXN0cm95UmVzaXplT2JzZXJ2ZXIoKTtcbiAgICAgIHRoaXMucHJldmlvdXNNb2RlbC5yZW5kZXJDYWxsYmFjayA9IDxhbnk+dW5kZWZpbmVkO1xuICAgIH1cbiAgICBpZiAoISF0aGlzLm1vZGVsKSB7XG4gICAgICB0aGlzLm1vZGVsLnJlbmRlckNhbGxiYWNrID0gKCkgPT4ge1xuICAgICAgICB0aGlzLmRldGVjdENoYW5nZXMoKTtcbiAgICAgIH07XG4gICAgfVxuICAgIHRoaXMuaXNTdXJ2ZXlVcGRhdGVkID0gdHJ1ZTtcbiAgfVxuICBvdmVycmlkZSBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICBzdXBlci5uZ09uSW5pdCgpO1xuICAgIGlmICghIXRoaXMubW9kZWwgJiYgdGhpcy5tb2RlbFtcIm5lZWRSZW5kZXJJY29uc1wiXSkge1xuICAgICAgU3ZnUmVnaXN0cnkucmVuZGVySWNvbnMoKTtcbiAgICB9XG4gIH1cbiAgb3ZlcnJpZGUgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgc3VwZXIubmdPbkRlc3Ryb3koKTtcbiAgICBpZiAoISF0aGlzLm1vZGVsKSB7XG4gICAgICB0aGlzLm1vZGVsLnJvb3RFbGVtZW50ID0gdW5kZWZpbmVkIGFzIGFueTtcbiAgICAgIHRoaXMubW9kZWwuZGVzdHJveVJlc2l6ZU9ic2VydmVyKCk7XG4gICAgICB0aGlzLm1vZGVsLnJlbmRlckNhbGxiYWNrID0gPGFueT51bmRlZmluZWQ7XG4gICAgfVxuICB9XG4gIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLmlzU3VydmV5VXBkYXRlZCA9IHRydWU7XG4gIH1cbiAgb3ZlcnJpZGUgbmdBZnRlclZpZXdDaGVja2VkKCk6IHZvaWQge1xuICAgIGlmICghIXRoaXMubW9kZWwgJiYgdGhpcy5pc1N1cnZleVVwZGF0ZWQpIHtcbiAgICAgIHRoaXMubW9kZWwuYWZ0ZXJSZW5kZXJTdXJ2ZXkodGhpcy5yb290RWwubmF0aXZlRWxlbWVudCk7XG4gICAgICB0aGlzLm1vZGVsLnN0YXJ0VGltZXJGcm9tVUkoKTtcbiAgICB9XG4gICAgc3VwZXIubmdBZnRlclZpZXdDaGVja2VkKCk7XG4gIH1cbn1cblxuQW5ndWxhckNvbXBvbmVudEZhY3RvcnkuSW5zdGFuY2UucmVnaXN0ZXJDb21wb25lbnQoXCJzdXJ2ZXlcIiwgU3VydmV5Q29udGVudENvbXBvbmVudCk7IiwiPG5nLXRlbXBsYXRlICN0ZW1wbGF0ZT5cbiAgPGRpdiAjc3VydmV5Q29udGFpbmVyICpuZ0lmPVwiISFtb2RlbFwiIFtjbGFzc109XCJtb2RlbC5nZXRSb290Q3NzKClcIiBbc3R5bGVdPVwibW9kZWwudGhlbWVWYXJpYWJsZXNcIj5cbiAgICA8ZGl2ICpuZ0lmPVwiISFtb2RlbC5yZW5kZXJCYWNrZ3JvdW5kSW1hZ2VcIiBbY2xhc3NdPVwibW9kZWwuY3NzLnJvb3RCYWNrZ3JvdW5kSW1hZ2VcIiBbc3R5bGVdPVwibW9kZWwuYmFja2dyb3VuZEltYWdlU3R5bGVcIj48L2Rpdj5cbiAgICA8Zm9ybSBvbnN1Ym1pdD1cInJldHVybiBmYWxzZTtcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJzdl9jdXN0b21faGVhZGVyXCIgW2hpZGRlbl09XCJtb2RlbC5oYXNMb2dvXCI+PC9kaXY+XG4gICAgICA8ZGl2IFtjbGFzc109XCJtb2RlbC5jc3MuY29udGFpbmVyXCI+XG4gICAgICAgIDxkaXYgKm5nSWY9XCJtb2RlbC50aXRsZVZpZXcgPT09ICd0aXRsZScgJiYgbW9kZWwucmVuZGVyZWRIYXNIZWFkZXJcIiBbY2xhc3NdPVwibW9kZWwuY3NzLmhlYWRlclwiIFtzdXJ2ZXldPVwibW9kZWxcIiBzdi1uZy1zdXJ2ZXktaGVhZGVyPjwvZGl2PlxuICAgICAgICA8bmctdGVtcGxhdGUgW2NvbXBvbmVudF09XCJ7IG5hbWU6ICdzdi1jb21wb25lbnRzLWNvbnRhaW5lcicsIGRhdGE6IHsgc3VydmV5OiBtb2RlbCwgY29udGFpbmVyOiAnaGVhZGVyJywgbmVlZFJlbmRlcldyYXBwZXI6IGZhbHNlIH0gfVwiPjwvbmctdGVtcGxhdGU+XG4gICAgICAgIDxkaXYgKm5nSWY9XCJtb2RlbC5pc1Nob3dpbmdQYWdlXCIgW2NsYXNzXT1cIm1vZGVsLmJvZHlDb250YWluZXJDc3NcIj5cbiAgICAgICAgICA8bmctdGVtcGxhdGUgW2NvbXBvbmVudF09XCJ7IG5hbWU6ICdzdi1jb21wb25lbnRzLWNvbnRhaW5lcicsIGRhdGE6IHsgc3VydmV5OiBtb2RlbCwgY29udGFpbmVyOiAnbGVmdCcgfSB9XCI+PC9uZy10ZW1wbGF0ZT5cbiAgICAgICAgICA8ZGl2IFtjbGFzc109XCJtb2RlbC5ib2R5Q3NzXCIgW3N0eWxlLm1heFdpZHRoXT1cIm1vZGVsLnJlbmRlcmVkV2lkdGhcIiBbaWRdPVwibW9kZWwuYWN0aXZlUGFnZSA/IG1vZGVsLmFjdGl2ZVBhZ2UuaWQgOiAnJ1wiPlxuICAgICAgICAgICAgPG5nLXRlbXBsYXRlIFtjb21wb25lbnRdPVwieyBuYW1lOiAnc3YtY29tcG9uZW50cy1jb250YWluZXInLCBkYXRhOiB7IHN1cnZleTogbW9kZWwsIGNvbnRhaW5lcjogJ2NvbnRlbnRUb3AnIH0gfVwiPjwvbmctdGVtcGxhdGU+XG4gICAgICAgICAgICA8IS0tIGtvIGlmOiBhY3RpdmVQYWdlIC0tPlxuICAgICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwibW9kZWwuYWN0aXZlUGFnZVwiPlxuICAgICAgICAgICAgICAgICAgPHN2LW5nLXBhZ2UgW21vZGVsXT1cIm1vZGVsLmFjdGl2ZVBhZ2VcIiBbc3VydmV5XT1cIm1vZGVsXCI+PC9zdi1uZy1wYWdlPlxuICAgICAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgICAgPCEtLSBrbyBpZjogYWN0aXZlUGFnZS5yb3dzLmxlbmd0aCA9PSAwICYmICRkYXRhLmVtcHR5UGFnZVRlbXBsYXRlIC0tPlxuICAgICAgICAgICAgICA8IS0tIGtvIHRlbXBsYXRlOiB7IG5hbWU6IGVtcHR5UGFnZVRlbXBsYXRlLCBkYXRhOiAkZGF0YS5lbXB0eVBhZ2VUZW1wbGF0ZURhdGEgfHwgJGRhdGEgfSAtLT5cbiAgICAgICAgICAgICAgPCEtLSAva28gLS0+XG4gICAgICAgICAgICAgIDwhLS0gL2tvIC0tPlxuICAgICAgICAgICAgPCEtLSAva28gLS0+XG4gICAgICAgICAgICA8bmctdGVtcGxhdGUgW2NvbXBvbmVudF09XCJ7IG5hbWU6ICdzdi1jb21wb25lbnRzLWNvbnRhaW5lcicsIGRhdGE6IHsgc3VydmV5OiBtb2RlbCwgY29udGFpbmVyOiAnY29udGVudEJvdHRvbScgfSB9XCI+PC9uZy10ZW1wbGF0ZT5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8bmctdGVtcGxhdGUgW2NvbXBvbmVudF09XCJ7IG5hbWU6ICdzdi1jb21wb25lbnRzLWNvbnRhaW5lcicsIGRhdGE6IHsgc3VydmV5OiBtb2RlbCwgY29udGFpbmVyOiAncmlnaHQnIH0gfVwiPjwvbmctdGVtcGxhdGU+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8bmctdGVtcGxhdGUgW2NvbXBvbmVudF09XCJ7IG5hbWU6ICdzdi1jb21wb25lbnRzLWNvbnRhaW5lcicsIGRhdGE6IHsgc3VydmV5OiBtb2RlbCwgY29udGFpbmVyOiAnZm9vdGVyJywgbmVlZFJlbmRlcldyYXBwZXI6IGZhbHNlIH0gfVwiPjwvbmctdGVtcGxhdGU+XG4gICAgICAgIDxkaXYgKm5nSWY9XCJtb2RlbC5zdGF0ZSA9PT0gJ2NvbXBsZXRlZCcgJiYgbW9kZWwuc2hvd0NvbXBsZXRlZFBhZ2VcIiBbY2xhc3NdPVwibW9kZWwuY29tcGxldGVkQ3NzXCJcbiAgICAgICAgICBbaW5uZXJIdG1sXT1cIm1vZGVsLnByb2Nlc3NlZENvbXBsZXRlZEh0bWxcIj48L2Rpdj5cbiAgICAgICAgPG5nLXRlbXBsYXRlICpuZ0lmPVwibW9kZWwuc3RhdGUgPT09ICdjb21wbGV0ZWQnICYmIG1vZGVsLnNob3dDb21wbGV0ZWRQYWdlXCIgW2NvbXBvbmVudF09XCJ7IG5hbWU6ICdzdi1jb21wb25lbnRzLWNvbnRhaW5lcicsIGRhdGE6IHsgc3VydmV5OiBtb2RlbCwgY29udGFpbmVyOiAnY29tcGxldGVQYWdlJyB9IH1cIj48L25nLXRlbXBsYXRlPlxuICAgICAgICA8ZGl2ICpuZ0lmPVwibW9kZWwuc3RhdGUgPT09ICdjb21wbGV0ZWRiZWZvcmUnXCIgW2NsYXNzXT1cIm1vZGVsLmNvbXBsZXRlZEJlZm9yZUNzc1wiXG4gICAgICAgICAgW2lubmVySHRtbF09XCJtb2RlbC5wcm9jZXNzZWRDb21wbGV0ZWRCZWZvcmVIdG1sXCI+PC9kaXY+XG4gICAgICAgIDxkaXYgKm5nSWY9XCJtb2RlbC5zdGF0ZSA9PT0gJ2xvYWRpbmcnXCIgW2NsYXNzXT1cIm1vZGVsLmxvYWRpbmdCb2R5Q3NzXCIgW2lubmVySHRtbF09XCJtb2RlbC5wcm9jZXNzZWRMb2FkaW5nSHRtbFwiPjwvZGl2PlxuICAgICAgICA8ZGl2ICpuZ0lmPVwibW9kZWwuc3RhdGUgPT09ICdlbXB0eSdcIiBbY2xhc3NdPVwibW9kZWwuY3NzLmJvZHlFbXB0eVwiPnt7bW9kZWwuZW1wdHlTdXJ2ZXlUZXh0fX08L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZm9ybT5cbiAgICA8c3YtYnJhbmQtaW5mbyAqbmdJZj1cIm1vZGVsLnNob3dCcmFuZEluZm9cIj48L3N2LWJyYW5kLWluZm8+XG4gICAgPHN2LW5vdGlmaWVyIFtub3RpZmllcl09XCJtb2RlbC5ub3RpZmllclwiPjwvc3Ytbm90aWZpZXI+XG4gIDwvZGl2PlxuPC9uZy10ZW1wbGF0ZT4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3VydmV5LWNvbnRlbnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL3N1cnZleS1jb250ZW50LmNvbXBvbmVudC50cyIsIi4uLy4uL3NyYy9zdXJ2ZXktY29udGVudC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQSxPQUFPLEVBQWlCLFNBQVMsRUFBYyxLQUFLLEVBQVUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQy9GLE9BQU8sRUFBZSxXQUFXLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFDdkQsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzdDLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLHFCQUFxQixDQUFDOzs7Ozs7Ozs7QUFLOUQsTUFBTSxPQUFPLHNCQUF1QixTQUFRLFdBQXdCO0lBSnBFOztRQU9VLG9CQUFlLEdBQVksS0FBSyxDQUFDO0tBd0MxQztJQXZDVyxRQUFRO1FBQ2hCLE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBQztJQUNwQixDQUFDO0lBQ2tCLGNBQWM7UUFDL0IsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLGFBQWEsRUFBRTtZQUN4QixJQUFJLENBQUMsYUFBYSxDQUFDLHFCQUFxQixFQUFFLENBQUM7WUFDM0MsSUFBSSxDQUFDLGFBQWEsQ0FBQyxjQUFjLEdBQVEsU0FBUyxDQUFDO1NBQ3BEO1FBQ0QsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRTtZQUNoQixJQUFJLENBQUMsS0FBSyxDQUFDLGNBQWMsR0FBRyxHQUFHLEVBQUU7Z0JBQy9CLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztZQUN2QixDQUFDLENBQUM7U0FDSDtRQUNELElBQUksQ0FBQyxlQUFlLEdBQUcsSUFBSSxDQUFDO0lBQzlCLENBQUM7SUFDUSxRQUFRO1FBQ2YsS0FBSyxDQUFDLFFBQVEsRUFBRSxDQUFDO1FBQ2pCLElBQUksQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLElBQUksSUFBSSxDQUFDLEtBQUssQ0FBQyxpQkFBaUIsQ0FBQyxFQUFFO1lBQ2pELFdBQVcsQ0FBQyxXQUFXLEVBQUUsQ0FBQztTQUMzQjtJQUNILENBQUM7SUFDUSxXQUFXO1FBQ2xCLEtBQUssQ0FBQyxXQUFXLEVBQUUsQ0FBQztRQUNwQixJQUFJLENBQUMsQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFO1lBQ2hCLElBQUksQ0FBQyxLQUFLLENBQUMsV0FBVyxHQUFHLFNBQWdCLENBQUM7WUFDMUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxxQkFBcUIsRUFBRSxDQUFDO1lBQ25DLElBQUksQ0FBQyxLQUFLLENBQUMsY0FBYyxHQUFRLFNBQVMsQ0FBQztTQUM1QztJQUNILENBQUM7SUFDRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLGVBQWUsR0FBRyxJQUFJLENBQUM7SUFDOUIsQ0FBQztJQUNRLGtCQUFrQjtRQUN6QixJQUFJLENBQUMsQ0FBQyxJQUFJLENBQUMsS0FBSyxJQUFJLElBQUksQ0FBQyxlQUFlLEVBQUU7WUFDeEMsSUFBSSxDQUFDLEtBQUssQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1lBQ3hELElBQUksQ0FBQyxLQUFLLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQztTQUMvQjtRQUNELEtBQUssQ0FBQyxrQkFBa0IsRUFBRSxDQUFDO0lBQzdCLENBQUM7O29IQTFDVSxzQkFBc0I7d0dBQXRCLHNCQUFzQixvTkNUbkMsK3VHQXdDYzs0RkQvQkQsc0JBQXNCO2tCQUpsQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxnQkFBZ0I7b0JBQzFCLFdBQVcsRUFBRSxpQ0FBaUM7aUJBQy9DOzhCQUVVLEtBQUs7c0JBQWIsS0FBSztnQkFDMkMsTUFBTTtzQkFBdEQsU0FBUzt1QkFBQyxpQkFBaUIsRUFBRSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUU7O0FBMkNqRCx1QkFBdUIsQ0FBQyxRQUFRLENBQUMsaUJBQWlCLENBQUMsUUFBUSxFQUFFLHNCQUFzQixDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJcbmltcG9ydCB7IEFmdGVyVmlld0luaXQsIENvbXBvbmVudCwgRWxlbWVudFJlZiwgSW5wdXQsIE9uSW5pdCwgVmlld0NoaWxkIH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IFN1cnZleU1vZGVsLCBTdmdSZWdpc3RyeSB9IGZyb20gXCJzdXJ2ZXktY29yZVwiO1xuaW1wb3J0IHsgQmFzZUFuZ3VsYXIgfSBmcm9tIFwiLi9iYXNlLWFuZ3VsYXJcIjtcbmltcG9ydCB7IEFuZ3VsYXJDb21wb25lbnRGYWN0b3J5IH0gZnJvbSBcIi4vY29tcG9uZW50LWZhY3RvcnlcIjtcbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJzdXJ2ZXktY29udGVudFwiLFxuICB0ZW1wbGF0ZVVybDogXCIuL3N1cnZleS1jb250ZW50LmNvbXBvbmVudC5odG1sXCJcbn0pXG5leHBvcnQgY2xhc3MgU3VydmV5Q29udGVudENvbXBvbmVudCBleHRlbmRzIEJhc2VBbmd1bGFyPFN1cnZleU1vZGVsPiBpbXBsZW1lbnRzIE9uSW5pdCwgQWZ0ZXJWaWV3SW5pdCB7XG4gIEBJbnB1dCgpIG1vZGVsITogU3VydmV5TW9kZWw7XG4gIEBWaWV3Q2hpbGQoXCJzdXJ2ZXlDb250YWluZXJcIiwgeyBzdGF0aWM6IGZhbHNlIH0pIHJvb3RFbCE6IEVsZW1lbnRSZWY8SFRNTERpdkVsZW1lbnQ+O1xuICBwcml2YXRlIGlzU3VydmV5VXBkYXRlZDogYm9vbGVhbiA9IGZhbHNlO1xuICBwcm90ZWN0ZWQgZ2V0TW9kZWwoKTogU3VydmV5TW9kZWwge1xuICAgIHJldHVybiB0aGlzLm1vZGVsO1xuICB9XG4gIHByb3RlY3RlZCBvdmVycmlkZSBvbk1vZGVsQ2hhbmdlZCgpOiB2b2lkIHtcbiAgICBpZiAoISF0aGlzLnByZXZpb3VzTW9kZWwpIHtcbiAgICAgIHRoaXMucHJldmlvdXNNb2RlbC5kZXN0cm95UmVzaXplT2JzZXJ2ZXIoKTtcbiAgICAgIHRoaXMucHJldmlvdXNNb2RlbC5yZW5kZXJDYWxsYmFjayA9IDxhbnk+dW5kZWZpbmVkO1xuICAgIH1cbiAgICBpZiAoISF0aGlzLm1vZGVsKSB7XG4gICAgICB0aGlzLm1vZGVsLnJlbmRlckNhbGxiYWNrID0gKCkgPT4ge1xuICAgICAgICB0aGlzLmRldGVjdENoYW5nZXMoKTtcbiAgICAgIH07XG4gICAgfVxuICAgIHRoaXMuaXNTdXJ2ZXlVcGRhdGVkID0gdHJ1ZTtcbiAgfVxuICBvdmVycmlkZSBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICBzdXBlci5uZ09uSW5pdCgpO1xuICAgIGlmICghIXRoaXMubW9kZWwgJiYgdGhpcy5tb2RlbFtcIm5lZWRSZW5kZXJJY29uc1wiXSkge1xuICAgICAgU3ZnUmVnaXN0cnkucmVuZGVySWNvbnMoKTtcbiAgICB9XG4gIH1cbiAgb3ZlcnJpZGUgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgc3VwZXIubmdPbkRlc3Ryb3koKTtcbiAgICBpZiAoISF0aGlzLm1vZGVsKSB7XG4gICAgICB0aGlzLm1vZGVsLnJvb3RFbGVtZW50ID0gdW5kZWZpbmVkIGFzIGFueTtcbiAgICAgIHRoaXMubW9kZWwuZGVzdHJveVJlc2l6ZU9ic2VydmVyKCk7XG4gICAgICB0aGlzLm1vZGVsLnJlbmRlckNhbGxiYWNrID0gPGFueT51bmRlZmluZWQ7XG4gICAgfVxuICB9XG4gIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLmlzU3VydmV5VXBkYXRlZCA9IHRydWU7XG4gIH1cbiAgb3ZlcnJpZGUgbmdBZnRlclZpZXdDaGVja2VkKCk6IHZvaWQge1xuICAgIGlmICghIXRoaXMubW9kZWwgJiYgdGhpcy5pc1N1cnZleVVwZGF0ZWQpIHtcbiAgICAgIHRoaXMubW9kZWwuYWZ0ZXJSZW5kZXJTdXJ2ZXkodGhpcy5yb290RWwubmF0aXZlRWxlbWVudCk7XG4gICAgICB0aGlzLm1vZGVsLnN0YXJ0VGltZXJGcm9tVUkoKTtcbiAgICB9XG4gICAgc3VwZXIubmdBZnRlclZpZXdDaGVja2VkKCk7XG4gIH1cbn1cblxuQW5ndWxhckNvbXBvbmVudEZhY3RvcnkuSW5zdGFuY2UucmVnaXN0ZXJDb21wb25lbnQoXCJzdXJ2ZXlcIiwgU3VydmV5Q29udGVudENvbXBvbmVudCk7IiwiPG5nLXRlbXBsYXRlICN0ZW1wbGF0ZT5cbiAgPGRpdiAjc3VydmV5Q29udGFpbmVyICpuZ0lmPVwiISFtb2RlbFwiIFtjbGFzc109XCJtb2RlbC5nZXRSb290Q3NzKClcIiBbc3R5bGVdPVwibW9kZWwudGhlbWVWYXJpYWJsZXNcIj5cbiAgICA8ZGl2IFtjbGFzc109XCJtb2RlbC53cmFwcGVyRm9ybUNzc1wiPlxuICAgICAgPGRpdiAqbmdJZj1cIiEhbW9kZWwucmVuZGVyQmFja2dyb3VuZEltYWdlXCIgW2NsYXNzXT1cIm1vZGVsLmNzcy5yb290QmFja2dyb3VuZEltYWdlXCIgW3N0eWxlXT1cIm1vZGVsLmJhY2tncm91bmRJbWFnZVN0eWxlXCI+PC9kaXY+XG4gICAgICA8Zm9ybSBvbnN1Ym1pdD1cInJldHVybiBmYWxzZTtcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cInN2X2N1c3RvbV9oZWFkZXJcIiBbaGlkZGVuXT1cIm1vZGVsLmhhc0xvZ29cIj48L2Rpdj5cbiAgICAgICAgPGRpdiBbY2xhc3NdPVwibW9kZWwuY3NzLmNvbnRhaW5lclwiPlxuICAgICAgICAgIDxkaXYgKm5nSWY9XCJtb2RlbC5oZWFkZXJWaWV3ID09PSAnYmFzaWMnICYmIG1vZGVsLnJlbmRlcmVkSGFzSGVhZGVyXCIgW2NsYXNzXT1cIm1vZGVsLmNzcy5oZWFkZXJcIiBbc3VydmV5XT1cIm1vZGVsXCIgc3Ytbmctc3VydmV5LWhlYWRlcj48L2Rpdj5cbiAgICAgICAgICA8bmctdGVtcGxhdGUgW2NvbXBvbmVudF09XCJ7IG5hbWU6ICdzdi1jb21wb25lbnRzLWNvbnRhaW5lcicsIGRhdGE6IHsgc3VydmV5OiBtb2RlbCwgY29udGFpbmVyOiAnaGVhZGVyJywgbmVlZFJlbmRlcldyYXBwZXI6IGZhbHNlIH0gfVwiPjwvbmctdGVtcGxhdGU+XG4gICAgICAgICAgPGRpdiAqbmdJZj1cIm1vZGVsLmlzU2hvd2luZ1BhZ2VcIiBbY2xhc3NdPVwibW9kZWwuYm9keUNvbnRhaW5lckNzc1wiPlxuICAgICAgICAgICAgPG5nLXRlbXBsYXRlIFtjb21wb25lbnRdPVwieyBuYW1lOiAnc3YtY29tcG9uZW50cy1jb250YWluZXInLCBkYXRhOiB7IHN1cnZleTogbW9kZWwsIGNvbnRhaW5lcjogJ2xlZnQnIH0gfVwiPjwvbmctdGVtcGxhdGU+XG4gICAgICAgICAgICA8ZGl2IFtjbGFzc109XCJtb2RlbC5ib2R5Q3NzXCIgW3N0eWxlLm1heFdpZHRoXT1cIm1vZGVsLnJlbmRlcmVkV2lkdGhcIiBbaWRdPVwibW9kZWwuYWN0aXZlUGFnZSA/IG1vZGVsLmFjdGl2ZVBhZ2UuaWQgOiAnJ1wiPlxuICAgICAgICAgICAgICA8bmctdGVtcGxhdGUgW2NvbXBvbmVudF09XCJ7IG5hbWU6ICdzdi1jb21wb25lbnRzLWNvbnRhaW5lcicsIGRhdGE6IHsgc3VydmV5OiBtb2RlbCwgY29udGFpbmVyOiAnY29udGVudFRvcCcgfSB9XCI+PC9uZy10ZW1wbGF0ZT5cbiAgICAgICAgICAgICAgPCEtLSBrbyBpZjogYWN0aXZlUGFnZSAtLT5cbiAgICAgICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwibW9kZWwuYWN0aXZlUGFnZVwiPlxuICAgICAgICAgICAgICAgICAgICA8c3YtbmctcGFnZSBbbW9kZWxdPVwibW9kZWwuYWN0aXZlUGFnZVwiIFtzdXJ2ZXldPVwibW9kZWxcIj48L3N2LW5nLXBhZ2U+XG4gICAgICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgICAgICAgICAgPCEtLSBrbyBpZjogYWN0aXZlUGFnZS5yb3dzLmxlbmd0aCA9PSAwICYmICRkYXRhLmVtcHR5UGFnZVRlbXBsYXRlIC0tPlxuICAgICAgICAgICAgICAgIDwhLS0ga28gdGVtcGxhdGU6IHsgbmFtZTogZW1wdHlQYWdlVGVtcGxhdGUsIGRhdGE6ICRkYXRhLmVtcHR5UGFnZVRlbXBsYXRlRGF0YSB8fCAkZGF0YSB9IC0tPlxuICAgICAgICAgICAgICAgIDwhLS0gL2tvIC0tPlxuICAgICAgICAgICAgICAgIDwhLS0gL2tvIC0tPlxuICAgICAgICAgICAgICA8IS0tIC9rbyAtLT5cbiAgICAgICAgICAgICAgPG5nLXRlbXBsYXRlIFtjb21wb25lbnRdPVwieyBuYW1lOiAnc3YtY29tcG9uZW50cy1jb250YWluZXInLCBkYXRhOiB7IHN1cnZleTogbW9kZWwsIGNvbnRhaW5lcjogJ2NvbnRlbnRCb3R0b20nIH0gfVwiPjwvbmctdGVtcGxhdGU+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDxuZy10ZW1wbGF0ZSBbY29tcG9uZW50XT1cInsgbmFtZTogJ3N2LWNvbXBvbmVudHMtY29udGFpbmVyJywgZGF0YTogeyBzdXJ2ZXk6IG1vZGVsLCBjb250YWluZXI6ICdyaWdodCcgfSB9XCI+PC9uZy10ZW1wbGF0ZT5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8bmctdGVtcGxhdGUgW2NvbXBvbmVudF09XCJ7IG5hbWU6ICdzdi1jb21wb25lbnRzLWNvbnRhaW5lcicsIGRhdGE6IHsgc3VydmV5OiBtb2RlbCwgY29udGFpbmVyOiAnZm9vdGVyJywgbmVlZFJlbmRlcldyYXBwZXI6IGZhbHNlIH0gfVwiPjwvbmctdGVtcGxhdGU+XG4gICAgICAgICAgPGRpdiAqbmdJZj1cIm1vZGVsLnN0YXRlID09PSAnY29tcGxldGVkJyAmJiBtb2RlbC5zaG93Q29tcGxldGVkUGFnZVwiIFtjbGFzc109XCJtb2RlbC5jb21wbGV0ZWRDc3NcIlxuICAgICAgICAgICAgW2lubmVySHRtbF09XCJtb2RlbC5wcm9jZXNzZWRDb21wbGV0ZWRIdG1sXCI+PC9kaXY+XG4gICAgICAgICAgPG5nLXRlbXBsYXRlICpuZ0lmPVwibW9kZWwuc3RhdGUgPT09ICdjb21wbGV0ZWQnICYmIG1vZGVsLnNob3dDb21wbGV0ZWRQYWdlXCIgW2NvbXBvbmVudF09XCJ7IG5hbWU6ICdzdi1jb21wb25lbnRzLWNvbnRhaW5lcicsIGRhdGE6IHsgc3VydmV5OiBtb2RlbCwgY29udGFpbmVyOiAnY29tcGxldGVQYWdlJyB9IH1cIj48L25nLXRlbXBsYXRlPlxuICAgICAgICAgIDxkaXYgKm5nSWY9XCJtb2RlbC5zdGF0ZSA9PT0gJ2NvbXBsZXRlZGJlZm9yZSdcIiBbY2xhc3NdPVwibW9kZWwuY29tcGxldGVkQmVmb3JlQ3NzXCJcbiAgICAgICAgICAgIFtpbm5lckh0bWxdPVwibW9kZWwucHJvY2Vzc2VkQ29tcGxldGVkQmVmb3JlSHRtbFwiPjwvZGl2PlxuICAgICAgICAgIDxkaXYgKm5nSWY9XCJtb2RlbC5zdGF0ZSA9PT0gJ2xvYWRpbmcnXCIgW2NsYXNzXT1cIm1vZGVsLmxvYWRpbmdCb2R5Q3NzXCIgW2lubmVySHRtbF09XCJtb2RlbC5wcm9jZXNzZWRMb2FkaW5nSHRtbFwiPjwvZGl2PlxuICAgICAgICAgIDxkaXYgKm5nSWY9XCJtb2RlbC5zdGF0ZSA9PT0gJ2VtcHR5J1wiIFtjbGFzc109XCJtb2RlbC5jc3MuYm9keUVtcHR5XCI+e3ttb2RlbC5lbXB0eVN1cnZleVRleHR9fTwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZm9ybT5cbiAgICAgIDxzdi1icmFuZC1pbmZvICpuZ0lmPVwibW9kZWwuc2hvd0JyYW5kSW5mb1wiPjwvc3YtYnJhbmQtaW5mbz5cbiAgICAgIDxzdi1ub3RpZmllciBbbm90aWZpZXJdPVwibW9kZWwubm90aWZpZXJcIj48L3N2LW5vdGlmaWVyPlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvbmctdGVtcGxhdGU+Il19

package/fesm2015/survey-angular-ui.js

@@ -769,7 +769,7 @@ class SurveyContentComponent extends BaseAngular {
     }
 }
 SurveyContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SurveyContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurveyContentComponent, selector: "survey-content", inputs: { model: "model" }, viewQueries: [{ propertyName: "rootEl", first: true, predicate: ["surveyContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div #surveyContainer *ngIf=\"!!model\" [class]=\"model.getRootCss()\" [style]=\"model.themeVariables\">\n    <div *ngIf=\"!!model.renderBackgroundImage\" [class]=\"model.css.rootBackgroundImage\" [style]=\"model.backgroundImageStyle\"></div>\n    <form onsubmit=\"return false;\">\n      <div class=\"sv_custom_header\" [hidden]=\"model.hasLogo\"></div>\n      <div [class]=\"model.css.container\">\n        <div *ngIf=\"model.titleView === 'title' && model.renderedHasHeader\" [class]=\"model.css.header\" [survey]=\"model\" sv-ng-survey-header></div>\n        <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'header', needRenderWrapper: false } }\"></ng-template>\n        <div *ngIf=\"model.isShowingPage\" [class]=\"model.bodyContainerCss\">\n          <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'left' } }\"></ng-template>\n          <div [class]=\"model.bodyCss\" [style.maxWidth]=\"model.renderedWidth\" [id]=\"model.activePage ? model.activePage.id : ''\">\n            <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'contentTop' } }\"></ng-template>\n            <!-- ko if: activePage -->\n              <ng-container *ngIf=\"model.activePage\">\n                  <sv-ng-page [model]=\"model.activePage\" [survey]=\"model\"></sv-ng-page>\n              </ng-container>\n              <!-- ko if: activePage.rows.length == 0 && $data.emptyPageTemplate -->\n              <!-- ko template: { name: emptyPageTemplate, data: $data.emptyPageTemplateData || $data } -->\n              <!-- /ko -->\n              <!-- /ko -->\n            <!-- /ko -->\n            <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'contentBottom' } }\"></ng-template>\n          </div>\n          <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'right' } }\"></ng-template>\n        </div>\n        <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'footer', needRenderWrapper: false } }\"></ng-template>\n        <div *ngIf=\"model.state === 'completed' && model.showCompletedPage\" [class]=\"model.completedCss\"\n          [innerHtml]=\"model.processedCompletedHtml\"></div>\n        <ng-template *ngIf=\"model.state === 'completed' && model.showCompletedPage\" [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'completePage' } }\"></ng-template>\n        <div *ngIf=\"model.state === 'completedbefore'\" [class]=\"model.completedBeforeCss\"\n          [innerHtml]=\"model.processedCompletedBeforeHtml\"></div>\n        <div *ngIf=\"model.state === 'loading'\" [class]=\"model.loadingBodyCss\" [innerHtml]=\"model.processedLoadingHtml\"></div>\n        <div *ngIf=\"model.state === 'empty'\" [class]=\"model.css.bodyEmpty\">{{model.emptySurveyText}}</div>\n      </div>\n    </form>\n    <sv-brand-info *ngIf=\"model.showBrandInfo\"></sv-brand-info>\n    <sv-notifier [notifier]=\"model.notifier\"></sv-notifier>\n  </div>\n</ng-template>", components: [{ type: SurveyHeaderComponent, selector: "'[sv-ng-survey-header]'", inputs: ["survey"] }, { type: PageComponent, selector: "page, sv-ng-page", inputs: ["model", "survey"] }, { type: BrandInfoComponent, selector: "sv-brand-info" }, { type: NotifierComponent, selector: "sv-notifier", inputs: ["notifier"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+SurveyContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurveyContentComponent, selector: "survey-content", inputs: { model: "model" }, viewQueries: [{ propertyName: "rootEl", first: true, predicate: ["surveyContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div #surveyContainer *ngIf=\"!!model\" [class]=\"model.getRootCss()\" [style]=\"model.themeVariables\">\n    <div [class]=\"model.wrapperFormCss\">\n      <div *ngIf=\"!!model.renderBackgroundImage\" [class]=\"model.css.rootBackgroundImage\" [style]=\"model.backgroundImageStyle\"></div>\n      <form onsubmit=\"return false;\">\n        <div class=\"sv_custom_header\" [hidden]=\"model.hasLogo\"></div>\n        <div [class]=\"model.css.container\">\n          <div *ngIf=\"model.headerView === 'basic' && model.renderedHasHeader\" [class]=\"model.css.header\" [survey]=\"model\" sv-ng-survey-header></div>\n          <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'header', needRenderWrapper: false } }\"></ng-template>\n          <div *ngIf=\"model.isShowingPage\" [class]=\"model.bodyContainerCss\">\n            <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'left' } }\"></ng-template>\n            <div [class]=\"model.bodyCss\" [style.maxWidth]=\"model.renderedWidth\" [id]=\"model.activePage ? model.activePage.id : ''\">\n              <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'contentTop' } }\"></ng-template>\n              <!-- ko if: activePage -->\n                <ng-container *ngIf=\"model.activePage\">\n                    <sv-ng-page [model]=\"model.activePage\" [survey]=\"model\"></sv-ng-page>\n                </ng-container>\n                <!-- ko if: activePage.rows.length == 0 && $data.emptyPageTemplate -->\n                <!-- ko template: { name: emptyPageTemplate, data: $data.emptyPageTemplateData || $data } -->\n                <!-- /ko -->\n                <!-- /ko -->\n              <!-- /ko -->\n              <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'contentBottom' } }\"></ng-template>\n            </div>\n            <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'right' } }\"></ng-template>\n          </div>\n          <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'footer', needRenderWrapper: false } }\"></ng-template>\n          <div *ngIf=\"model.state === 'completed' && model.showCompletedPage\" [class]=\"model.completedCss\"\n            [innerHtml]=\"model.processedCompletedHtml\"></div>\n          <ng-template *ngIf=\"model.state === 'completed' && model.showCompletedPage\" [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'completePage' } }\"></ng-template>\n          <div *ngIf=\"model.state === 'completedbefore'\" [class]=\"model.completedBeforeCss\"\n            [innerHtml]=\"model.processedCompletedBeforeHtml\"></div>\n          <div *ngIf=\"model.state === 'loading'\" [class]=\"model.loadingBodyCss\" [innerHtml]=\"model.processedLoadingHtml\"></div>\n          <div *ngIf=\"model.state === 'empty'\" [class]=\"model.css.bodyEmpty\">{{model.emptySurveyText}}</div>\n        </div>\n      </form>\n      <sv-brand-info *ngIf=\"model.showBrandInfo\"></sv-brand-info>\n      <sv-notifier [notifier]=\"model.notifier\"></sv-notifier>\n    </div>\n  </div>\n</ng-template>", components: [{ type: SurveyHeaderComponent, selector: "'[sv-ng-survey-header]'", inputs: ["survey"] }, { type: PageComponent, selector: "page, sv-ng-page", inputs: ["model", "survey"] }, { type: BrandInfoComponent, selector: "sv-brand-info" }, { type: NotifierComponent, selector: "sv-notifier", inputs: ["notifier"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyContentComponent, decorators: [{
             type: Component,
             args: [{
@@ -1259,6 +1259,10 @@ class DropdownComponent extends BaseAngular {
         var _a;
         (_a = this.dropdownModel) === null || _a === void 0 ? void 0 : _a.onClick(event);
     }
+    chevronPointerDown(event) {
+        var _a;
+        (_a = this.dropdownModel) === null || _a === void 0 ? void 0 : _a.chevronPointerDown(event);
+    }
     clear(event) {
         var _a;
         (_a = this.dropdownModel) === null || _a === void 0 ? void 0 : _a.onClear(event);
@@ -1291,7 +1295,7 @@ class DropdownComponent extends BaseAngular {
     }
 }
 DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DropdownComponent, selector: "sv-ng-dropdown, '[sv-ng-dropdown]'", inputs: { model: "model" }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.selectWrapper\" (click)=\"click($event)\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (blur)=\"blur($event)\"\n        (keydown)=\"keyhandler($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        [attr.aria-controls]=\"dropdownModel.listElementId\"\n        [attr.aria-expanded]=\"model.ariaExpanded\"\n        [attr.aria-activedescendant]=\"dropdownModel.ariaActivedescendant\">\n        <div *ngIf=\"dropdownModel.showHintPrefix\" [class]=\"model.cssClasses.hintPrefix\">\n            <span>{{ dropdownModel.hintStringPrefix }}</span>\n        </div>\n        <div [class]=\"model.cssClasses.controlValue\">\n            <div *ngIf=\"dropdownModel.showHintString\" [class]=\"model.cssClasses.hintSuffix\">\n                <span style=\"visibility: hidden\">{{ dropdownModel.inputStringRendered }}</span>\n                <span>{{ dropdownModel.hintStringSuffix }}</span>\n            </div>\n            <ng-container *ngIf=\"dropdownModel.showInputFieldComponent\">\n                <ng-template [component]=\"{ name: model.inputFieldComponentName, data: { model: dropdownModel.getSelectedAction(), question: model } }\"></ng-template>\n            </ng-container>\n            <sv-ng-string *ngIf=\"model.showSelectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n            <input #inputElement type=\"text\" autocomplete=\"off\" [(ngModel)]=\"dropdownModel.inputStringRendered\" [class]=\"model.cssClasses.filterStringInput\"\n            [attr.role]=\"dropdownModel.filterStringEnabled ? model.ariaRole : null\"\n            [attr.id]=\"model.getInputId()\"\n            [attr.inputmode]=\"dropdownModel.inputMode\"\n            [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : -1\"\n            [attr.disabled]=\"model.isInputReadOnly ? true : null\"\n            [attr.aria-label]=\"model.placeholder\"\n            [attr.aria-controls]=\"dropdownModel.listElementId\"\n            [attr.aria-expanded]=\"model.ariaExpanded\"\n            [attr.aria-activedescendant]=\"dropdownModel.ariaActivedescendant\"\n            [attr.placeholder]=\"dropdownModel.placeholderRendered\" [attr.readonly]=\"!dropdownModel.searchEnabled ? true : null\" \n            (change)=\"inputChange($event)\" (blur)=\"blur($event)\" (focus)=\"focus($event)\"/>\n        </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.clearCaption\"\n                [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"dropdownModel.popupModel\"></sv-ng-popup>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">\n        <sv-ng-string *ngIf=\"model.selectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n        <div>{{ model.readOnlyText }}</div>\n    </div>\n    <div *ngIf=\"model.cssClasses.chevronButtonIconId\" [class]=\"model.cssClasses.chevronButton\">\n        <svg [iconName]=\"model.cssClasses.chevronButtonIconId\" [partCss]=\"model.cssClasses.chevronButtonSvg\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    </div>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { 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", "getTarget"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2$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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
+DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DropdownComponent, selector: "sv-ng-dropdown, '[sv-ng-dropdown]'", inputs: { model: "model" }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.selectWrapper\" (click)=\"click($event)\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (blur)=\"blur($event)\"\n        (keydown)=\"keyhandler($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        [attr.aria-controls]=\"dropdownModel.listElementId\"\n        [attr.aria-expanded]=\"model.ariaExpanded\"\n        [attr.aria-activedescendant]=\"dropdownModel.ariaActivedescendant\">\n        <div *ngIf=\"dropdownModel.showHintPrefix\" [class]=\"model.cssClasses.hintPrefix\">\n            <span>{{ dropdownModel.hintStringPrefix }}</span>\n        </div>\n        <div [class]=\"model.cssClasses.controlValue\">\n            <div *ngIf=\"dropdownModel.showHintString\" [class]=\"model.cssClasses.hintSuffix\">\n                <span style=\"visibility: hidden\">{{ dropdownModel.inputStringRendered }}</span>\n                <span>{{ dropdownModel.hintStringSuffix }}</span>\n            </div>\n            <ng-container *ngIf=\"dropdownModel.showInputFieldComponent\">\n                <ng-template [component]=\"{ name: model.inputFieldComponentName, data: { model: dropdownModel.getSelectedAction(), question: model } }\"></ng-template>\n            </ng-container>\n            <sv-ng-string *ngIf=\"model.showSelectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n            <input #inputElement type=\"text\" autocomplete=\"off\" [(ngModel)]=\"dropdownModel.inputStringRendered\" [class]=\"model.cssClasses.filterStringInput\"\n            [attr.role]=\"dropdownModel.filterStringEnabled ? model.ariaRole : null\"\n            [attr.id]=\"model.getInputId()\"\n            [attr.inputmode]=\"dropdownModel.inputMode\"\n            [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : -1\"\n            [attr.disabled]=\"model.isInputReadOnly ? true : null\"\n            [attr.aria-controls]=\"dropdownModel.listElementId\"\n            [attr.aria-expanded]=\"model.ariaExpanded\"\n            [attr.aria-activedescendant]=\"dropdownModel.ariaActivedescendant\"\n            [attr.placeholder]=\"dropdownModel.placeholderRendered\" [attr.readonly]=\"!dropdownModel.searchEnabled ? true : null\" \n            (change)=\"inputChange($event)\" (blur)=\"blur($event)\" (focus)=\"focus($event)\"/>\n        </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.clearCaption\"\n                [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"dropdownModel.popupModel\"></sv-ng-popup>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">\n        <sv-ng-string *ngIf=\"model.selectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n        <div>{{ model.readOnlyText }}</div>\n    </div>\n    <div *ngIf=\"model.cssClasses.chevronButtonIconId\" [class]=\"model.cssClasses.chevronButton\" (pointerdown)=\"chevronPointerDown($event)\">\n        <svg [iconName]=\"model.cssClasses.chevronButtonIconId\" [partCss]=\"model.cssClasses.chevronButtonSvg\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    </div>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { 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", "getTarget"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2$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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
             args: [{
@@ -1311,7 +1315,7 @@ class TagboxFilterComponent extends BaseAngular {
     }
 }
 TagboxFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TagboxFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TagboxFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxFilterComponent, selector: "sv-tagbox-filter", inputs: { model: "model", question: "question" }, usesInheritance: true, ngImport: i0, 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.searchEnabled ? true : null\"\n      [attr.disabled]=\"question.isInputReadOnly ? true : null\"\n      [attr.size]=\"!model.inputStringRendered ? 1 : null\"\n      [attr.aria-label]=\"question.placeholder\"\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+TagboxFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxFilterComponent, selector: "sv-tagbox-filter", inputs: { model: "model", question: "question" }, usesInheritance: true, ngImport: i0, 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.searchEnabled ? true : null\"\n      [attr.disabled]=\"question.isInputReadOnly ? true : null\"\n      [attr.size]=\"!model.inputStringRendered ? 1 : null\"\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TagboxFilterComponent, decorators: [{
             type: Component,
             args: [{
@@ -1367,6 +1371,10 @@ class TagboxComponent {
         var _a;
         (_a = this.dropdownModel) === null || _a === void 0 ? void 0 : _a.onClick(event);
     }
+    chevronPointerDown(event) {
+        var _a;
+        (_a = this.dropdownModel) === null || _a === void 0 ? void 0 : _a.chevronPointerDown(event);
+    }
     clear(event) {
         var _a;
         (_a = this.dropdownModel) === null || _a === void 0 ? void 0 : _a.onClear(event);
@@ -1381,7 +1389,7 @@ class TagboxComponent {
     }
 }
 TagboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TagboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TagboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxComponent, selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.cssClasses.selectWrapper\" (click)=\"click($event)\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (blur)=\"blur($event)\"\n        (keydown)=\"keyhandler($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        [attr.aria-controls]=\"dropdownModel.listElementId\"\n        [attr.aria-expanded]=\"model.ariaExpanded\"\n        [attr.aria-activedescendant]=\"dropdownModel.ariaActivedescendant\">\n        <div [class]=\"model.cssClasses.controlValue\">\n            <ng-container *ngIf=\"!model.isEmpty()\">\n                <sv-ng-tagbox-item *ngFor=\"let item of model.selectedChoices\" [item]=\"item\" [question]=\"model\">\n                </sv-ng-tagbox-item>\n            </ng-container>\n            <ng-template [component]=\"{ name: 'sv-tagbox-filter', data: { model: dropdownModel, question: model } }\"></ng-template>\n        </div>\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.clearCaption\"\n                [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"model.popupModel\"></sv-ng-popup>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">\n        <div>{{ model.readOnlyText }}</div>\n    </div>\n    <div *ngIf=\"model.cssClasses.chevronButtonIconId\" [class]=\"model.cssClasses.chevronButton\">\n        <svg [iconName]=\"model.cssClasses.chevronButtonIconId\" [partCss]=\"model.cssClasses.chevronButtonSvg\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    </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", "getTarget"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
+TagboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxComponent, selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.cssClasses.selectWrapper\" (click)=\"click($event)\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (blur)=\"blur($event)\"\n        (keydown)=\"keyhandler($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        [attr.aria-controls]=\"dropdownModel.listElementId\"\n        [attr.aria-expanded]=\"model.ariaExpanded\"\n        [attr.aria-activedescendant]=\"dropdownModel.ariaActivedescendant\">\n        <div [class]=\"model.cssClasses.controlValue\">\n            <ng-container *ngIf=\"!model.isEmpty()\">\n                <sv-ng-tagbox-item *ngFor=\"let item of model.selectedChoices\" [item]=\"item\" [question]=\"model\">\n                </sv-ng-tagbox-item>\n            </ng-container>\n            <ng-template [component]=\"{ name: 'sv-tagbox-filter', data: { model: dropdownModel, question: model } }\"></ng-template>\n        </div>\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.clearCaption\"\n                [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"model.popupModel\"></sv-ng-popup>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">\n        <div>{{ model.readOnlyText }}</div>\n    </div>\n    <div *ngIf=\"model.cssClasses.chevronButtonIconId\" [class]=\"model.cssClasses.chevronButton\" (pointerdown)=\"chevronPointerDown($event)\">\n        <svg [iconName]=\"model.cssClasses.chevronButtonIconId\" [partCss]=\"model.cssClasses.chevronButtonSvg\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    </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", "getTarget"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TagboxComponent, decorators: [{
             type: Component,
             args: [{
@@ -2366,7 +2374,7 @@ class ProgressDefaultComponent extends EmbeddedViewContentComponent {
     }
 }
 ProgressDefaultComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ProgressDefaultComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ProgressDefaultComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ProgressDefaultComponent, selector: "sv-ng-progress-default", inputs: { container: "container", model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"model.getProgressCssClasses(container)\">\n    <div [class]=\"model.css.progressBar\" [style.width]=\"model.progressValue + '%'\"\n        role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n        <span [class]=\"getProgressTextInBarCss(model.css)\">\n          {{ model.progressText }}\n        </span>\n    </div>\n    <span [class]=\"getProgressTextUnderBarCss(model.css)\"> {{  model.progressText }} </span>\n  </div>\n</ng-template>" });
+ProgressDefaultComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ProgressDefaultComponent, selector: "sv-ng-progress-default", inputs: { container: "container", model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"model.getProgressCssClasses(container)\">\n    <div [class]=\"model.css.progressBar\" [style.width]=\"model.progressValue + '%'\"\n        role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"progress\">\n        <span [class]=\"getProgressTextInBarCss(model.css)\">\n          {{ model.progressText }}\n        </span>\n    </div>\n    <span [class]=\"getProgressTextUnderBarCss(model.css)\"> {{  model.progressText }} </span>\n  </div>\n</ng-template>" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ProgressDefaultComponent, decorators: [{
             type: Component,
             args: [{
@@ -2531,6 +2539,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             }] } });
 AngularComponentFactory.Instance.registerComponent("sv-nav-btn", SurveyNavigationButton);
 
+class FilePreviewComponent extends EmbeddedViewContentComponent {
+    constructor() {
+        super(...arguments);
+        this.trackFilesFn = (index) => {
+            return this.question.inputId + "_" + index;
+        };
+    }
+}
+FilePreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FilePreviewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FilePreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FilePreviewComponent, selector: "sv-ng-file-preview", inputs: { question: "question" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n    <ng-container *ngIf=\"question.showPreviewContainer\">\n        <div [class]=\"question.cssClasses.fileList || undefined\">\n            <span *ngFor=\"let val of question.previewValue; index as index; trackBy: trackFilesFn\"\n                [visible]=\"val && question.isPreviewVisible(index)\" [class]=\"question.cssClasses.preview\">\n                <div *ngIf=\"val.name && question.cssClasses.fileSign\" [class]=\"question.cssClasses.fileSign\">\n                    <a (click)=\"question.doDownloadFile($event, val)\" [attr.href]=\"val.content | safeUrl\"\n                        [attr.title]=\"val.name\" [attr.download]=\"val.name\" [style.width]=\"question.imageWidth\">{{\n                        val.name\n                        }}</a>\n                </div>\n                <div [class]=\"question.cssClasses.imageWrapper\">\n                    <img *ngIf=\"question.canPreviewImage(val)\" [attr.src]=\"val.content | safeUrl\"\n                        [style.height]=\"question.imageHeight\" [style.width]=\"question.imageWidth\" alt=\"File preview\" />\n                    <svg *ngIf=\"question.defaultImage(val)\" [iconName]=\"question.cssClasses.defaultImageIconId\"\n                        [partCss]=\"question.cssClasses.defaultImage\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n                    <div *ngIf=\"val.name && !question.isReadOnly\" [class]=\"question.getRemoveButtonCss()\"\n                        (click)=\"question.doRemoveFile(val)\">\n                        <span [class]=\"question.cssClasses.removeFile\">{{ question.removeFileCaption }}</span>\n                        <svg *ngIf=\"question.cssClasses.removeFileSvgIconId\" [title]=\"question.removeFileCaption\"\n                            [partCss]=\"question.cssClasses.removeFileSvg\"\n                            [iconName]=\"question.cssClasses.removeFileSvgIconId\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n                    </div>\n                </div>\n                <div *ngIf=\"val.name && question.cssClasses.fileSignBottom\"\n                    [class]=\"question.cssClasses.fileSignBottom\">\n                    <a (click)=\"question.doDownloadFile($event, val)\" [attr.href]=\"val.content | safeUrl\"\n                        [attr.title]=\"val.name\" [attr.download]=\"val.name\" [style.width]=\"question.imageWidth\">{{\n                        val.name\n                        }}</a>\n                </div>\n            </span>\n        </div>\n    </ng-container>\n</ng-template>", components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }], pipes: { "safeUrl": SafeUrlPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FilePreviewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "sv-ng-file-preview",
+                    templateUrl: "./file-preview.component.html"
+                }]
+        }], propDecorators: { question: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("sv-file-preview", FilePreviewComponent);
+
 class MatrixQuestionComponent extends QuestionAngular {
     ngOnInit() {
         this.model.visibleRowsChangedCallback = () => {
@@ -2597,15 +2626,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
         }] });
 
 class FileQuestionComponent extends QuestionAngular {
-    constructor() {
-        super(...arguments);
-        this.trackFilesFn = (index) => {
-            return this.model.inputId + "_" + index;
-        };
-    }
 }
 FileQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FileQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FileQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FileQuestionComponent, selector: "sv-ng-file-question", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.fileRootCss\" #contentElement>\n  <input [class]=\"model.cssClasses.fileInput\" *ngIf=\"!model.isReadOnly && model.hasFileUI\" tabindex=\"-1\" type=\"file\"\n    [attr.id]=\"model.inputId\" (change)=\"model.doChange($event)\" [attr.aria-required]=\"model.ariaRequired\"\n    [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n    [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.multiple]=\"model.multipleRendered\"\n    [attr.title]=\"model.inputTitle\" [attr.accept]=\"model.acceptedTypes\" [attr.capture]=\"model.renderCapture\" />\n  <input *ngIf=\"model.isReadOnly\" type=\"file\" disabled [class]=\"model.getReadOnlyFileCss()\" [attr.id]=\"model.inputId\"\n    [attr.multiple]=\"model.multipleRendered\" [attr.placeholder]=\"model.title\" style=\"color: transparent\" />\n  <div [class]=\"model.cssClasses.dragArea\" (dragenter)=\"model.onDragEnter($event)\" (drop)=\"model.onDrop($event)\"\n    (dragover)=\"model.onDragOver($event)\" (dragleave)=\"model.onDragLeave($event)\">\n    <div [class]=\"model.getFileDecoratorCss()\" *ngIf=\"model.showFileDecorator\">\n      <span [class]=\"model.cssClasses.dragAreaPlaceholder\">{{ model.renderedPlaceholder }}</span>\n      <div [class]=\"model.cssClasses.wrapper\">\n        <sv-ng-choose-file-btn [data]=\"{ question: model }\" *ngIf=\"model.showChooseButton\"></sv-ng-choose-file-btn>\n        <sv-ng-action-bar [model]=\"model.actionsContainer\" *ngIf=\"model.actionsContainerVisible\"></sv-ng-action-bar>\n        <span [class]=\"model.cssClasses.noFileChosen\" *ngIf=\"model.isEmpty()\">{{ model.noFileChosenCaption }}</span>\n      </div>\n    </div>\n    <ng-container *ngIf=\"model.showLoadingIndicator\">\n      <div [class]=\"model.cssClasses.loadingIndicator\">\n        <sv-ng-loading-indicator></sv-ng-loading-indicator>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"model.isPlayingVideo\">\n      <ng-container *ngTemplateOutlet=\"fileVideo\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"model.showRemoveButton\">\n      <ng-container *ngTemplateOutlet=\"fileCleanButton; context: { css: model.showRemoveButton }\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"model.allowShowPreview\">\n      <ng-container *ngTemplateOutlet=\"filePreview\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"model.showRemoveButtonBottom\">\n      <ng-container *ngTemplateOutlet=\"fileCleanButton; context: { css: model.showRemoveButtonBottom }\"></ng-container>\n    </ng-container>\n    <sv-action-bar *ngIf=\"model.fileNavigatorVisible\" [model]=\"model.fileNavigator\"></sv-action-bar>\n  </div>\n</div>\n<ng-template #filePreview>\n  <div [class]=\"model.cssClasses.fileList || undefined\">\n    <span *ngFor=\"let val of model.previewValue; index as index; trackBy: trackFilesFn\"\n      [visible]=\"val && model.isPreviewVisible(index)\" [class]=\"model.cssClasses.preview\">\n      <div *ngIf=\"val.name && model.cssClasses.fileSign\" [class]=\"model.cssClasses.fileSign\">\n        <a (click)=\"model.doDownloadFile($event, val)\" [attr.href]=\"val.content | safeUrl\" [attr.title]=\"val.name\"\n          [attr.download]=\"val.name\" [style.width]=\"model.imageWidth\">{{ val.name }}</a>\n      </div>\n      <div [class]=\"model.cssClasses.imageWrapper\">\n        <img *ngIf=\"model.canPreviewImage(val)\" [attr.src]=\"val.content | safeUrl\" [style.height]=\"model.imageHeight\"\n          [style.width]=\"model.imageWidth\" alt=\"File preview\" />\n        <svg *ngIf=\"model.defaultImage(val)\" [iconName]=\"model.cssClasses.defaultImageIconId\"\n          [partCss]=\"model.cssClasses.defaultImage\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        <div *ngIf=\"val.name && !model.isReadOnly\" [class]=\"model.getRemoveButtonCss()\"\n          (click)=\"model.doRemoveFile(val)\">\n          <span [class]=\"model.cssClasses.removeFile\">{{ model.removeFileCaption }}</span>\n          <svg *ngIf=\"model.cssClasses.removeFileSvgIconId\" [title]=\"model.removeFileCaption\"\n            [partCss]=\"model.cssClasses.removeFileSvg\" [iconName]=\"model.cssClasses.removeFileSvgIconId\" [size]=\"'auto'\"\n            sv-ng-svg-icon></svg>\n        </div>\n      </div>\n      <div *ngIf=\"val.name && model.cssClasses.fileSignBottom\" [class]=\"model.cssClasses.fileSignBottom\">\n        <a (click)=\"model.doDownloadFile($event, val)\" [attr.href]=\"val.content | safeUrl\" [attr.title]=\"val.name\"\n          [attr.download]=\"val.name\" [style.width]=\"model.imageWidth\">{{ val.name }}</a>\n      </div>\n    </span>\n  </div>\n</ng-template>\n<ng-template #fileCleanButton let-css=\"css\">\n  <button type=\"button\" [class]=\"css\" (click)=\"model.doClean()\">\n    <span>{{ model.clearButtonCaption }}</span>\n    <svg *ngIf=\"model.cssClasses.removeButtonIconId\" [iconName]=\"model.cssClasses.removeButtonIconId\" [size]=\"'auto'\"\n      [title]=\"model.clearButtonCaption\" sv-ng-svg-icon></svg>\n  </button>\n</ng-template>\n<ng-template #fileVideo>\n  <div [class]=\"model.cssClasses.videoContainer\">\n    <sv-ng-action [model]=\"model.changeCameraAction\"></sv-ng-action>\n    <sv-ng-action [model]=\"model.closeCameraAction\"></sv-ng-action>\n    <video autoplay playsinline [attr.id]=\"model.videoId\" [class]=\"model.cssClasses.video\"></video>\n    <sv-ng-action [model]=\"model.takePictureAction\"></sv-ng-action>\n  </div>\n</ng-template>", components: [{ type: ChooseFileBtn, selector: "sv-ng-choose-file-btn", inputs: ["data", "model"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: LoadingIndicatorComponent, selector: "sv-ng-loading-indicator" }, { type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: ActionComponent, selector: "sv-ng-action", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }], pipes: { "safeUrl": SafeUrlPipe } });
+FileQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FileQuestionComponent, selector: "sv-ng-file-question", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.fileRootCss\" #contentElement>\n  <input [class]=\"model.cssClasses.fileInput\" *ngIf=\"!model.isReadOnly && model.hasFileUI\" tabindex=\"-1\" type=\"file\"\n    [attr.id]=\"model.inputId\" (change)=\"model.doChange($event)\" [attr.aria-required]=\"model.ariaRequired\"\n    [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n    [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.multiple]=\"model.multipleRendered\"\n    [attr.title]=\"model.inputTitle\" [attr.accept]=\"model.acceptedTypes\" [attr.capture]=\"model.renderCapture\" />\n  <input *ngIf=\"model.isReadOnly\" type=\"file\" disabled [class]=\"model.getReadOnlyFileCss()\" [attr.id]=\"model.inputId\"\n    [attr.multiple]=\"model.multipleRendered\" [attr.placeholder]=\"model.title\" style=\"color: transparent\" />\n  <div [class]=\"model.cssClasses.dragArea\" (dragenter)=\"model.onDragEnter($event)\" (drop)=\"model.onDrop($event)\"\n    (dragover)=\"model.onDragOver($event)\" (dragleave)=\"model.onDragLeave($event)\">\n    <div [class]=\"model.getFileDecoratorCss()\" *ngIf=\"model.showFileDecorator\">\n      <span [class]=\"model.cssClasses.dragAreaPlaceholder\">{{ model.renderedPlaceholder }}</span>\n      <div [class]=\"model.cssClasses.wrapper\">\n        <sv-ng-choose-file-btn [data]=\"{ question: model }\" *ngIf=\"model.showChooseButton\"></sv-ng-choose-file-btn>\n        <sv-ng-action-bar [model]=\"model.actionsContainer\" *ngIf=\"model.actionsContainerVisible\"></sv-ng-action-bar>\n        <span [class]=\"model.cssClasses.noFileChosen\" *ngIf=\"model.isEmpty()\">{{ model.noFileChosenCaption }}</span>\n      </div>\n    </div>\n    <ng-container *ngIf=\"model.showLoadingIndicator\">\n      <div [class]=\"model.cssClasses.loadingIndicator\">\n        <sv-ng-loading-indicator></sv-ng-loading-indicator>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"model.isPlayingVideo\">\n      <ng-container *ngTemplateOutlet=\"fileVideo\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"model.showRemoveButton\">\n      <ng-container *ngTemplateOutlet=\"fileCleanButton; context: { css: model.showRemoveButton }\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"model.allowShowPreview\">\n      <ng-template [component]=\"{ name: 'sv-file-preview', data: { question: model } }\"></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"model.showRemoveButtonBottom\">\n      <ng-container *ngTemplateOutlet=\"fileCleanButton; context: { css: model.showRemoveButtonBottom }\"></ng-container>\n    </ng-container>\n    <sv-action-bar *ngIf=\"model.fileNavigatorVisible\" [model]=\"model.fileNavigator\"></sv-action-bar>\n  </div>\n</div>\n<ng-template #fileCleanButton let-css=\"css\">\n  <button type=\"button\" [class]=\"css\" (click)=\"model.doClean()\">\n    <span>{{ model.clearButtonCaption }}</span>\n    <svg *ngIf=\"model.cssClasses.removeButtonIconId\" [iconName]=\"model.cssClasses.removeButtonIconId\" [size]=\"'auto'\"\n      [title]=\"model.clearButtonCaption\" sv-ng-svg-icon></svg>\n  </button>\n</ng-template>\n<ng-template #fileVideo>\n  <div [class]=\"model.cssClasses.videoContainer\">\n    <sv-ng-action [model]=\"model.changeCameraAction\"></sv-ng-action>\n    <sv-ng-action [model]=\"model.closeCameraAction\"></sv-ng-action>\n    <video autoplay playsinline [attr.id]=\"model.videoId\" [class]=\"model.cssClasses.video\"></video>\n    <sv-ng-action [model]=\"model.takePictureAction\"></sv-ng-action>\n  </div>\n</ng-template>", components: [{ type: ChooseFileBtn, selector: "sv-ng-choose-file-btn", inputs: ["data", "model"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: LoadingIndicatorComponent, selector: "sv-ng-loading-indicator" }, { type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: ActionComponent, selector: "sv-ng-action", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FileQuestionComponent, decorators: [{
             type: Component,
             args: [{
@@ -2960,7 +2983,7 @@ class PanelDynamicQuestionComponent extends QuestionAngular {
     }
 }
 PanelDynamicQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PanelDynamicQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PanelDynamicQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDynamicQuestionComponent, selector: "sv-ng-paneldynamic-question", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.root\" #contentElement>\n  <div *ngIf=\"model.getShowNoEntriesPlaceholder()\" [class]=\"model.cssClasses.noEntriesPlaceholder\">\n    <span [model]=\"model.locNoEntriesText\" sv-ng-string></span>\n    <sv-ng-paneldynamic-add-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n  </div>\n  <div [class]=\"model.cssClasses.progress\" *ngIf=\"!model.showLegacyNavigation && model.isProgressTopShowing && model.isRangeShowing\">\n    <div\n      [class]=\"model.cssClasses.progressBar\"\n      [style]=\"{ width: model.progress }\"\n      role=\"progressbar\"\n    ></div>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"progress\" *ngIf=\"model.showLegacyNavigation && model.isProgressTopShowing\"></ng-container>\n  <!-- add track by [key]=\"panel.id\" -->\n  <ng-container *ngFor=\"let panel of renderedPanels; index as index\"> \n    <div [class]=\"model.getPanelWrapperCss()\">\n      <ng-template [component]=\"{ name: getPanelComponentName(panel), data: getPanelComponentData(panel) }\"></ng-template>\n      <ng-container *ngIf=\"model.panelRemoveButtonLocation ==='right'\">\n        <sv-ng-paneldynamic-remove-btn *ngIf=\"model.canRemovePanel && panel.state != 'collapsed' && model.panelRemoveButtonLocation == 'right'\" [data]=\"{ panel: panel, question: model }\"></sv-ng-paneldynamic-remove-btn>\n      </ng-container>\n    </div>\n    <!-- add track by [key]=\"'separator' + panel.id\" -->\n    <hr [class]=\"model.cssClasses.separator\" *ngIf=\"model.showSeparator(index)\"/>\n  </ng-container>\n  <ng-container [ngTemplateOutlet]=\"progress\" *ngIf=\"model.showLegacyNavigation && model.isProgressBottomShowing\"></ng-container>\n  <sv-ng-paneldynamic-add-btn *ngIf=\"model.showLegacyNavigation && model.isRenderModeList\" [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n  <ng-container [ngTemplateOutlet]=\"progressV2\" *ngIf=\"model.showNavigation\"></ng-container>\n</div>\n\n<ng-template #progressV2>\n  <div [class]=\"model.cssClasses.footer\" *ngIf=\"!!model.cssClasses.footer\">\n    <hr [class]=\"model.cssClasses.separator\"/>\n    <div [class]=\"model.cssClasses.progress\" *ngIf=\"model.isRangeShowing && model.isProgressBottomShowing\">\n      <div\n        [class]=\"model.cssClasses.progressBar\"\n        [style]=\"{ width: model.progress }\"\n        role=\"progressbar\"\n      ></div>\n    </div>\n    <div *ngIf=\"model.footerToolbar.visibleActions.length\" [class]=\"model.cssClasses.footerButtonsContainer\">\n      <sv-ng-action-bar [model]=\"model.footerToolbar\"></sv-ng-action-bar>\n    </div>\n  </div>\n</ng-template>\n<ng-template #progress>\n  <div [class]=\"this.progressCssClass\">\n    <div style=\"clear: both\" [class]=\"this.progressCssClass\">\n      <div [class]=\"model.cssClasses.progressContainer\">\n        <sv-ng-paneldynamic-prev-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-prev-btn>\n        <div [class]=\"model.cssClasses.progress\" *ngIf=\"model.isRangeShowing\">\n          <div\n            [class]=\"model.cssClasses.progressBar\"\n            [style]=\"{ width: model.progress }\"\n            role=\"progressbar\"\n          ></div>\n        </div>\n          <sv-ng-paneldynamic-next-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-next-btn>\n      </div>\n      <sv-ng-paneldynamic-add-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n      <sv-ng-paneldynamic-progress-text [data]=\"{ question: model }\"></sv-ng-paneldynamic-progress-text>\n    </div>\n  </div>\n</ng-template>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: PanelDynamicAddBtn, selector: "sv-ng-paneldynamic-add-btn" }, { type: PaneldynamicRemoveButtonComponent, selector: "sv-ng-paneldynamic-remove-btn" }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: PanelDynamicPrevBtn, selector: "sv-ng-paneldynamic-prev-btn" }, { type: PanelDynamicNextBtn, selector: "sv-ng-paneldynamic-next-btn" }, { type: PanelDynamicProgressText, selector: "sv-ng-paneldynamic-progress-text" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+PanelDynamicQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelDynamicQuestionComponent, selector: "sv-ng-paneldynamic-question", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.root\" #contentElement>\n  <div *ngIf=\"model.getShowNoEntriesPlaceholder()\" [class]=\"model.cssClasses.noEntriesPlaceholder\">\n    <span [model]=\"model.locNoEntriesText\" sv-ng-string></span>\n    <sv-ng-paneldynamic-add-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n  </div>\n  <div [class]=\"model.cssClasses.progress\" *ngIf=\"!model.showLegacyNavigation && model.isProgressTopShowing && model.isRangeShowing\">\n    <div\n      [class]=\"model.cssClasses.progressBar\"\n      [style]=\"{ width: model.progress }\"\n      role=\"progressbar\"\n    ></div>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"progress\" *ngIf=\"model.showLegacyNavigation && model.isProgressTopShowing\"></ng-container>\n  <!-- add track by [key]=\"panel.id\" -->\n  <ng-container *ngFor=\"let panel of renderedPanels; index as index\"> \n    <div [class]=\"model.getPanelWrapperCss()\">\n      <ng-template [component]=\"{ name: getPanelComponentName(panel), data: getPanelComponentData(panel) }\"></ng-template>\n      <ng-container *ngIf=\"model.panelRemoveButtonLocation ==='right' && model.canRemovePanel && panel.state != 'collapsed'\">\n        <ng-template [component]=\"{ name: 'sv-paneldynamic-remove-btn', data: { data: { panel, question: model }}}\"></ng-template>\n      </ng-container>\n    </div>\n    <!-- add track by [key]=\"'separator' + panel.id\" -->\n    <hr [class]=\"model.cssClasses.separator\" *ngIf=\"model.showSeparator(index)\"/>\n  </ng-container>\n  <ng-container [ngTemplateOutlet]=\"progress\" *ngIf=\"model.showLegacyNavigation && model.isProgressBottomShowing\"></ng-container>\n  <sv-ng-paneldynamic-add-btn *ngIf=\"model.showLegacyNavigation && model.isRenderModeList\" [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n  <ng-container [ngTemplateOutlet]=\"progressV2\" *ngIf=\"model.showNavigation\"></ng-container>\n</div>\n\n<ng-template #progressV2>\n  <div [class]=\"model.cssClasses.footer\" *ngIf=\"!!model.cssClasses.footer\">\n    <hr [class]=\"model.cssClasses.separator\"/>\n    <div [class]=\"model.cssClasses.progress\" *ngIf=\"model.isRangeShowing && model.isProgressBottomShowing\">\n      <div\n        [class]=\"model.cssClasses.progressBar\"\n        [style]=\"{ width: model.progress }\"\n        role=\"progressbar\"\n      ></div>\n    </div>\n    <div *ngIf=\"model.footerToolbar.visibleActions.length\" [class]=\"model.cssClasses.footerButtonsContainer\">\n      <sv-ng-action-bar [model]=\"model.footerToolbar\"></sv-ng-action-bar>\n    </div>\n  </div>\n</ng-template>\n<ng-template #progress>\n  <div [class]=\"this.progressCssClass\">\n    <div style=\"clear: both\" [class]=\"this.progressCssClass\">\n      <div [class]=\"model.cssClasses.progressContainer\">\n        <sv-ng-paneldynamic-prev-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-prev-btn>\n        <div [class]=\"model.cssClasses.progress\" *ngIf=\"model.isRangeShowing\">\n          <div\n            [class]=\"model.cssClasses.progressBar\"\n            [style]=\"{ width: model.progress }\"\n            role=\"progressbar\"\n          ></div>\n        </div>\n          <sv-ng-paneldynamic-next-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-next-btn>\n      </div>\n      <sv-ng-paneldynamic-add-btn [data]=\"{ question: model }\"></sv-ng-paneldynamic-add-btn>\n      <sv-ng-paneldynamic-progress-text [data]=\"{ question: model }\"></sv-ng-paneldynamic-progress-text>\n    </div>\n  </div>\n</ng-template>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: PanelDynamicAddBtn, selector: "sv-ng-paneldynamic-add-btn" }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: PanelDynamicPrevBtn, selector: "sv-ng-paneldynamic-prev-btn" }, { type: PanelDynamicNextBtn, selector: "sv-ng-paneldynamic-next-btn" }, { type: PanelDynamicProgressText, selector: "sv-ng-paneldynamic-progress-text" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PanelDynamicQuestionComponent, decorators: [{
             type: Component,
             args: [{
@@ -3114,14 +3137,17 @@ class MatrixCellComponent extends BaseAngular {
     ngAfterViewInit() {
         if (!this.cell.hasQuestion || !this.question || !this.question.survey)
             return;
+        const el = this.cellContainer.nativeElement;
+        const cellQ = this.cell.question;
         var options = {
             cell: this.cell.cell,
-            cellQuestion: this.cell.question,
-            htmlElement: this.cellContainer.nativeElement,
+            cellQuestion: cellQ,
+            htmlElement: el,
             row: this.cell.row,
             column: this.cell.cell.column,
         };
         this.question.survey.matrixAfterCellRender(this.question, options);
+        cellQ.afterRenderCore(el);
     }
     ngOnDestroy() {
         var _a;
@@ -3366,7 +3392,7 @@ AngularComponentFactory.Instance.registerComponent("composite-question", Composi
 class CoverCellComponent extends EmbeddedViewContentComponent {
 }
 CoverCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoverCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CoverCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CoverCellComponent, selector: "sv-ng-cover-cell", inputs: { model: "model" }, viewQueries: [{ propertyName: "actionContent", first: true, predicate: ["actionContent"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "\n<ng-template #template>\n  <div [class]=\"model.css\" [style]=\"model.style\">\n    <div class=\"sv-cover__cell-content\" [style]=\"model.contentStyle\">\n      <div *ngIf=\"model.showLogo\" class=\"sv-cover__logo\">\n        <div [class]=\"model.survey.logoClassNames\">\n          <ng-template [component]=\"{ name: model.survey.getElementWrapperComponentName(model.survey, 'logo-image'), data: { data: model.survey.getElementWrapperComponentData(model.survey, 'logo-image') } }\"></ng-template>\n        </div>\n      </div>\n      <div *ngIf=\"model.showTitle\" class=\"sv-cover__title\" [style]=\"{ maxWidth: model.textWidth }\">\n        <sv-ng-element-title [element]=\"model.survey\"></sv-ng-element-title>\n      </div>\n      <div *ngIf=\"model.showDescription\" class=\"sv-cover__description\" [style]=\"{ maxWidth: model.textWidth }\">\n        <h5 *ngIf=\"model.survey.renderedHasDescription\" [class]=\"model.survey.css.description\" [model]=\"model.survey.locDescription\" sv-ng-string></h5>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+CoverCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CoverCellComponent, selector: "sv-ng-cover-cell", inputs: { model: "model" }, viewQueries: [{ propertyName: "actionContent", first: true, predicate: ["actionContent"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "\n<ng-template #template>\n  <div [class]=\"model.css\" [style]=\"model.style\">\n    <div class=\"sv-cover__cell-content\" [style]=\"model.contentStyle\">\n      <div *ngIf=\"model.showLogo\" class=\"sv-cover__logo\">\n        <div [class]=\"model.survey.logoClassNames\">\n          <ng-template [component]=\"{ name: model.survey.getElementWrapperComponentName(model.survey, 'logo-image'), data: { data: model.survey.getElementWrapperComponentData(model.survey, 'logo-image') } }\"></ng-template>\n        </div>\n      </div>\n      <div *ngIf=\"model.showTitle\" class=\"sv-cover__title\" [style]=\"{ maxWidth: model.textAreaWidth }\">\n        <sv-ng-element-title [element]=\"model.survey\"></sv-ng-element-title>\n      </div>\n      <div *ngIf=\"model.showDescription\" class=\"sv-cover__description\" [style]=\"{ maxWidth: model.textAreaWidth }\">\n        <h5 *ngIf=\"model.survey.renderedHasDescription\" [class]=\"model.survey.css.description\" [model]=\"model.survey.locDescription\" sv-ng-string></h5>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoverCellComponent, decorators: [{
             type: Component,
             args: [{
@@ -3389,7 +3415,7 @@ class CoverComponent extends BaseAngular {
     }
 }
 CoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CoverComponent, selector: "sv-cover, sv-ng-cover", inputs: { model: "model", survey: "survey" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"(survey.titleView === 'cover' && survey.renderedHasHeader)\" [class]=\"model.coverClasses\" [style]=\"{ height: model.renderedHeight, backgroundColor: model.backgroundColor }\">\n    <div *ngIf=\"!!model.backgroundImage\" [style]=\"model.backgroundImageStyle\" [class]=\"model.backgroundImageClasses\"></div>\n    <div [class]=\"model.contentClasses\">\n      <ng-container *ngFor=\"let cell of model.cells\">\n        <sv-ng-cover-cell [model]=\"cell\"></sv-ng-cover-cell>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none }"], components: [{ type: CoverCellComponent, selector: "sv-ng-cover-cell", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+CoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CoverComponent, selector: "sv-cover, sv-ng-cover", inputs: { model: "model", survey: "survey" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"(survey.headerView === 'advanced' && survey.renderedHasHeader)\" [class]=\"model.coverClasses\" [style]=\"{ height: model.renderedHeight }\">\n    <div *ngIf=\"!!model.backgroundImage\" [style]=\"model.backgroundImageStyle\" [class]=\"model.backgroundImageClasses\"></div>\n    <div [class]=\"model.contentClasses\">\n      <ng-container *ngFor=\"let cell of model.cells\">\n        <sv-ng-cover-cell [model]=\"cell\"></sv-ng-cover-cell>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none }"], components: [{ type: CoverCellComponent, selector: "sv-ng-cover-cell", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoverComponent, decorators: [{
             type: Component,
             args: [{
@@ -3424,7 +3450,7 @@ SurveyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent, MatrixCellComponent, MatrixTableComponent, MatrixDropdownComponent,
         MatrixDynamicComponent, MatrixDetailButtonComponent, MatrixDynamicRemoveButtonComponent, MatrixDynamicDragDropIconComponent, MatrixRequiredHeader, ExpressionComponent, SafeResourceUrlPipe, BrandInfoComponent,
         CustomQuestionComponent, CompositeQuestionComponent, ButtonGroupItemComponent, ButtonGroupQuestionComponent, MatrixRowComponent, ModalComponent, LogoImageComponent, SkeletonComponent, TimerPanelComponent, PaneldynamicRemoveButtonComponent,
-        NotifierComponent, ComponentsContainerComponent, MultipleTextRowComponent, LoadingIndicatorComponent, CoverComponent, CoverCellComponent, ChooseFileBtn], imports: [CommonModule, FormsModule], exports: [VisibleDirective, Key2ClickDirective, PanelDynamicAddBtn, PanelDynamicNextBtn, PanelDynamicPrevBtn, PanelDynamicProgressText, ElementComponent, TemplateRendererComponent,
+        NotifierComponent, ComponentsContainerComponent, MultipleTextRowComponent, LoadingIndicatorComponent, CoverComponent, CoverCellComponent, ChooseFileBtn, FilePreviewComponent], imports: [CommonModule, FormsModule], exports: [VisibleDirective, Key2ClickDirective, PanelDynamicAddBtn, PanelDynamicNextBtn, PanelDynamicPrevBtn, PanelDynamicProgressText, ElementComponent, TemplateRendererComponent,
         SurveyComponent, SurveyContentComponent, PopupSurveyComponent, PageComponent, PanelComponent, QuestionComponent, StringViewerComponent, SurveyStringComponent, StringEditorComponent,
         QuestionSkeletonComponent, TextQuestionComponent, RadiogroupComponent, RadiogroupItemComponent, CheckboxComponent, CheckboxItemComponent,
         CharacterCounterComponent,
@@ -3439,7 +3465,7 @@ SurveyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent, MatrixCellComponent, MatrixTableComponent, MatrixDropdownComponent,
         MatrixDynamicComponent, MatrixDetailButtonComponent, MatrixDynamicRemoveButtonComponent, MatrixDynamicDragDropIconComponent, MatrixRequiredHeader, ExpressionComponent, SafeResourceUrlPipe,
         CustomQuestionComponent, CompositeQuestionComponent, ButtonGroupQuestionComponent, ModalComponent, LogoImageComponent, SkeletonComponent, TimerPanelComponent, PaneldynamicRemoveButtonComponent,
-        NotifierComponent, ComponentsContainerComponent, MultipleTextRowComponent, LoadingIndicatorComponent, CoverComponent, CoverCellComponent] });
+        NotifierComponent, ComponentsContainerComponent, MultipleTextRowComponent, LoadingIndicatorComponent, CoverComponent, CoverCellComponent, FilePreviewComponent] });
 SurveyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyModule, providers: [PopupService], imports: [[
             CommonModule, FormsModule
         ]] });
@@ -3461,7 +3487,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent, MatrixCellComponent, MatrixTableComponent, MatrixDropdownComponent,
                         MatrixDynamicComponent, MatrixDetailButtonComponent, MatrixDynamicRemoveButtonComponent, MatrixDynamicDragDropIconComponent, MatrixRequiredHeader, ExpressionComponent, SafeResourceUrlPipe, BrandInfoComponent,
                         CustomQuestionComponent, CompositeQuestionComponent, ButtonGroupItemComponent, ButtonGroupQuestionComponent, MatrixRowComponent, ModalComponent, LogoImageComponent, SkeletonComponent, TimerPanelComponent, PaneldynamicRemoveButtonComponent,
-                        NotifierComponent, ComponentsContainerComponent, MultipleTextRowComponent, LoadingIndicatorComponent, CoverComponent, CoverCellComponent, ChooseFileBtn
+                        NotifierComponent, ComponentsContainerComponent, MultipleTextRowComponent, LoadingIndicatorComponent, CoverComponent, CoverCellComponent, ChooseFileBtn, FilePreviewComponent
                     ],
                     imports: [
                         CommonModule, FormsModule
@@ -3482,7 +3508,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent, MatrixCellComponent, MatrixTableComponent, MatrixDropdownComponent,
                         MatrixDynamicComponent, MatrixDetailButtonComponent, MatrixDynamicRemoveButtonComponent, MatrixDynamicDragDropIconComponent, MatrixRequiredHeader, ExpressionComponent, SafeResourceUrlPipe,
                         CustomQuestionComponent, CompositeQuestionComponent, ButtonGroupQuestionComponent, ModalComponent, LogoImageComponent, SkeletonComponent, TimerPanelComponent, PaneldynamicRemoveButtonComponent,
-                        NotifierComponent, ComponentsContainerComponent, MultipleTextRowComponent, LoadingIndicatorComponent, CoverComponent, CoverCellComponent
+                        NotifierComponent, ComponentsContainerComponent, MultipleTextRowComponent, LoadingIndicatorComponent, CoverComponent, CoverCellComponent, FilePreviewComponent
                     ],
                     providers: [PopupService],
                 }]
@@ -3492,5 +3518,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActionBarComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, ActionComponent, AngularComponentFactory, BaseAngular, BooleanCheckboxComponent, BooleanQuestionComponent, BooleanRadioComponent, BooleanRadioItemComponent, BrandInfoComponent, ButtonGroupQuestionComponent, CharacterCounterComponent, CheckboxComponent, CheckboxItemComponent, CommentQuestionComponent, ComponentsContainerComponent, CompositeQuestionComponent, CoverCellComponent, CoverComponent, CustomQuestionComponent, CustomWidgetComponent, DropdownComponent, DropdownOptionItemComponent, DropdownQuestionComponent, DropdownSelectComponent, DynamicComponentDirective, DynamicHeadComponent, ElementComponent, ElementHeaderComponent, ElementTitleComponent, EmbeddedViewContentComponent, ErrorsComponent, ExpressionComponent, FileQuestionComponent, HtmlQuestionComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent, Key2ClickDirective, ListComponent, ListItemComponent, LoadingIndicatorComponent, LogoImageComponent, MatrixCellComponent, MatrixDetailButtonComponent, MatrixDropdownComponent, MatrixDynamicComponent, MatrixDynamicDragDropIconComponent, MatrixDynamicRemoveButtonComponent, MatrixQuestionComponent, MatrixRequiredHeader, MatrixTableComponent, ModalComponent, MultipleTextComponent, MultipleTextItemComponent, MultipleTextRowComponent, NotifierComponent, PageComponent, PanelComponent, PanelDynamicAddBtn, PanelDynamicNextBtn, PanelDynamicPrevBtn, PanelDynamicProgressText, PanelDynamicQuestionComponent, PaneldynamicAction, PaneldynamicRemoveButtonComponent, PopupBaseContainerComponent, PopupComponent, PopupPointerComponent, PopupService, PopupSurveyComponent, ProgressButtonsComponent, ProgressDefaultComponent, ProgressTocComponent, QuestionAngular, QuestionComponent, QuestionSkeletonComponent, RadiogroupComponent, RadiogroupItemComponent, RankingItemComponent, RankingQuestionComponent, RatingDropdownComponent, RatingItemComponent, RatingItemSmileyComponent, RatingItemStarComponent, RatingQuestionComponent, RowComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeUrlPipe, SelectBaseComponent, SelectBaseItemComponent, SignaturePadQuestionComponent, SkeletonComponent, StringEditorComponent, StringViewerComponent, SurveyCommentComponent, SurveyCommentOtherComponent, SurveyComponent, SurveyContentComponent, SurveyHeaderComponent, SurveyModule, SurveyNavigationButton, SurveyStringComponent, SvgIconComponent, TagboxComponent, TagboxFilterComponent, TagboxItemComponent, TagboxQuestionComponent, TemplateRendererComponent, TextQuestionComponent, TimerPanelComponent, VisibleDirective, getComponentName };
+export { ActionBarComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, ActionComponent, AngularComponentFactory, BaseAngular, BooleanCheckboxComponent, BooleanQuestionComponent, BooleanRadioComponent, BooleanRadioItemComponent, BrandInfoComponent, ButtonGroupQuestionComponent, CharacterCounterComponent, CheckboxComponent, CheckboxItemComponent, CommentQuestionComponent, ComponentsContainerComponent, CompositeQuestionComponent, CoverCellComponent, CoverComponent, CustomQuestionComponent, CustomWidgetComponent, DropdownComponent, DropdownOptionItemComponent, DropdownQuestionComponent, DropdownSelectComponent, DynamicComponentDirective, DynamicHeadComponent, ElementComponent, ElementHeaderComponent, ElementTitleComponent, EmbeddedViewContentComponent, ErrorsComponent, ExpressionComponent, FilePreviewComponent, FileQuestionComponent, HtmlQuestionComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent, Key2ClickDirective, ListComponent, ListItemComponent, LoadingIndicatorComponent, LogoImageComponent, MatrixCellComponent, MatrixDetailButtonComponent, MatrixDropdownComponent, MatrixDynamicComponent, MatrixDynamicDragDropIconComponent, MatrixDynamicRemoveButtonComponent, MatrixQuestionComponent, MatrixRequiredHeader, MatrixTableComponent, ModalComponent, MultipleTextComponent, MultipleTextItemComponent, MultipleTextRowComponent, NotifierComponent, PageComponent, PanelComponent, PanelDynamicAddBtn, PanelDynamicNextBtn, PanelDynamicPrevBtn, PanelDynamicProgressText, PanelDynamicQuestionComponent, PaneldynamicAction, PaneldynamicRemoveButtonComponent, PopupBaseContainerComponent, PopupComponent, PopupPointerComponent, PopupService, PopupSurveyComponent, ProgressButtonsComponent, ProgressDefaultComponent, ProgressTocComponent, QuestionAngular, QuestionComponent, QuestionSkeletonComponent, RadiogroupComponent, RadiogroupItemComponent, RankingItemComponent, RankingQuestionComponent, RatingDropdownComponent, RatingItemComponent, RatingItemSmileyComponent, RatingItemStarComponent, RatingQuestionComponent, RowComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeUrlPipe, SelectBaseComponent, SelectBaseItemComponent, SignaturePadQuestionComponent, SkeletonComponent, StringEditorComponent, StringViewerComponent, SurveyCommentComponent, SurveyCommentOtherComponent, SurveyComponent, SurveyContentComponent, SurveyHeaderComponent, SurveyModule, SurveyNavigationButton, SurveyStringComponent, SvgIconComponent, TagboxComponent, TagboxFilterComponent, TagboxItemComponent, TagboxQuestionComponent, TemplateRendererComponent, TextQuestionComponent, TimerPanelComponent, VisibleDirective, getComponentName };
 //# sourceMappingURL=survey-angular-ui.js.map