survey-angular-ui 1.9.109 → 1.9.111

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.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.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  </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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3VydmV5LWNvbnRlbnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL3N1cnZleS1jb250ZW50LmNvbXBvbmVudC50cyIsIi4uLy4uL3NyYy9zdXJ2ZXktY29udGVudC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQSxPQUFPLEVBQWlCLFNBQVMsRUFBYyxLQUFLLEVBQVUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQy9GLE9BQU8sRUFBZSxXQUFXLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFDdkQsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzdDLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLHFCQUFxQixDQUFDOzs7Ozs7Ozs7QUFLOUQsTUFBTSxPQUFPLHNCQUF1QixTQUFRLFdBQXdCO0lBSnBFOztRQU9VLG9CQUFlLEdBQVksS0FBSyxDQUFDO0tBd0MxQztJQXZDVyxRQUFRO1FBQ2hCLE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBQztJQUNwQixDQUFDO0lBQ2tCLGNBQWM7UUFDL0IsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLGFBQWEsRUFBRTtZQUN4QixJQUFJLENBQUMsYUFBYSxDQUFDLHFCQUFxQixFQUFFLENBQUM7WUFDM0MsSUFBSSxDQUFDLGFBQWEsQ0FBQyxjQUFjLEdBQVEsU0FBUyxDQUFDO1NBQ3BEO1FBQ0QsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRTtZQUNoQixJQUFJLENBQUMsS0FBSyxDQUFDLGNBQWMsR0FBRyxHQUFHLEVBQUU7Z0JBQy9CLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztZQUN2QixDQUFDLENBQUM7U0FDSDtRQUNELElBQUksQ0FBQyxlQUFlLEdBQUcsSUFBSSxDQUFDO0lBQzlCLENBQUM7SUFDUSxRQUFRO1FBQ2YsS0FBSyxDQUFDLFFBQVEsRUFBRSxDQUFDO1FBQ2pCLElBQUksQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLElBQUksSUFBSSxDQUFDLEtBQUssQ0FBQyxpQkFBaUIsQ0FBQyxFQUFFO1lBQ2pELFdBQVcsQ0FBQyxXQUFXLEVBQUUsQ0FBQztTQUMzQjtJQUNILENBQUM7SUFDUSxXQUFXO1FBQ2xCLEtBQUssQ0FBQyxXQUFXLEVBQUUsQ0FBQztRQUNwQixJQUFJLENBQUMsQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFO1lBQ2hCLElBQUksQ0FBQyxLQUFLLENBQUMsV0FBVyxHQUFHLFNBQWdCLENBQUM7WUFDMUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxxQkFBcUIsRUFBRSxDQUFDO1lBQ25DLElBQUksQ0FBQyxLQUFLLENBQUMsY0FBYyxHQUFRLFNBQVMsQ0FBQztTQUM1QztJQUNILENBQUM7SUFDRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLGVBQWUsR0FBRyxJQUFJLENBQUM7SUFDOUIsQ0FBQztJQUNRLGtCQUFrQjtRQUN6QixJQUFJLENBQUMsQ0FBQyxJQUFJLENBQUMsS0FBSyxJQUFJLElBQUksQ0FBQyxlQUFlLEVBQUU7WUFDeEMsSUFBSSxDQUFDLEtBQUssQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1lBQ3hELElBQUksQ0FBQyxLQUFLLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQztTQUMvQjtRQUNELEtBQUssQ0FBQyxrQkFBa0IsRUFBRSxDQUFDO0lBQzdCLENBQUM7O29IQTFDVSxzQkFBc0I7d0dBQXRCLHNCQUFzQixvTkNUbkMsaWxHQXNDYzs0RkQ3QkQsc0JBQXNCO2tCQUpsQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxnQkFBZ0I7b0JBQzFCLFdBQVcsRUFBRSxpQ0FBaUM7aUJBQy9DOzhCQUVVLEtBQUs7c0JBQWIsS0FBSztnQkFDMkMsTUFBTTtzQkFBdEQsU0FBUzt1QkFBQyxpQkFBaUIsRUFBRSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUU7O0FBMkNqRCx1QkFBdUIsQ0FBQyxRQUFRLENBQUMsaUJBQWlCLENBQUMsUUFBUSxFQUFFLHNCQUFzQixDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJcbmltcG9ydCB7IEFmdGVyVmlld0luaXQsIENvbXBvbmVudCwgRWxlbWVudFJlZiwgSW5wdXQsIE9uSW5pdCwgVmlld0NoaWxkIH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IFN1cnZleU1vZGVsLCBTdmdSZWdpc3RyeSB9IGZyb20gXCJzdXJ2ZXktY29yZVwiO1xuaW1wb3J0IHsgQmFzZUFuZ3VsYXIgfSBmcm9tIFwiLi9iYXNlLWFuZ3VsYXJcIjtcbmltcG9ydCB7IEFuZ3VsYXJDb21wb25lbnRGYWN0b3J5IH0gZnJvbSBcIi4vY29tcG9uZW50LWZhY3RvcnlcIjtcbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJzdXJ2ZXktY29udGVudFwiLFxuICB0ZW1wbGF0ZVVybDogXCIuL3N1cnZleS1jb250ZW50LmNvbXBvbmVudC5odG1sXCJcbn0pXG5leHBvcnQgY2xhc3MgU3VydmV5Q29udGVudENvbXBvbmVudCBleHRlbmRzIEJhc2VBbmd1bGFyPFN1cnZleU1vZGVsPiBpbXBsZW1lbnRzIE9uSW5pdCwgQWZ0ZXJWaWV3SW5pdCB7XG4gIEBJbnB1dCgpIG1vZGVsITogU3VydmV5TW9kZWw7XG4gIEBWaWV3Q2hpbGQoXCJzdXJ2ZXlDb250YWluZXJcIiwgeyBzdGF0aWM6IGZhbHNlIH0pIHJvb3RFbCE6IEVsZW1lbnRSZWY8SFRNTERpdkVsZW1lbnQ+O1xuICBwcml2YXRlIGlzU3VydmV5VXBkYXRlZDogYm9vbGVhbiA9IGZhbHNlO1xuICBwcm90ZWN0ZWQgZ2V0TW9kZWwoKTogU3VydmV5TW9kZWwge1xuICAgIHJldHVybiB0aGlzLm1vZGVsO1xuICB9XG4gIHByb3RlY3RlZCBvdmVycmlkZSBvbk1vZGVsQ2hhbmdlZCgpOiB2b2lkIHtcbiAgICBpZiAoISF0aGlzLnByZXZpb3VzTW9kZWwpIHtcbiAgICAgIHRoaXMucHJldmlvdXNNb2RlbC5kZXN0cm95UmVzaXplT2JzZXJ2ZXIoKTtcbiAgICAgIHRoaXMucHJldmlvdXNNb2RlbC5yZW5kZXJDYWxsYmFjayA9IDxhbnk+dW5kZWZpbmVkO1xuICAgIH1cbiAgICBpZiAoISF0aGlzLm1vZGVsKSB7XG4gICAgICB0aGlzLm1vZGVsLnJlbmRlckNhbGxiYWNrID0gKCkgPT4ge1xuICAgICAgICB0aGlzLmRldGVjdENoYW5nZXMoKTtcbiAgICAgIH07XG4gICAgfVxuICAgIHRoaXMuaXNTdXJ2ZXlVcGRhdGVkID0gdHJ1ZTtcbiAgfVxuICBvdmVycmlkZSBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICBzdXBlci5uZ09uSW5pdCgpO1xuICAgIGlmICghIXRoaXMubW9kZWwgJiYgdGhpcy5tb2RlbFtcIm5lZWRSZW5kZXJJY29uc1wiXSkge1xuICAgICAgU3ZnUmVnaXN0cnkucmVuZGVySWNvbnMoKTtcbiAgICB9XG4gIH1cbiAgb3ZlcnJpZGUgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgc3VwZXIubmdPbkRlc3Ryb3koKTtcbiAgICBpZiAoISF0aGlzLm1vZGVsKSB7XG4gICAgICB0aGlzLm1vZGVsLnJvb3RFbGVtZW50ID0gdW5kZWZpbmVkIGFzIGFueTtcbiAgICAgIHRoaXMubW9kZWwuZGVzdHJveVJlc2l6ZU9ic2VydmVyKCk7XG4gICAgICB0aGlzLm1vZGVsLnJlbmRlckNhbGxiYWNrID0gPGFueT51bmRlZmluZWQ7XG4gICAgfVxuICB9XG4gIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLmlzU3VydmV5VXBkYXRlZCA9IHRydWU7XG4gIH1cbiAgb3ZlcnJpZGUgbmdBZnRlclZpZXdDaGVja2VkKCk6IHZvaWQge1xuICAgIGlmICghIXRoaXMubW9kZWwgJiYgdGhpcy5pc1N1cnZleVVwZGF0ZWQpIHtcbiAgICAgIHRoaXMubW9kZWwuYWZ0ZXJSZW5kZXJTdXJ2ZXkodGhpcy5yb290RWwubmF0aXZlRWxlbWVudCk7XG4gICAgICB0aGlzLm1vZGVsLnN0YXJ0VGltZXJGcm9tVUkoKTtcbiAgICB9XG4gICAgc3VwZXIubmdBZnRlclZpZXdDaGVja2VkKCk7XG4gIH1cbn1cblxuQW5ndWxhckNvbXBvbmVudEZhY3RvcnkuSW5zdGFuY2UucmVnaXN0ZXJDb21wb25lbnQoXCJzdXJ2ZXlcIiwgU3VydmV5Q29udGVudENvbXBvbmVudCk7IiwiPG5nLXRlbXBsYXRlICN0ZW1wbGF0ZT5cbiAgPGRpdiAjc3VydmV5Q29udGFpbmVyICpuZ0lmPVwiISFtb2RlbFwiIFtjbGFzc109XCJtb2RlbC5nZXRSb290Q3NzKClcIiBbc3R5bGVdPVwibW9kZWwudGhlbWVWYXJpYWJsZXNcIj5cbiAgICA8ZGl2ICpuZ0lmPVwiISFtb2RlbC5yZW5kZXJCYWNrZ3JvdW5kSW1hZ2VcIiBbY2xhc3NdPVwibW9kZWwuY3NzLnJvb3RCYWNrZ3JvdW5kSW1hZ2VcIiBbc3R5bGVdPVwibW9kZWwuYmFja2dyb3VuZEltYWdlU3R5bGVcIj48L2Rpdj5cbiAgICA8Zm9ybSBvbnN1Ym1pdD1cInJldHVybiBmYWxzZTtcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJzdl9jdXN0b21faGVhZGVyXCIgW2hpZGRlbl09XCJtb2RlbC5oYXNMb2dvXCI+PC9kaXY+XG4gICAgICA8ZGl2IFtjbGFzc109XCJtb2RlbC5jc3MuY29udGFpbmVyXCI+XG4gICAgICAgIDxkaXYgKm5nSWY9XCJtb2RlbC5yZW5kZXJlZEhhc0hlYWRlclwiIFtjbGFzc109XCJtb2RlbC5jc3MuaGVhZGVyXCIgW3N1cnZleV09XCJtb2RlbFwiIHN2LW5nLXN1cnZleS1oZWFkZXI+PC9kaXY+XG4gICAgICAgIDxuZy10ZW1wbGF0ZSBbY29tcG9uZW50XT1cInsgbmFtZTogJ3N2LWNvbXBvbmVudHMtY29udGFpbmVyJywgZGF0YTogeyBzdXJ2ZXk6IG1vZGVsLCBjb250YWluZXI6ICdoZWFkZXInLCBuZWVkUmVuZGVyV3JhcHBlcjogZmFsc2UgfSB9XCI+PC9uZy10ZW1wbGF0ZT5cbiAgICAgICAgPGRpdiAqbmdJZj1cIm1vZGVsLmlzU2hvd2luZ1BhZ2VcIiBbY2xhc3NdPVwibW9kZWwuYm9keUNvbnRhaW5lckNzc1wiPlxuICAgICAgICAgIDxuZy10ZW1wbGF0ZSBbY29tcG9uZW50XT1cInsgbmFtZTogJ3N2LWNvbXBvbmVudHMtY29udGFpbmVyJywgZGF0YTogeyBzdXJ2ZXk6IG1vZGVsLCBjb250YWluZXI6ICdsZWZ0JyB9IH1cIj48L25nLXRlbXBsYXRlPlxuICAgICAgICAgIDxkaXYgW2NsYXNzXT1cIm1vZGVsLmJvZHlDc3NcIiBbc3R5bGUubWF4V2lkdGhdPVwibW9kZWwucmVuZGVyZWRXaWR0aFwiIFtpZF09XCJtb2RlbC5hY3RpdmVQYWdlID8gbW9kZWwuYWN0aXZlUGFnZS5pZCA6ICcnXCI+XG4gICAgICAgICAgICA8bmctdGVtcGxhdGUgW2NvbXBvbmVudF09XCJ7IG5hbWU6ICdzdi1jb21wb25lbnRzLWNvbnRhaW5lcicsIGRhdGE6IHsgc3VydmV5OiBtb2RlbCwgY29udGFpbmVyOiAnY29udGVudFRvcCcgfSB9XCI+PC9uZy10ZW1wbGF0ZT5cbiAgICAgICAgICAgIDwhLS0ga28gaWY6IGFjdGl2ZVBhZ2UgLS0+XG4gICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJtb2RlbC5hY3RpdmVQYWdlXCI+XG4gICAgICAgICAgICAgICAgICA8c3YtbmctcGFnZSBbbW9kZWxdPVwibW9kZWwuYWN0aXZlUGFnZVwiIFtzdXJ2ZXldPVwibW9kZWxcIj48L3N2LW5nLXBhZ2U+XG4gICAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgICA8IS0tIGtvIGlmOiBhY3RpdmVQYWdlLnJvd3MubGVuZ3RoID09IDAgJiYgJGRhdGEuZW1wdHlQYWdlVGVtcGxhdGUgLS0+XG4gICAgICAgICAgICAgIDwhLS0ga28gdGVtcGxhdGU6IHsgbmFtZTogZW1wdHlQYWdlVGVtcGxhdGUsIGRhdGE6ICRkYXRhLmVtcHR5UGFnZVRlbXBsYXRlRGF0YSB8fCAkZGF0YSB9IC0tPlxuICAgICAgICAgICAgICA8IS0tIC9rbyAtLT5cbiAgICAgICAgICAgICAgPCEtLSAva28gLS0+XG4gICAgICAgICAgICA8IS0tIC9rbyAtLT5cbiAgICAgICAgICAgIDxuZy10ZW1wbGF0ZSBbY29tcG9uZW50XT1cInsgbmFtZTogJ3N2LWNvbXBvbmVudHMtY29udGFpbmVyJywgZGF0YTogeyBzdXJ2ZXk6IG1vZGVsLCBjb250YWluZXI6ICdjb250ZW50Qm90dG9tJyB9IH1cIj48L25nLXRlbXBsYXRlPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDxuZy10ZW1wbGF0ZSBbY29tcG9uZW50XT1cInsgbmFtZTogJ3N2LWNvbXBvbmVudHMtY29udGFpbmVyJywgZGF0YTogeyBzdXJ2ZXk6IG1vZGVsLCBjb250YWluZXI6ICdyaWdodCcgfSB9XCI+PC9uZy10ZW1wbGF0ZT5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxuZy10ZW1wbGF0ZSBbY29tcG9uZW50XT1cInsgbmFtZTogJ3N2LWNvbXBvbmVudHMtY29udGFpbmVyJywgZGF0YTogeyBzdXJ2ZXk6IG1vZGVsLCBjb250YWluZXI6ICdmb290ZXInLCBuZWVkUmVuZGVyV3JhcHBlcjogZmFsc2UgfSB9XCI+PC9uZy10ZW1wbGF0ZT5cbiAgICAgICAgPGRpdiAqbmdJZj1cIm1vZGVsLnN0YXRlID09PSAnY29tcGxldGVkJyAmJiBtb2RlbC5zaG93Q29tcGxldGVkUGFnZVwiIFtjbGFzc109XCJtb2RlbC5jb21wbGV0ZWRDc3NcIlxuICAgICAgICAgIFtpbm5lckh0bWxdPVwibW9kZWwucHJvY2Vzc2VkQ29tcGxldGVkSHRtbFwiPjwvZGl2PlxuICAgICAgICA8bmctdGVtcGxhdGUgKm5nSWY9XCJtb2RlbC5zdGF0ZSA9PT0gJ2NvbXBsZXRlZCcgJiYgbW9kZWwuc2hvd0NvbXBsZXRlZFBhZ2VcIiBbY29tcG9uZW50XT1cInsgbmFtZTogJ3N2LWNvbXBvbmVudHMtY29udGFpbmVyJywgZGF0YTogeyBzdXJ2ZXk6IG1vZGVsLCBjb250YWluZXI6ICdjb21wbGV0ZVBhZ2UnIH0gfVwiPjwvbmctdGVtcGxhdGU+XG4gICAgICAgIDxkaXYgKm5nSWY9XCJtb2RlbC5zdGF0ZSA9PT0gJ2NvbXBsZXRlZGJlZm9yZSdcIiBbY2xhc3NdPVwibW9kZWwuY29tcGxldGVkQmVmb3JlQ3NzXCJcbiAgICAgICAgICBbaW5uZXJIdG1sXT1cIm1vZGVsLnByb2Nlc3NlZENvbXBsZXRlZEJlZm9yZUh0bWxcIj48L2Rpdj5cbiAgICAgICAgPGRpdiAqbmdJZj1cIm1vZGVsLnN0YXRlID09PSAnbG9hZGluZydcIiBbY2xhc3NdPVwibW9kZWwubG9hZGluZ0JvZHlDc3NcIiBbaW5uZXJIdG1sXT1cIm1vZGVsLnByb2Nlc3NlZExvYWRpbmdIdG1sXCI+PC9kaXY+XG4gICAgICAgIDxkaXYgKm5nSWY9XCJtb2RlbC5zdGF0ZSA9PT0gJ2VtcHR5J1wiIFtjbGFzc109XCJtb2RlbC5jc3MuYm9keUVtcHR5XCI+e3ttb2RlbC5lbXB0eVN1cnZleVRleHR9fTwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgPC9mb3JtPlxuICAgIDxzdi1icmFuZC1pbmZvICpuZ0lmPVwibW9kZWwuc2hvd0JyYW5kSW5mb1wiPjwvc3YtYnJhbmQtaW5mbz5cbiAgICA8c3Ytbm90aWZpZXIgW25vdGlmaWVyXT1cIm1vZGVsLm5vdGlmaWVyXCI+PC9zdi1ub3RpZmllcj5cbiAgPC9kaXY+XG48L25nLXRlbXBsYXRlPiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3VydmV5LWNvbnRlbnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL3N1cnZleS1jb250ZW50LmNvbXBvbmVudC50cyIsIi4uLy4uL3NyYy9zdXJ2ZXktY29udGVudC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQSxPQUFPLEVBQWlCLFNBQVMsRUFBYyxLQUFLLEVBQVUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQy9GLE9BQU8sRUFBZSxXQUFXLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFDdkQsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzdDLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLHFCQUFxQixDQUFDOzs7Ozs7Ozs7QUFLOUQsTUFBTSxPQUFPLHNCQUF1QixTQUFRLFdBQXdCO0lBSnBFOztRQU9VLG9CQUFlLEdBQVksS0FBSyxDQUFDO0tBd0MxQztJQXZDVyxRQUFRO1FBQ2hCLE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBQztJQUNwQixDQUFDO0lBQ2tCLGNBQWM7UUFDL0IsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLGFBQWEsRUFBRTtZQUN4QixJQUFJLENBQUMsYUFBYSxDQUFDLHFCQUFxQixFQUFFLENBQUM7WUFDM0MsSUFBSSxDQUFDLGFBQWEsQ0FBQyxjQUFjLEdBQVEsU0FBUyxDQUFDO1NBQ3BEO1FBQ0QsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRTtZQUNoQixJQUFJLENBQUMsS0FBSyxDQUFDLGNBQWMsR0FBRyxHQUFHLEVBQUU7Z0JBQy9CLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztZQUN2QixDQUFDLENBQUM7U0FDSDtRQUNELElBQUksQ0FBQyxlQUFlLEdBQUcsSUFBSSxDQUFDO0lBQzlCLENBQUM7SUFDUSxRQUFRO1FBQ2YsS0FBSyxDQUFDLFFBQVEsRUFBRSxDQUFDO1FBQ2pCLElBQUksQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLElBQUksSUFBSSxDQUFDLEtBQUssQ0FBQyxpQkFBaUIsQ0FBQyxFQUFFO1lBQ2pELFdBQVcsQ0FBQyxXQUFXLEVBQUUsQ0FBQztTQUMzQjtJQUNILENBQUM7SUFDUSxXQUFXO1FBQ2xCLEtBQUssQ0FBQyxXQUFXLEVBQUUsQ0FBQztRQUNwQixJQUFJLENBQUMsQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFO1lBQ2hCLElBQUksQ0FBQyxLQUFLLENBQUMsV0FBVyxHQUFHLFNBQWdCLENBQUM7WUFDMUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxxQkFBcUIsRUFBRSxDQUFDO1lBQ25DLElBQUksQ0FBQyxLQUFLLENBQUMsY0FBYyxHQUFRLFNBQVMsQ0FBQztTQUM1QztJQUNILENBQUM7SUFDRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLGVBQWUsR0FBRyxJQUFJLENBQUM7SUFDOUIsQ0FBQztJQUNRLGtCQUFrQjtRQUN6QixJQUFJLENBQUMsQ0FBQyxJQUFJLENBQUMsS0FBSyxJQUFJLElBQUksQ0FBQyxlQUFlLEVBQUU7WUFDeEMsSUFBSSxDQUFDLEtBQUssQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1lBQ3hELElBQUksQ0FBQyxLQUFLLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQztTQUMvQjtRQUNELEtBQUssQ0FBQyxrQkFBa0IsRUFBRSxDQUFDO0lBQzdCLENBQUM7O29IQTFDVSxzQkFBc0I7d0dBQXRCLHNCQUFzQixvTkNUbkMsOHVHQXdDYzs0RkQvQkQsc0JBQXNCO2tCQUpsQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxnQkFBZ0I7b0JBQzFCLFdBQVcsRUFBRSxpQ0FBaUM7aUJBQy9DOzhCQUVVLEtBQUs7c0JBQWIsS0FBSztnQkFDMkMsTUFBTTtzQkFBdEQsU0FBUzt1QkFBQyxpQkFBaUIsRUFBRSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUU7O0FBMkNqRCx1QkFBdUIsQ0FBQyxRQUFRLENBQUMsaUJBQWlCLENBQUMsUUFBUSxFQUFFLHNCQUFzQixDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJcbmltcG9ydCB7IEFmdGVyVmlld0luaXQsIENvbXBvbmVudCwgRWxlbWVudFJlZiwgSW5wdXQsIE9uSW5pdCwgVmlld0NoaWxkIH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IFN1cnZleU1vZGVsLCBTdmdSZWdpc3RyeSB9IGZyb20gXCJzdXJ2ZXktY29yZVwiO1xuaW1wb3J0IHsgQmFzZUFuZ3VsYXIgfSBmcm9tIFwiLi9iYXNlLWFuZ3VsYXJcIjtcbmltcG9ydCB7IEFuZ3VsYXJDb21wb25lbnRGYWN0b3J5IH0gZnJvbSBcIi4vY29tcG9uZW50LWZhY3RvcnlcIjtcbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJzdXJ2ZXktY29udGVudFwiLFxuICB0ZW1wbGF0ZVVybDogXCIuL3N1cnZleS1jb250ZW50LmNvbXBvbmVudC5odG1sXCJcbn0pXG5leHBvcnQgY2xhc3MgU3VydmV5Q29udGVudENvbXBvbmVudCBleHRlbmRzIEJhc2VBbmd1bGFyPFN1cnZleU1vZGVsPiBpbXBsZW1lbnRzIE9uSW5pdCwgQWZ0ZXJWaWV3SW5pdCB7XG4gIEBJbnB1dCgpIG1vZGVsITogU3VydmV5TW9kZWw7XG4gIEBWaWV3Q2hpbGQoXCJzdXJ2ZXlDb250YWluZXJcIiwgeyBzdGF0aWM6IGZhbHNlIH0pIHJvb3RFbCE6IEVsZW1lbnRSZWY8SFRNTERpdkVsZW1lbnQ+O1xuICBwcml2YXRlIGlzU3VydmV5VXBkYXRlZDogYm9vbGVhbiA9IGZhbHNlO1xuICBwcm90ZWN0ZWQgZ2V0TW9kZWwoKTogU3VydmV5TW9kZWwge1xuICAgIHJldHVybiB0aGlzLm1vZGVsO1xuICB9XG4gIHByb3RlY3RlZCBvdmVycmlkZSBvbk1vZGVsQ2hhbmdlZCgpOiB2b2lkIHtcbiAgICBpZiAoISF0aGlzLnByZXZpb3VzTW9kZWwpIHtcbiAgICAgIHRoaXMucHJldmlvdXNNb2RlbC5kZXN0cm95UmVzaXplT2JzZXJ2ZXIoKTtcbiAgICAgIHRoaXMucHJldmlvdXNNb2RlbC5yZW5kZXJDYWxsYmFjayA9IDxhbnk+dW5kZWZpbmVkO1xuICAgIH1cbiAgICBpZiAoISF0aGlzLm1vZGVsKSB7XG4gICAgICB0aGlzLm1vZGVsLnJlbmRlckNhbGxiYWNrID0gKCkgPT4ge1xuICAgICAgICB0aGlzLmRldGVjdENoYW5nZXMoKTtcbiAgICAgIH07XG4gICAgfVxuICAgIHRoaXMuaXNTdXJ2ZXlVcGRhdGVkID0gdHJ1ZTtcbiAgfVxuICBvdmVycmlkZSBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICBzdXBlci5uZ09uSW5pdCgpO1xuICAgIGlmICghIXRoaXMubW9kZWwgJiYgdGhpcy5tb2RlbFtcIm5lZWRSZW5kZXJJY29uc1wiXSkge1xuICAgICAgU3ZnUmVnaXN0cnkucmVuZGVySWNvbnMoKTtcbiAgICB9XG4gIH1cbiAgb3ZlcnJpZGUgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgc3VwZXIubmdPbkRlc3Ryb3koKTtcbiAgICBpZiAoISF0aGlzLm1vZGVsKSB7XG4gICAgICB0aGlzLm1vZGVsLnJvb3RFbGVtZW50ID0gdW5kZWZpbmVkIGFzIGFueTtcbiAgICAgIHRoaXMubW9kZWwuZGVzdHJveVJlc2l6ZU9ic2VydmVyKCk7XG4gICAgICB0aGlzLm1vZGVsLnJlbmRlckNhbGxiYWNrID0gPGFueT51bmRlZmluZWQ7XG4gICAgfVxuICB9XG4gIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLmlzU3VydmV5VXBkYXRlZCA9IHRydWU7XG4gIH1cbiAgb3ZlcnJpZGUgbmdBZnRlclZpZXdDaGVja2VkKCk6IHZvaWQge1xuICAgIGlmICghIXRoaXMubW9kZWwgJiYgdGhpcy5pc1N1cnZleVVwZGF0ZWQpIHtcbiAgICAgIHRoaXMubW9kZWwuYWZ0ZXJSZW5kZXJTdXJ2ZXkodGhpcy5yb290RWwubmF0aXZlRWxlbWVudCk7XG4gICAgICB0aGlzLm1vZGVsLnN0YXJ0VGltZXJGcm9tVUkoKTtcbiAgICB9XG4gICAgc3VwZXIubmdBZnRlclZpZXdDaGVja2VkKCk7XG4gIH1cbn1cblxuQW5ndWxhckNvbXBvbmVudEZhY3RvcnkuSW5zdGFuY2UucmVnaXN0ZXJDb21wb25lbnQoXCJzdXJ2ZXlcIiwgU3VydmV5Q29udGVudENvbXBvbmVudCk7IiwiPG5nLXRlbXBsYXRlICN0ZW1wbGF0ZT5cbiAgPGRpdiAjc3VydmV5Q29udGFpbmVyICpuZ0lmPVwiISFtb2RlbFwiIFtjbGFzc109XCJtb2RlbC5nZXRSb290Q3NzKClcIiBbc3R5bGVdPVwibW9kZWwudGhlbWVWYXJpYWJsZXNcIj5cbiAgICA8ZGl2IFtjbGFzc109XCJtb2RlbC53cmFwcGVyRm9ybUNzc1wiPlxuICAgICAgPGRpdiAqbmdJZj1cIiEhbW9kZWwucmVuZGVyQmFja2dyb3VuZEltYWdlXCIgW2NsYXNzXT1cIm1vZGVsLmNzcy5yb290QmFja2dyb3VuZEltYWdlXCIgW3N0eWxlXT1cIm1vZGVsLmJhY2tncm91bmRJbWFnZVN0eWxlXCI+PC9kaXY+XG4gICAgICA8Zm9ybSBvbnN1Ym1pdD1cInJldHVybiBmYWxzZTtcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cInN2X2N1c3RvbV9oZWFkZXJcIiBbaGlkZGVuXT1cIm1vZGVsLmhhc0xvZ29cIj48L2Rpdj5cbiAgICAgICAgPGRpdiBbY2xhc3NdPVwibW9kZWwuY3NzLmNvbnRhaW5lclwiPlxuICAgICAgICAgIDxkaXYgKm5nSWY9XCJtb2RlbC50aXRsZVZpZXcgPT09ICd0aXRsZScgJiYgbW9kZWwucmVuZGVyZWRIYXNIZWFkZXJcIiBbY2xhc3NdPVwibW9kZWwuY3NzLmhlYWRlclwiIFtzdXJ2ZXldPVwibW9kZWxcIiBzdi1uZy1zdXJ2ZXktaGVhZGVyPjwvZGl2PlxuICAgICAgICAgIDxuZy10ZW1wbGF0ZSBbY29tcG9uZW50XT1cInsgbmFtZTogJ3N2LWNvbXBvbmVudHMtY29udGFpbmVyJywgZGF0YTogeyBzdXJ2ZXk6IG1vZGVsLCBjb250YWluZXI6ICdoZWFkZXInLCBuZWVkUmVuZGVyV3JhcHBlcjogZmFsc2UgfSB9XCI+PC9uZy10ZW1wbGF0ZT5cbiAgICAgICAgICA8ZGl2ICpuZ0lmPVwibW9kZWwuaXNTaG93aW5nUGFnZVwiIFtjbGFzc109XCJtb2RlbC5ib2R5Q29udGFpbmVyQ3NzXCI+XG4gICAgICAgICAgICA8bmctdGVtcGxhdGUgW2NvbXBvbmVudF09XCJ7IG5hbWU6ICdzdi1jb21wb25lbnRzLWNvbnRhaW5lcicsIGRhdGE6IHsgc3VydmV5OiBtb2RlbCwgY29udGFpbmVyOiAnbGVmdCcgfSB9XCI+PC9uZy10ZW1wbGF0ZT5cbiAgICAgICAgICAgIDxkaXYgW2NsYXNzXT1cIm1vZGVsLmJvZHlDc3NcIiBbc3R5bGUubWF4V2lkdGhdPVwibW9kZWwucmVuZGVyZWRXaWR0aFwiIFtpZF09XCJtb2RlbC5hY3RpdmVQYWdlID8gbW9kZWwuYWN0aXZlUGFnZS5pZCA6ICcnXCI+XG4gICAgICAgICAgICAgIDxuZy10ZW1wbGF0ZSBbY29tcG9uZW50XT1cInsgbmFtZTogJ3N2LWNvbXBvbmVudHMtY29udGFpbmVyJywgZGF0YTogeyBzdXJ2ZXk6IG1vZGVsLCBjb250YWluZXI6ICdjb250ZW50VG9wJyB9IH1cIj48L25nLXRlbXBsYXRlPlxuICAgICAgICAgICAgICA8IS0tIGtvIGlmOiBhY3RpdmVQYWdlIC0tPlxuICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJtb2RlbC5hY3RpdmVQYWdlXCI+XG4gICAgICAgICAgICAgICAgICAgIDxzdi1uZy1wYWdlIFttb2RlbF09XCJtb2RlbC5hY3RpdmVQYWdlXCIgW3N1cnZleV09XCJtb2RlbFwiPjwvc3YtbmctcGFnZT5cbiAgICAgICAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgICAgICA8IS0tIGtvIGlmOiBhY3RpdmVQYWdlLnJvd3MubGVuZ3RoID09IDAgJiYgJGRhdGEuZW1wdHlQYWdlVGVtcGxhdGUgLS0+XG4gICAgICAgICAgICAgICAgPCEtLSBrbyB0ZW1wbGF0ZTogeyBuYW1lOiBlbXB0eVBhZ2VUZW1wbGF0ZSwgZGF0YTogJGRhdGEuZW1wdHlQYWdlVGVtcGxhdGVEYXRhIHx8ICRkYXRhIH0gLS0+XG4gICAgICAgICAgICAgICAgPCEtLSAva28gLS0+XG4gICAgICAgICAgICAgICAgPCEtLSAva28gLS0+XG4gICAgICAgICAgICAgIDwhLS0gL2tvIC0tPlxuICAgICAgICAgICAgICA8bmctdGVtcGxhdGUgW2NvbXBvbmVudF09XCJ7IG5hbWU6ICdzdi1jb21wb25lbnRzLWNvbnRhaW5lcicsIGRhdGE6IHsgc3VydmV5OiBtb2RlbCwgY29udGFpbmVyOiAnY29udGVudEJvdHRvbScgfSB9XCI+PC9uZy10ZW1wbGF0ZT5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPG5nLXRlbXBsYXRlIFtjb21wb25lbnRdPVwieyBuYW1lOiAnc3YtY29tcG9uZW50cy1jb250YWluZXInLCBkYXRhOiB7IHN1cnZleTogbW9kZWwsIGNvbnRhaW5lcjogJ3JpZ2h0JyB9IH1cIj48L25nLXRlbXBsYXRlPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDxuZy10ZW1wbGF0ZSBbY29tcG9uZW50XT1cInsgbmFtZTogJ3N2LWNvbXBvbmVudHMtY29udGFpbmVyJywgZGF0YTogeyBzdXJ2ZXk6IG1vZGVsLCBjb250YWluZXI6ICdmb290ZXInLCBuZWVkUmVuZGVyV3JhcHBlcjogZmFsc2UgfSB9XCI+PC9uZy10ZW1wbGF0ZT5cbiAgICAgICAgICA8ZGl2ICpuZ0lmPVwibW9kZWwuc3RhdGUgPT09ICdjb21wbGV0ZWQnICYmIG1vZGVsLnNob3dDb21wbGV0ZWRQYWdlXCIgW2NsYXNzXT1cIm1vZGVsLmNvbXBsZXRlZENzc1wiXG4gICAgICAgICAgICBbaW5uZXJIdG1sXT1cIm1vZGVsLnByb2Nlc3NlZENvbXBsZXRlZEh0bWxcIj48L2Rpdj5cbiAgICAgICAgICA8bmctdGVtcGxhdGUgKm5nSWY9XCJtb2RlbC5zdGF0ZSA9PT0gJ2NvbXBsZXRlZCcgJiYgbW9kZWwuc2hvd0NvbXBsZXRlZFBhZ2VcIiBbY29tcG9uZW50XT1cInsgbmFtZTogJ3N2LWNvbXBvbmVudHMtY29udGFpbmVyJywgZGF0YTogeyBzdXJ2ZXk6IG1vZGVsLCBjb250YWluZXI6ICdjb21wbGV0ZVBhZ2UnIH0gfVwiPjwvbmctdGVtcGxhdGU+XG4gICAgICAgICAgPGRpdiAqbmdJZj1cIm1vZGVsLnN0YXRlID09PSAnY29tcGxldGVkYmVmb3JlJ1wiIFtjbGFzc109XCJtb2RlbC5jb21wbGV0ZWRCZWZvcmVDc3NcIlxuICAgICAgICAgICAgW2lubmVySHRtbF09XCJtb2RlbC5wcm9jZXNzZWRDb21wbGV0ZWRCZWZvcmVIdG1sXCI+PC9kaXY+XG4gICAgICAgICAgPGRpdiAqbmdJZj1cIm1vZGVsLnN0YXRlID09PSAnbG9hZGluZydcIiBbY2xhc3NdPVwibW9kZWwubG9hZGluZ0JvZHlDc3NcIiBbaW5uZXJIdG1sXT1cIm1vZGVsLnByb2Nlc3NlZExvYWRpbmdIdG1sXCI+PC9kaXY+XG4gICAgICAgICAgPGRpdiAqbmdJZj1cIm1vZGVsLnN0YXRlID09PSAnZW1wdHknXCIgW2NsYXNzXT1cIm1vZGVsLmNzcy5ib2R5RW1wdHlcIj57e21vZGVsLmVtcHR5U3VydmV5VGV4dH19PC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9mb3JtPlxuICAgICAgPHN2LWJyYW5kLWluZm8gKm5nSWY9XCJtb2RlbC5zaG93QnJhbmRJbmZvXCI+PC9zdi1icmFuZC1pbmZvPlxuICAgICAgPHN2LW5vdGlmaWVyIFtub3RpZmllcl09XCJtb2RlbC5ub3RpZmllclwiPjwvc3Ytbm90aWZpZXI+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9uZy10ZW1wbGF0ZT4iXX0=

package/fesm2015/survey-angular-ui.js

@@ -241,9 +241,12 @@ class ActionComponent extends BaseAngular {
     getPropertiesToUpdateSync() {
         return ["mode"];
     }
+    get id() {
+        return this.model.id || '';
+    }
 }
 ActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ActionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ActionComponent, selector: "sv-ng-action", 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.getActionRootCss()\" [id]=\"model.id\">\n    <div class=\"sv-action__content\">\n      <ng-container *ngIf=\"model.needSeparator\">\n        <div class=\"sv-action-bar-separator\"></div>\n      </ng-container>\n      <ng-template [component]=\"{ name: model.component, data: { model }, default: 'sv-action-bar-item'}\"></ng-template>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+ActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ActionComponent, selector: "sv-ng-action", inputs: { model: "model" }, viewQueries: [{ propertyName: "actionContent", first: true, predicate: ["actionContent"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"model.getActionRootCss()\" [id]=\"id\">\n    <div class=\"sv-action__content\">\n      <ng-container *ngIf=\"model.needSeparator\">\n        <div class=\"sv-action-bar-separator\"></div>\n      </ng-container>\n      <ng-template [component]=\"{ name: model.component, data: { model }, default: 'sv-action-bar-item'}\"></ng-template>\n    </div>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], 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: ActionComponent, decorators: [{
             type: Component,
             args: [{
@@ -766,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.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.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  </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: [{
@@ -1012,14 +1015,14 @@ class ElementHeaderComponent {
     get rootClass() {
         return this.element.cssHeader;
     }
-    click() {
+    click(e) {
         if (this.element.clickTitleFunction !== undefined) {
-            this.element.clickTitleFunction();
+            this.element.clickTitleFunction(e);
         }
     }
 }
 ElementHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElementHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: { element: "element" }, host: { listeners: { "click": "click()" }, properties: { "class": "this.rootClass" } }, ngImport: i0, template: "<sv-ng-element-title [element]=\"element\"></sv-ng-element-title>\n<div *ngIf=\"element.hasDescriptionUnderTitle\" [class]=\"element.cssDescription\" [model]=\"element.locDescription\" [style.display]=\"element.hasDescription ? '': 'none' \" sv-ng-string></div>\n<ng-container *ngIf=\"!!element.additionalTitleToolbar\">\n<sv-ng-action-bar [model]=\"element.additionalTitleToolbar\"></sv-ng-action-bar>\n</ng-container>", components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+ElementHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: { element: "element" }, host: { listeners: { "click": "click($event)" }, properties: { "class": "this.rootClass" } }, ngImport: i0, template: "<sv-ng-element-title [element]=\"element\"></sv-ng-element-title>\n<div *ngIf=\"element.hasDescriptionUnderTitle\" [class]=\"element.cssDescription\" [model]=\"element.locDescription\" [style.display]=\"element.hasDescription ? '': 'none' \" sv-ng-string></div>\n<ng-container *ngIf=\"!!element.additionalTitleToolbar\">\n<sv-ng-action-bar [model]=\"element.additionalTitleToolbar\"></sv-ng-action-bar>\n</ng-container>", components: [{ type: ElementTitleComponent, selector: "sv-ng-element-title", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementHeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -1033,7 +1036,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 args: ["class"]
             }], click: [{
                 type: HostListener,
-                args: ["click"]
+                args: ["click", ["$event"]]
             }] } });
 
 class SurveyCommentComponent {
@@ -1256,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);
@@ -1288,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-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\" (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: [{
@@ -1364,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);
@@ -1378,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: [{
@@ -2528,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 = () => {
@@ -2560,6 +2592,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
         }] });
 AngularComponentFactory.Instance.registerComponent("matrix-question", MatrixQuestionComponent);
 
+class ChooseFileBtn extends EmbeddedViewContentComponent {
+    get question() {
+        return (this.model && this.model.data.question) || this.data.question;
+    }
+}
+ChooseFileBtn.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ChooseFileBtn, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ChooseFileBtn.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ChooseFileBtn, selector: "sv-ng-choose-file-btn", inputs: { data: "data", model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n    <label *ngIf=\"!question.isReadOnly\" role=\"button\" tabindex=\"0\" [class]=\"question.getChooseFileCss()\"\n        [attr.for]=\"question.inputId\" [attr.aria-label]=\"question.chooseButtonText\" [key2click]>\n        <svg *ngIf=\"question.cssClasses.chooseFileIconId\" [title]=\"question.chooseButtonText\"\n            [iconName]=\"question.cssClasses.chooseFileIconId\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        <span>{{ question.chooseButtonText }}</span>\n    </label>\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: Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ChooseFileBtn, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "sv-ng-choose-file-btn",
+                    templateUrl: "./choose-file.component.html"
+                }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("sv-file-choose-btn", ChooseFileBtn);
+
 class LoadingIndicatorComponent extends EmbeddedViewContentComponent {
 }
 LoadingIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LoadingIndicatorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -2574,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\" 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()\">\n      <ng-container *ngIf=\"model.showLoadingIndicator\">\n        <sv-ng-loading-indicator></sv-ng-loading-indicator>\n      </ng-container>\n      <ng-container *ngIf=\"model.showChooseButton\">\n        <span [class]=\"model.cssClasses.dragAreaPlaceholder\">{{ model.renderedPlaceholder }}</span>\n        <div [class]=\"model.cssClasses.wrapper\">\n          <label *ngIf=\"!model.isReadOnly\" role=\"button\" tabindex=\"0\" [class]=\"model.getChooseFileCss()\"\n            [attr.for]=\"model.inputId\" [attr.aria-label]=\"model.chooseButtonText\" [key2click]>\n            <span>{{ model.chooseButtonText }}</span>\n            <svg *ngIf=\"model.cssClasses.chooseFileIconId\" [title]=\"model.chooseButtonText\"\n              [iconName]=\"model.cssClasses.chooseFileIconId\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n          </label>\n          <span [class]=\"model.cssClasses.noFileChosen\" *ngIf=\"model.isEmpty()\">{{ model.noFileChosenCaption }}</span>\n        </div>\n      </ng-container>\n    </div>\n    <button type=\"button\" *ngIf=\"model.showRemoveButton\" [class]=\"model.cssClasses.removeButton\"\n      (click)=\"model.doClean($event)\">\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    <div [class]=\"model.cssClasses.fileList || undefined\" *ngIf=\"model.allowShowPreview\">\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.cssClasses.removeFileButton\"\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\"\n              [size]=\"'auto'\" 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    <button type=\"button\" *ngIf=\"model.showRemoveButtonBottom\" [class]=\"model.showRemoveButtonBottom\"\n      (click)=\"model.doClean($event)\">\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    <sv-action-bar *ngIf=\"model.fileNavigatorVisible\" [model]=\"model.fileNavigator\"></sv-action-bar>\n  </div>\n</div>", components: [{ type: LoadingIndicatorComponent, selector: "sv-ng-loading-indicator" }, { type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: Key2ClickDirective, selector: "[key2click]", inputs: ["key2click"] }, { 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: [{
@@ -3091,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;
@@ -3213,7 +3262,7 @@ AngularComponentFactory.Instance.registerComponent("matrixdropdown-question", Ma
 class MatrixDynamicComponent extends QuestionAngular {
 }
 MatrixDynamicComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MatrixDynamicComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MatrixDynamicComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixDynamicComponent, selector: "sv-ng-matrixdynamic-question", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div #contentElement>\n    <div *ngIf=\"model.renderedTable.showAddRowOnTop\" [class]=\"model.cssClasses.footer\">\n      <ng-container *ngTemplateOutlet=\"addRowButton\"></ng-container>\n    </div>\n    <sv-ng-matrix-table *ngIf=\"model.renderedTable?.showTable\" [question]=\"model\" [table]=\"model.renderedTable\"></sv-ng-matrix-table>\n    <div *ngIf=\"!model.renderedTable.showTable\" [class]=\"model.cssClasses.emptyRowsSection\">\n      <div [class]=\"model.cssClasses.emptyRowsText\" [model]=\"model.locEmptyRowsText\" sv-ng-string></div>\n      <ng-container *ngTemplateOutlet=\"addRowButton\"></ng-container>\n    </div>\n    <div *ngIf=\"model.renderedTable.showAddRowOnBottom\" [class]=\"model.cssClasses.footer\">\n      <ng-container *ngTemplateOutlet=\"addRowButton\"></ng-container>\n    </div>\n  </div>\n  <ng-template #addRowButton>\n    <button type=\"button\" [class]=\"model.getAddRowButtonCss(true)\" (click)=\"model.addRowUI()\">\n        <sv-ng-string [model]=\"model.locAddRowText\" ></sv-ng-string>\n        <span [class]=\"model.cssClasses.iconAdd\"></span>\n    </button>\n  </ng-template>\n</ng-template>", components: [{ type: MatrixTableComponent, selector: "sv-ng-matrix-table", inputs: ["question", "table"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+MatrixDynamicComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixDynamicComponent, selector: "sv-ng-matrixdynamic-question", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div #contentElement>\n    <div *ngIf=\"model.renderedTable.showAddRowOnTop\" [class]=\"model.cssClasses.footer\">\n      <ng-container *ngTemplateOutlet=\"addRowButton\"></ng-container>\n    </div>\n    <sv-ng-matrix-table *ngIf=\"model.renderedTable?.showTable\" [question]=\"model\" [table]=\"model.renderedTable\"></sv-ng-matrix-table>\n    <div *ngIf=\"!model.renderedTable.showTable\" [class]=\"model.cssClasses.emptyRowsSection\">\n      <div [class]=\"model.cssClasses.emptyRowsText\" [model]=\"model.locEmptyRowsText\" sv-ng-string></div>\n      <ng-container *ngIf=\"model.renderedTable.showAddRow\">\n        <ng-container  *ngTemplateOutlet=\"addRowButton\"></ng-container>\n      </ng-container>\n    </div>\n    <div *ngIf=\"model.renderedTable.showAddRowOnBottom\" [class]=\"model.cssClasses.footer\">\n      <ng-container *ngTemplateOutlet=\"addRowButton\"></ng-container>\n    </div>\n  </div>\n  <ng-template #addRowButton>\n    <button type=\"button\" [class]=\"model.getAddRowButtonCss(true)\" (click)=\"model.addRowUI()\">\n        <sv-ng-string [model]=\"model.locAddRowText\" ></sv-ng-string>\n        <span [class]=\"model.cssClasses.iconAdd\"></span>\n    </button>\n  </ng-template>\n</ng-template>", components: [{ type: MatrixTableComponent, selector: "sv-ng-matrix-table", inputs: ["question", "table"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MatrixDynamicComponent, decorators: [{
             type: Component,
             args: [{
@@ -3340,6 +3389,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
         }] });
 AngularComponentFactory.Instance.registerComponent("composite-question", CompositeQuestionComponent);
 
+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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoverCellComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "sv-ng-cover-cell",
+                    templateUrl: "./cover-cell.component.html",
+                    styles: [":host { display: none; }"],
+                }]
+        }], propDecorators: { model: [{
+                type: Input
+            }], actionContent: [{
+                type: ViewChild,
+                args: ["actionContent", { read: ViewContainerRef, static: true }]
+            }] } });
+AngularComponentFactory.Instance.registerComponent("sv-cover-cell", CoverCellComponent);
+
+class CoverComponent extends BaseAngular {
+    getModel() {
+        this.model.survey = this.survey;
+        return this.model;
+    }
+}
+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 }\">\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: [{
+                    selector: "sv-cover, sv-ng-cover",
+                    templateUrl: "./cover.component.html",
+                    styles: [":host { display: none }"]
+                }]
+        }], propDecorators: { model: [{
+                type: Input
+            }], survey: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ["container"]
+            }] } });
+AngularComponentFactory.Instance.registerComponent("sv-cover", CoverComponent);
+
 class SurveyModule {
 }
 SurveyModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -3357,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], 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,
@@ -3372,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] });
+        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
         ]] });
@@ -3394,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
+                        NotifierComponent, ComponentsContainerComponent, MultipleTextRowComponent, LoadingIndicatorComponent, CoverComponent, CoverCellComponent, ChooseFileBtn, FilePreviewComponent
                     ],
                     imports: [
                         CommonModule, FormsModule
@@ -3415,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
+                        NotifierComponent, ComponentsContainerComponent, MultipleTextRowComponent, LoadingIndicatorComponent, CoverComponent, CoverCellComponent, FilePreviewComponent
                     ],
                     providers: [PopupService],
                 }]
@@ -3425,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, 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