survey-angular-ui 2.3.0 → 2.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -7,7 +7,7 @@ import { icons as icons$1 } from 'survey-core/icons/iconsV2';
7
7
  import { DomPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
8
8
  import * as i2 from '@angular/common';
9
9
  import { CommonModule } from '@angular/common';
10
- import * as i2$1 from '@angular/forms';
10
+ import * as i4 from '@angular/forms';
11
11
  import { FormsModule } from '@angular/forms';
12
12
  import * as i1 from '@angular/platform-browser';
13
13
 
@@ -1031,6 +1031,7 @@ class SurveyContentComponent extends BaseAngular {
1031
1031
  }
1032
1032
  ngAfterViewChecked() {
1033
1033
  if (!!this.model && this.isSurveyUpdated) {
1034
+ this.isSurveyUpdated = false;
1034
1035
  this.model.afterRenderSurvey(this.rootEl.nativeElement);
1035
1036
  this.model.startTimerFromUI();
1036
1037
  }
@@ -1038,7 +1039,7 @@ class SurveyContentComponent extends BaseAngular {
1038
1039
  }
1039
1040
  }
1040
1041
  SurveyContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1041
- 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\" [lang]=\"model.locale || 'en'\" [dir]=\"model.localeDir\">\n <sv-scroll [disabled]=\"model.rootScrollDisabled\">\n <sv-svg-bundle *ngIf=\"model.needRenderIcons\"></sv-svg-bundle>\n <div [class]=\"model.wrapperFormCss\">\n <div *ngIf=\"!!model.renderBackgroundImage\" [class]=\"model.css.rootBackgroundImage\" [style]=\"model.backgroundImageStyle\"></div>\n <form onsubmit=\"return false;\">\n <sv-scroll [disabled]=\"model.formScrollDisabled\">\n <div class=\"sv_custom_header\" [hidden]=\"model.hasLogo\"></div>\n <div [class]=\"model.css.container\">\n <div *ngIf=\"model.headerView === 'basic' && model.renderedHasHeader\" [class]=\"model.css.header\" [survey]=\"model\" sv-ng-survey-header></div>\n <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'header', needRenderWrapper: false } }\"></ng-template>\n <div *ngIf=\"model.isShowingPage\" [class]=\"model.bodyContainerCss\">\n <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'left' } }\"></ng-template>\n <div class=\"sv-components-column sv-components-column--expandable\">\n <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'center' } }\"></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 <sv-brand-info *ngIf=\"model.showBrandInfo\"></sv-brand-info>\n </div>\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 | safeHtml\"></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 | safeHtml\"></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 </sv-scroll>\n </form>\n <sv-notifier [notifier]=\"model.notifier\"></sv-notifier>\n </div>\n </sv-scroll>\n </div>\n</ng-template>", components: [{ type: ScrollComponent, selector: "sv-scroll", inputs: ["disabled", "onInnerHeightChanged"] }, { type: SvgBundleComponent, selector: "sv-svg-bundle" }, { 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"] }], pipes: { "safeHtml": SafeHtmlPipe } });
1042
+ 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\" [lang]=\"model.locale || 'en'\" [dir]=\"model.localeDir\">\n <sv-scroll [disabled]=\"model.rootScrollDisabled\">\n <sv-svg-bundle *ngIf=\"model.needRenderIcons\"></sv-svg-bundle>\n <div [class]=\"model.wrapperFormCss\">\n <div *ngIf=\"!!model.renderBackgroundImage\" [class]=\"model.css.rootBackgroundImage\" [style]=\"model.backgroundImageStyle\"></div>\n <form onsubmit=\"return false;\">\n <sv-scroll [disabled]=\"model.formScrollDisabled\">\n <div class=\"sv_custom_header\" [hidden]=\"model.hasLogo\"></div>\n <div [class]=\"model.css.container\">\n <div *ngIf=\"model.headerView === 'basic' && model.renderedHasHeader\" [class]=\"model.css.header\" [survey]=\"model\" sv-ng-survey-header></div>\n <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'header', needRenderWrapper: false } }\"></ng-template>\n <div *ngIf=\"model.isShowingPage\" [class]=\"model.bodyContainerCss\">\n <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'left' } }\"></ng-template>\n <div class=\"sv-components-column sv-components-column--expandable\">\n <ng-template [component]=\"{ name: 'sv-components-container', data: { survey: model, container: 'center' } }\"></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 <sv-brand-info *ngIf=\"model.showBrandInfo\"></sv-brand-info>\n </div>\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 | safeHtml\"></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 | safeHtml\"></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 </sv-scroll>\n </form>\n <sv-notifier [notifier]=\"model.notifier\"></sv-notifier>\n </div>\n </sv-scroll>\n </div>\n</ng-template>", components: [{ type: ScrollComponent, selector: "sv-scroll", inputs: ["disabled", "onInnerHeightChanged"] }, { type: SvgBundleComponent, selector: "sv-svg-bundle" }, { 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: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }], pipes: { "safeHtml": SafeHtmlPipe } });
1042
1043
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyContentComponent, decorators: [{
1043
1044
  type: Component,
1044
1045
  args: [{
@@ -1547,7 +1548,7 @@ class DropdownComponent extends BaseAngular {
1547
1548
  }
1548
1549
  }
1549
1550
  DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1550
- 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.noTabIndex ? null : 0\"\n [class]=\"model.getControlClass()\" [attr.disabled]=\"model.isDisabledAttr ? true : null\" (blur)=\"blur($event)\"\n (keydown)=\"keyhandler($event)\" [attr.id]=\"model.inputId\" [attr.role]=\"dropdownModel.ariaQuestionRole\"\n [attr.aria-required]=\"dropdownModel.ariaQuestionRequired\"\n [attr.aria-invalid]=\"dropdownModel.ariaQuestionInvalid\"\n [attr.aria-errormessage]=\"dropdownModel.ariaQuestionErrorMessage\"\n [attr.aria-expanded]=\"dropdownModel.ariaQuestionExpanded\" [attr.aria-label]=\"dropdownModel.ariaQuestionLabel\"\n [attr.aria-labelledby]=\"dropdownModel.ariaQuestionLabelledby\"\n [attr.aria-describedby]=\"dropdownModel.ariaQuestionDescribedby\"\n [attr.aria-controls]=\"dropdownModel.ariaQuestionControls\"\n [attr.aria-activedescendant]=\"dropdownModel.ariaQuestionActivedescendant\">\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\n [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 *ngIf=\"dropdownModel.needRenderInput\" type=\"text\" autocomplete=\"off\" [(ngModel)]=\"dropdownModel.inputStringRendered\"\n [class]=\"model.cssClasses.filterStringInput\" [attr.id]=\"model.getInputId()\"\n [attr.inputmode]=\"dropdownModel.inputMode\" [attr.tabindex]=\"dropdownModel.noTabIndex ? null : -1\"\n [attr.disabled]=\"model.isDisabledAttr ? true : null\" [attr.role]=\"dropdownModel.ariaInputRole\"\n [attr.aria-required]=\"dropdownModel.ariaInputRequired\"\n [attr.aria-invalid]=\"dropdownModel.ariaInputInvalid\"\n [attr.aria-errormessage]=\"dropdownModel.ariaInputErrorMessage\"\n [attr.aria-expanded]=\"dropdownModel.ariaInputExpanded\"\n [attr.aria-controls]=\"dropdownModel.ariaInputControls\" [attr.aria-label]=\"dropdownModel.ariaInputLabel\"\n [attr.aria-labelledby]=\"dropdownModel.ariaInputLabelledby\"\n [attr.aria-describedby]=\"dropdownModel.ariaInputDescribedby\"\n [attr.aria-activedescendant]=\"dropdownModel.ariaInputActivedescendant\"\n [attr.placeholder]=\"dropdownModel.placeholderRendered\"\n [attr.readonly]=\"dropdownModel.filterReadOnly ? true : null\" (change)=\"inputChange($event)\"\n (blur)=\"blur($event)\" (focus)=\"focus($event)\" />\n </div>\n <sv-ng-action-bar [model]=\"dropdownModel.editorButtons\"></sv-ng-action-bar>\n </div>\n <sv-ng-popup *ngIf=\"!model.isInputReadOnly\" [popupModel]=\"dropdownModel.popupModel\"></sv-ng-popup>\n <div *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\"\n [attr.tabindex]=\"model.isDisabledAttr ? null : 0\" [attr.disabled]=\"model.isDisabledAttr ? true : null\"\n [attr.role]=\"dropdownModel?.ariaQuestionRole\" [attr.aria-label]=\"dropdownModel?.ariaQuestionLabel\"\n [attr.aria-labelledby]=\"dropdownModel?.ariaQuestionLabelledby\"\n [attr.aria-describedby]=\"dropdownModel?.ariaQuestionDescribedby\" [attr.aria-expanded]=\"false\"\n [attr.aria-readonly]=\"true\" [attr.aria-disabled]=\"true\">\n <div [class]=\"model.cssClasses.controlValue\">\n <sv-ng-string *ngIf=\"model.locReadOnlyText\" [model]=\"model.locReadOnlyText\"></sv-ng-string>\n </div>\n <sv-ng-action-bar [model]=\"dropdownModel.editorButtons\"></sv-ng-action-bar>\n </div>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], 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"] }] });
1551
+ 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.noTabIndex ? null : 0\"\n [class]=\"model.getControlClass()\" [attr.disabled]=\"model.isDisabledAttr ? true : null\" (blur)=\"blur($event)\"\n (keydown)=\"keyhandler($event)\" [attr.id]=\"model.inputId\" [attr.role]=\"dropdownModel.ariaQuestionRole\"\n [attr.aria-required]=\"dropdownModel.ariaQuestionRequired\"\n [attr.aria-invalid]=\"dropdownModel.ariaQuestionInvalid\"\n [attr.aria-errormessage]=\"dropdownModel.ariaQuestionErrorMessage\"\n [attr.aria-expanded]=\"dropdownModel.ariaQuestionExpanded\" [attr.aria-label]=\"dropdownModel.ariaQuestionLabel\"\n [attr.aria-labelledby]=\"dropdownModel.ariaQuestionLabelledby\"\n [attr.aria-describedby]=\"dropdownModel.ariaQuestionDescribedby\"\n [attr.aria-controls]=\"dropdownModel.ariaQuestionControls\"\n [attr.aria-activedescendant]=\"dropdownModel.ariaQuestionActivedescendant\">\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\n [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 *ngIf=\"dropdownModel.needRenderInput\" type=\"text\" autocomplete=\"off\" [(ngModel)]=\"dropdownModel.inputStringRendered\"\n [class]=\"model.cssClasses.filterStringInput\" [attr.id]=\"model.getInputId()\"\n [attr.inputmode]=\"dropdownModel.inputMode\" [attr.tabindex]=\"dropdownModel.noTabIndex ? null : -1\"\n [attr.disabled]=\"model.isDisabledAttr ? true : null\" [attr.role]=\"dropdownModel.ariaInputRole\"\n [attr.aria-required]=\"dropdownModel.ariaInputRequired\"\n [attr.aria-invalid]=\"dropdownModel.ariaInputInvalid\"\n [attr.aria-errormessage]=\"dropdownModel.ariaInputErrorMessage\"\n [attr.aria-expanded]=\"dropdownModel.ariaInputExpanded\"\n [attr.aria-controls]=\"dropdownModel.ariaInputControls\" [attr.aria-label]=\"dropdownModel.ariaInputLabel\"\n [attr.aria-labelledby]=\"dropdownModel.ariaInputLabelledby\"\n [attr.aria-describedby]=\"dropdownModel.ariaInputDescribedby\"\n [attr.aria-activedescendant]=\"dropdownModel.ariaInputActivedescendant\"\n [attr.placeholder]=\"dropdownModel.placeholderRendered\"\n [attr.readonly]=\"dropdownModel.filterReadOnly ? true : null\" (change)=\"inputChange($event)\"\n (blur)=\"blur($event)\" (focus)=\"focus($event)\" />\n </div>\n <sv-ng-action-bar [model]=\"dropdownModel.editorButtons\"></sv-ng-action-bar>\n </div>\n <sv-ng-popup *ngIf=\"!model.isInputReadOnly\" [popupModel]=\"dropdownModel.popupModel\"></sv-ng-popup>\n <div *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\"\n [attr.tabindex]=\"model.isDisabledAttr ? null : 0\" [attr.disabled]=\"model.isDisabledAttr ? true : null\"\n [attr.role]=\"dropdownModel?.ariaQuestionRole\" [attr.aria-label]=\"dropdownModel?.ariaQuestionLabel\"\n [attr.aria-labelledby]=\"dropdownModel?.ariaQuestionLabelledby\"\n [attr.aria-describedby]=\"dropdownModel?.ariaQuestionDescribedby\" [attr.aria-expanded]=\"false\"\n [attr.aria-readonly]=\"true\" [attr.aria-disabled]=\"true\">\n <div [class]=\"model.cssClasses.controlValue\">\n <sv-ng-string *ngIf=\"model.locReadOnlyText\" [model]=\"model.locReadOnlyText\"></sv-ng-string>\n </div>\n <sv-ng-action-bar [model]=\"dropdownModel.editorButtons\"></sv-ng-action-bar>\n </div>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
1551
1552
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DropdownComponent, decorators: [{
1552
1553
  type: Component,
1553
1554
  args: [{
@@ -1567,7 +1568,7 @@ class TagboxFilterComponent extends BaseAngular {
1567
1568
  }
1568
1569
  }
1569
1570
  TagboxFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TagboxFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1570
- TagboxFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxFilterComponent, selector: "sv-tagbox-filter", inputs: { model: "model", question: "question" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div [class]=\"question.cssClasses.hint\">\n <div *ngIf=\"model.showHintPrefix\" [class]=\"question.cssClasses.hintPrefix\">\n <span>{{ model.hintStringPrefix }}</span>\n </div>\n <div [class]=\"question.cssClasses.hintSuffixWrapper\">\n <div *ngIf=\"model.showHintString\" [class]=\"question.cssClasses.hintSuffix\">\n <span style=\"visibility: hidden\">{{ model.inputStringRendered }}</span>\n <span>{{ model.hintStringSuffix }}</span>\n </div>\n <input type=\"text\" autocomplete=\"off\" [(ngModel)]=\"model.inputStringRendered\" [attr.id]=\"question.getInputId()\"\n [class]=\"question.cssClasses.filterStringInput\" [attr.inputmode]=\"model.inputMode\"\n [attr.readonly]=\"model.filterReadOnly ? true : null\" [attr.disabled]=\"question.isDisabledAttr ? true : null\"\n [attr.size]=\"!model.inputStringRendered ? 1 : null\" [attr.role]=\"model.ariaInputRole\"\n [attr.aria-required]=\"model.ariaInputRequired\" [attr.aria-invalid]=\"model.ariaInputInvalid\"\n [attr.aria-errormessage]=\"model.ariaInputErrorMessage\" [attr.aria-expanded]=\"model.ariaInputExpanded\"\n [attr.aria-label]=\"model.ariaInputLabel\" [attr.aria-labelledby]=\"model.ariaInputLabelledby\"\n [attr.aria-describedby]=\"model.ariaInputDescribedby\" [attr.aria-controls]=\"model.ariaInputControls\"\n [attr.aria-activedescendant]=\"model.ariaInputActivedescendant\"\n [attr.placeholder]=\"model.filterStringPlaceholder\" (keydown)=\"model.inputKeyHandler($event)\"\n (blur)=\"question.onBlur($event)\" (focus)=\"question.onFocus($event)\" />\n </div>\n </div>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
1571
+ TagboxFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxFilterComponent, selector: "sv-tagbox-filter", inputs: { model: "model", question: "question" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div [class]=\"question.cssClasses.hint\">\n <div *ngIf=\"model.showHintPrefix\" [class]=\"question.cssClasses.hintPrefix\">\n <span>{{ model.hintStringPrefix }}</span>\n </div>\n <div [class]=\"question.cssClasses.hintSuffixWrapper\">\n <div *ngIf=\"model.showHintString\" [class]=\"question.cssClasses.hintSuffix\">\n <span style=\"visibility: hidden\">{{ model.inputStringRendered }}</span>\n <span>{{ model.hintStringSuffix }}</span>\n </div>\n <input type=\"text\" autocomplete=\"off\" [(ngModel)]=\"model.inputStringRendered\" [attr.id]=\"question.getInputId()\"\n [class]=\"question.cssClasses.filterStringInput\" [attr.inputmode]=\"model.inputMode\"\n [attr.readonly]=\"model.filterReadOnly ? true : null\" [attr.disabled]=\"question.isDisabledAttr ? true : null\"\n [attr.size]=\"!model.inputStringRendered ? 1 : null\" [attr.role]=\"model.ariaInputRole\"\n [attr.aria-required]=\"model.ariaInputRequired\" [attr.aria-invalid]=\"model.ariaInputInvalid\"\n [attr.aria-errormessage]=\"model.ariaInputErrorMessage\" [attr.aria-expanded]=\"model.ariaInputExpanded\"\n [attr.aria-label]=\"model.ariaInputLabel\" [attr.aria-labelledby]=\"model.ariaInputLabelledby\"\n [attr.aria-describedby]=\"model.ariaInputDescribedby\" [attr.aria-controls]=\"model.ariaInputControls\"\n [attr.aria-activedescendant]=\"model.ariaInputActivedescendant\"\n [attr.placeholder]=\"model.filterStringPlaceholder\" (keydown)=\"model.inputKeyHandler($event)\"\n (blur)=\"question.onBlur($event)\" (focus)=\"question.onFocus($event)\" />\n </div>\n </div>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
1571
1572
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TagboxFilterComponent, decorators: [{
1572
1573
  type: Component,
1573
1574
  args: [{
@@ -1670,7 +1671,7 @@ class DropdownOptionItemComponent extends BaseAngular {
1670
1671
  }
1671
1672
  }
1672
1673
  DropdownOptionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DropdownOptionItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1673
- DropdownOptionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DropdownOptionItemComponent, selector: "sv-ng-dropdown-option-item, '[sv-ng-dropdown-option-item]'", inputs: { item: "item" }, usesInheritance: true, ngImport: i0, template: '<ng-template #template><option [value]="item.value" [disabled]="!item.isEnabled">{{ item.text }}</option><ng-template>', isInline: true, directives: [{ type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
1674
+ DropdownOptionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DropdownOptionItemComponent, selector: "sv-ng-dropdown-option-item, '[sv-ng-dropdown-option-item]'", inputs: { item: "item" }, usesInheritance: true, ngImport: i0, template: '<ng-template #template><option [value]="item.value" [disabled]="!item.isEnabled">{{ item.text }}</option><ng-template>', isInline: true, directives: [{ type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
1674
1675
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DropdownOptionItemComponent, decorators: [{
1675
1676
  type: Component,
1676
1677
  args: [{
@@ -1726,7 +1727,7 @@ class DropdownSelectComponent {
1726
1727
  }
1727
1728
  }
1728
1729
  DropdownSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DropdownSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1729
- DropdownSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DropdownSelectComponent, selector: "sv-ng-dropdown-select-question", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.renderCssRoot\">\n <div [class]=\"model.cssClasses.selectWrapper\">\n <select *ngIf=\"!model.isReadOnly\" [attr.id]=\"model.inputId\" [(ngModel)]=\"editableValue\"\n [disabled]=\"model.isInputReadOnly\" (click)=\"click($event)\" (keyup)=\"keyup($event)\"\n [class]=\"model.getControlClass()\" [attr.autocomplete]=\"model.autocomplete\" [required]=\"model.isRequired\"\n [attr.aria-required]=\"model.a11y_input_ariaRequired\" [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\" [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\">\n <option *ngIf=\"model.allowClear\" value=\"\">{{ model.placeholder }}</option>\n <ng-template *ngFor=\"let item of model.visibleChoices\"\n [component]=\"{ name: 'sv-dropdown-option-item', data: { item } }\"></ng-template>\n </select>\n <div *ngIf=\"model.isReadOnly\" disabled [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">{{\n model.readOnlyText }}</div>\n <div *ngIf=\"model.cssClasses.chevronButtonIconId\" [class]=\"model.cssClasses.chevronButton\" aria-hidden=\"true\">\n <svg [iconName]=\"model.cssClasses.chevronButtonIconId\" [partCss]=\"model.cssClasses.chevronButtonSvg\"\n [size]=\"'auto'\" sv-ng-svg-icon></svg>\n </div>\n </div>\n <div *ngIf=\"model.isShowingChoiceComment\" [class]=\"model.getCommentAreaCss(true)\"\n [style.display]=\"model.isFlowLayout ? 'inline': '' \" [question]=\"model\" [item]=\"model.selectedItem\" sv-ng-comment-choice></div>\n</div>", components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: SurveyCommentChoiceComponent, selector: "sv-ng-comment-choice, '[sv-ng-comment-choice]'", inputs: ["question", "item"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
1730
+ DropdownSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DropdownSelectComponent, selector: "sv-ng-dropdown-select-question", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.renderCssRoot\">\n <div [class]=\"model.cssClasses.selectWrapper\">\n <select *ngIf=\"!model.isReadOnly\" [attr.id]=\"model.inputId\" [(ngModel)]=\"editableValue\"\n [disabled]=\"model.isInputReadOnly\" (click)=\"click($event)\" (keyup)=\"keyup($event)\"\n [class]=\"model.getControlClass()\" [attr.autocomplete]=\"model.autocomplete\" [required]=\"model.isRequired\"\n [attr.aria-required]=\"model.a11y_input_ariaRequired\" [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\" [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\">\n <option *ngIf=\"model.allowClear\" value=\"\">{{ model.placeholder }}</option>\n <ng-template *ngFor=\"let item of model.visibleChoices\"\n [component]=\"{ name: 'sv-dropdown-option-item', data: { item } }\"></ng-template>\n </select>\n <div *ngIf=\"model.isReadOnly\" disabled [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">{{\n model.readOnlyText }}</div>\n <div *ngIf=\"model.cssClasses.chevronButtonIconId\" [class]=\"model.cssClasses.chevronButton\" aria-hidden=\"true\">\n <svg [iconName]=\"model.cssClasses.chevronButtonIconId\" [partCss]=\"model.cssClasses.chevronButtonSvg\"\n [size]=\"'auto'\" sv-ng-svg-icon></svg>\n </div>\n </div>\n <div *ngIf=\"model.isShowingChoiceComment\" [class]=\"model.getCommentAreaCss(true)\"\n [style.display]=\"model.isFlowLayout ? 'inline': '' \" [question]=\"model\" [item]=\"model.selectedItem\" sv-ng-comment-choice></div>\n</div>", components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: SurveyCommentChoiceComponent, selector: "sv-ng-comment-choice, '[sv-ng-comment-choice]'", inputs: ["question", "item"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
1730
1731
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DropdownSelectComponent, decorators: [{
1731
1732
  type: Component,
1732
1733
  args: [{
@@ -1829,7 +1830,7 @@ class TextQuestionComponent extends QuestionAngular {
1829
1830
  }
1830
1831
  }
1831
1832
  TextQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TextQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1832
- TextQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TextQuestionComponent, selector: "sv-ng-text-question", viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: " <ng-container [ngTemplateOutlet]=\"input\" *ngIf=\"!model.dataListId && !model.isReadOnlyRenderDiv()\"></ng-container>\n <div *ngIf=\"model.dataListId && !model.isReadOnlyRenderDiv()\">\n <ng-container [ngTemplateOutlet]=\"input\"></ng-container>\n <datalist [id]=\"model.dataListId\">\n <option *ngFor=\"let dataListItem of model.dataList\" [value]=\"dataListItem\"></option>\n </datalist>\n </div>\n <div *ngIf=\"model.isReadOnlyRenderDiv()\" #contentElement>{{ value }}</div>\n <ng-template #input>\n <input #inputElement [style]=\"model.inputStyle\" [class]=\"model.getControlClass()\" [attr.list]=\"model.dataListId\" (click)=\"model.readOnlyBlocker($event)\" (pointerdown)=\"model.readOnlyBlocker($event)\" \n (change)=\"model.onChange($event)\" [value]=\"value\" [disabled]=\"model.isDisabledAttr\" [type]=\"model.inputType\" [id]=\"model.inputId\" [attr.placeholder]=\"model.renderedPlaceholder\"\n (keyup)=\"model.onKeyUp($event)\" (keydown)=\"model.onKeyDown($event)\" (blur)=\"blur($event)\" (focus)=\"model.onFocus($event)\" (compositionupdate)=\"model.onCompositionUpdate($event)\" \n [attr.size] = \"model.renderedInputSize\" [attr.maxlength]= \"model.getMaxLength()\" [attr.min]=\"model.renderedMin\" [readonly]=\"model.isReadOnlyAttr\"\n [attr.max]=\"model.renderedMax\" [attr.step]=\"model.renderedStep\" [attr.max]=\"model.renderedMax\" [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n [attr.aria-label]=\"model.a11y_input_ariaLabel\" [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\" [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"[attr.aria-invalid]=\"model.a11y_input_ariaInvalid\" [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\" [attr.autocomplete]=\"model.autocomplete\" #contentElement/>\n <sv-ng-character-counter *ngIf=\"model.getMaxLength()\" \n [counter]=\"model.characterCounter\"\n [remainingCharacterCounter]=\"model.cssClasses.remainingCharacterCounter\">\n </sv-ng-character-counter>\n </ng-template>", styles: [""], components: [{ type: CharacterCounterComponent, selector: "sv-ng-character-counter", inputs: ["counter", "remainingCharacterCounter"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
1833
+ TextQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TextQuestionComponent, selector: "sv-ng-text-question", viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: " <ng-container [ngTemplateOutlet]=\"input\" *ngIf=\"!model.dataListId && !model.isReadOnlyRenderDiv()\"></ng-container>\n <div *ngIf=\"model.dataListId && !model.isReadOnlyRenderDiv()\">\n <ng-container [ngTemplateOutlet]=\"input\"></ng-container>\n <datalist [id]=\"model.dataListId\">\n <option *ngFor=\"let dataListItem of model.dataList\" [value]=\"dataListItem\"></option>\n </datalist>\n </div>\n <div *ngIf=\"model.isReadOnlyRenderDiv()\" #contentElement>{{ value }}</div>\n <ng-template #input>\n <input #inputElement [style]=\"model.inputStyle\" [class]=\"model.getControlClass()\" [attr.list]=\"model.dataListId\" (click)=\"model.readOnlyBlocker($event)\" (pointerdown)=\"model.readOnlyBlocker($event)\" \n (change)=\"model.onChange($event)\" [value]=\"value\" [disabled]=\"model.isDisabledAttr\" [type]=\"model.inputType\" [id]=\"model.inputId\" [attr.placeholder]=\"model.renderedPlaceholder\"\n (keyup)=\"model.onKeyUp($event)\" (keydown)=\"model.onKeyDown($event)\" (blur)=\"blur($event)\" (focus)=\"model.onFocus($event)\" (compositionupdate)=\"model.onCompositionUpdate($event)\" \n [attr.size] = \"model.renderedInputSize\" [attr.maxlength]= \"model.getMaxLength()\" [attr.min]=\"model.renderedMin\" [readonly]=\"model.isReadOnlyAttr\"\n [attr.max]=\"model.renderedMax\" [attr.step]=\"model.renderedStep\" [attr.max]=\"model.renderedMax\" [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n [attr.aria-label]=\"model.a11y_input_ariaLabel\" [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\" [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"[attr.aria-invalid]=\"model.a11y_input_ariaInvalid\" [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\" [attr.autocomplete]=\"model.autocomplete\" #contentElement/>\n <sv-ng-character-counter *ngIf=\"model.getMaxLength()\" \n [counter]=\"model.characterCounter\"\n [remainingCharacterCounter]=\"model.cssClasses.remainingCharacterCounter\">\n </sv-ng-character-counter>\n </ng-template>", styles: [""], components: [{ type: CharacterCounterComponent, selector: "sv-ng-character-counter", inputs: ["counter", "remainingCharacterCounter"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
1833
1834
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TextQuestionComponent, decorators: [{
1834
1835
  type: Component,
1835
1836
  args: [{
@@ -1942,7 +1943,7 @@ class RadiogroupItemComponent {
1942
1943
  }
1943
1944
  }
1944
1945
  RadiogroupItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RadiogroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1945
- RadiogroupItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RadiogroupItemComponent, selector: "sv-ng-radiogroup-item, '[sv-ng-radiogroup-item]'", inputs: { question: "question", model: "model", ariaLabel: "ariaLabel" }, ngImport: i0, template: "<input type=\"radio\" [name]=\"question.questionName\" [attr.name]=\"question.questionName\" [id]=\"question.getItemId(model)\" [attr.aria-errormessage]=\"question.ariaErrormessage\" [class]=\"question.cssClasses.itemControl\"\n [disabled]=\"!question.getItemEnabled(model)\" [readonly]=\"question.isReadOnlyAttr\" [(ngModel)]=\"renderedValue\" [attr.value]=\"model.value\" [value]=\"model.value\" [attr.aria-label]=\"ariaLabel\"\n/>\n<ng-content></ng-content>", styles: [""], directives: [{ type: i2$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { 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"] }] });
1946
+ RadiogroupItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RadiogroupItemComponent, selector: "sv-ng-radiogroup-item, '[sv-ng-radiogroup-item]'", inputs: { question: "question", model: "model", ariaLabel: "ariaLabel" }, ngImport: i0, template: "<input type=\"radio\" [name]=\"question.questionName\" [attr.name]=\"question.questionName\" [id]=\"question.getItemId(model)\" [attr.aria-errormessage]=\"question.ariaErrormessage\" [class]=\"question.cssClasses.itemControl\"\n [disabled]=\"!question.getItemEnabled(model)\" [readonly]=\"question.isReadOnlyAttr\" [(ngModel)]=\"renderedValue\" [attr.value]=\"model.value\" [value]=\"model.value\" [attr.aria-label]=\"ariaLabel\"\n/>\n<ng-content></ng-content>", styles: [""], directives: [{ type: i4.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
1946
1947
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RadiogroupItemComponent, decorators: [{
1947
1948
  type: Component,
1948
1949
  args: [{
@@ -2050,7 +2051,7 @@ class BooleanQuestionComponent extends QuestionAngular {
2050
2051
  }
2051
2052
  }
2052
2053
  BooleanQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BooleanQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
2053
- BooleanQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanQuestionComponent, selector: "sv-ng-boolean-question", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.root\" (keydown)=\"model.onKeyDownCore($event)\" #contentElement>\n <label [class]=\"model.getItemCss()\">\n <input\n type=\"checkbox\"\n [attr.name]=\"model.name\" [attr.id]=\"model.inputId\" \n [attr.role]=\"model.a11y_input_ariaRole\"\n [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\"\n [class]=\"model.cssClasses.control\" [disabled]=\"model.isDisabledAttr\" [readonly]=\"model.isReadOnlyAttr\" [indeterminate]=\"model.isIndeterminate\" [value]=\"model.booleanValue\" [(ngModel)]=\"model.booleanValue\" />\n <div [class]=\"model.cssClasses.sliderGhost\" (click)=\"model.onLabelClick($event, model.swapOrder)\">\n <span [class]=\"model.getLabelCss(model.swapOrder)\" [model]=\"model.locLabelLeft\" sv-ng-string></span>\n </div>\n <div [class]=\"model.cssClasses.switch\" (click)=\"model.onSwitchClickModel($event)\">\n <span [class]=\"model.cssClasses.slider\">\n <span *ngIf=\"model.cssClasses.sliderText && model.isDeterminated\" [class]=\"model.cssClasses.sliderText\" [model]=\"model.getCheckedLabel()\" sv-ng-string></span>\n </span>\n </div>\n <div [class]=\"model.cssClasses.sliderGhost\" (click)=\"model.onLabelClick($event, !model.swapOrder)\">\n <span [class]=\"model.getLabelCss(!model.swapOrder)\" [model]=\"model.locLabelRight\" sv-ng-string></span>\n </div>\n </label>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
2054
+ BooleanQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanQuestionComponent, selector: "sv-ng-boolean-question", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.root\" (keydown)=\"model.onKeyDownCore($event)\" #contentElement>\n <label [class]=\"model.getItemCss()\">\n <input\n type=\"checkbox\"\n [attr.name]=\"model.name\" [attr.id]=\"model.inputId\" \n [attr.role]=\"model.a11y_input_ariaRole\"\n [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\"\n [class]=\"model.cssClasses.control\" [disabled]=\"model.isDisabledAttr\" [readonly]=\"model.isReadOnlyAttr\" [indeterminate]=\"model.isIndeterminate\" [value]=\"model.booleanValue\" [(ngModel)]=\"model.booleanValue\" />\n <div [class]=\"model.cssClasses.sliderGhost\" (click)=\"model.onLabelClick($event, model.swapOrder)\">\n <span [class]=\"model.getLabelCss(model.swapOrder)\" [model]=\"model.locLabelLeft\" sv-ng-string></span>\n </div>\n <div [class]=\"model.cssClasses.switch\" (click)=\"model.onSwitchClickModel($event)\">\n <span [class]=\"model.cssClasses.slider\">\n <span *ngIf=\"model.cssClasses.sliderText && model.isDeterminated\" [class]=\"model.cssClasses.sliderText\" [model]=\"model.getCheckedLabel()\" sv-ng-string></span>\n </span>\n </div>\n <div [class]=\"model.cssClasses.sliderGhost\" (click)=\"model.onLabelClick($event, !model.swapOrder)\">\n <span [class]=\"model.getLabelCss(!model.swapOrder)\" [model]=\"model.locLabelRight\" sv-ng-string></span>\n </div>\n </label>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
2054
2055
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BooleanQuestionComponent, decorators: [{
2055
2056
  type: Component,
2056
2057
  args: [{
@@ -2212,7 +2213,7 @@ class ButtonGroupItemComponent extends BaseAngular {
2212
2213
  }
2213
2214
  }
2214
2215
  ButtonGroupItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ButtonGroupItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
2215
- ButtonGroupItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ButtonGroupItemComponent, selector: "sv-button-group-item", inputs: { item: "item", question: "question", index: "index" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #template>\n <label [class]=\"model.css.label\" [attr.title]=\"model.caption.renderedHtml\">\n <input type=\"radio\"\n [attr.name]=\"model.name\" [attr.id]=\"model.id\" [attr.aria-required]=\"model.isRequired\" [attr.aria-label]=\"model.caption.renderedHtml\" [attr.aria-invalid]=\"model.hasErrors\" [attr.aria-errormessage]=\"model.describedBy\" [disabled]=\"model.readOnly\" [class]=\"model.css.control\" [(ngModel)]=\"question.renderedValue\" [attr.value]=\"model.value\" [value]=\"model.value\"/>\n <div [class]=\"model.css.decorator\">\n <svg *ngIf=\"model.iconName\" [iconName]=\"model.iconName\" [size]=\"model.iconSize\" [class]=\"model.css.icon\" sv-ng-svg-icon></svg>\n <span [class]=\"model.css.caption\" *ngIf=\"model.showCaption\" [attr.title]=\"model.caption.renderedHtml\" sv-ng-string [model]=\"model.caption\">\n </span>\n </div>\n </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { 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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
2216
+ ButtonGroupItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ButtonGroupItemComponent, selector: "sv-button-group-item", inputs: { item: "item", question: "question", index: "index" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #template>\n <label [class]=\"model.css.label\" [attr.title]=\"model.caption.renderedHtml\">\n <input type=\"radio\"\n [attr.name]=\"model.name\" [attr.id]=\"model.id\" [attr.aria-required]=\"model.isRequired\" [attr.aria-label]=\"model.caption.renderedHtml\" [attr.aria-invalid]=\"model.hasErrors\" [attr.aria-errormessage]=\"model.describedBy\" [disabled]=\"model.readOnly\" [class]=\"model.css.control\" [(ngModel)]=\"question.renderedValue\" [attr.value]=\"model.value\" [value]=\"model.value\"/>\n <div [class]=\"model.css.decorator\">\n <svg *ngIf=\"model.iconName\" [iconName]=\"model.iconName\" [size]=\"model.iconSize\" [class]=\"model.css.icon\" sv-ng-svg-icon></svg>\n <span [class]=\"model.css.caption\" *ngIf=\"model.showCaption\" [attr.title]=\"model.caption.renderedHtml\" sv-ng-string [model]=\"model.caption\">\n </span>\n </div>\n </label>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i4.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
2216
2217
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ButtonGroupItemComponent, decorators: [{
2217
2218
  type: Component,
2218
2219
  args: [{
@@ -2573,7 +2574,7 @@ class ListComponent extends BaseAngular {
2573
2574
  }
2574
2575
  }
2575
2576
  ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
2576
- ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ListComponent, selector: "sv-ng-list, '[sv-ng-list]'", inputs: { model: "model" }, viewQueries: [{ propertyName: "listContainerElement", first: true, predicate: ["listContainerElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div [class]=\"model.cssClasses.root\" #listContainerElement>\n <div *ngIf=\"model.showFilter\" [class]=\"model.cssClasses.filter\">\n <div [class]=\"model.cssClasses.filterIcon\">\n <svg [iconName]=\"'icon-search'\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n </div>\n <input type=\"text\" [class]=\"model.cssClasses.filterInput\" [(ngModel)]=\"model.filterString\"\n [attr.aria-label]=\"model.filterStringPlaceholder || ''\"\n [attr.placeholder]=\"model.filterStringPlaceholder || ''\" \n (keyup)=\"onGoToItems($event)\" />\n <button *ngIf=\"model.showSearchClearButton && !!model.filterString\" (click)=\"model.onClickSearchClearButton($event)\" [class]=\"model.cssClasses.searchClearButtonIcon\">\n <svg [iconName]=\"'icon-searchclear'\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n </button>\n </div>\n <div [class]=\"model.cssClasses.emptyContainer\" [visible]=\"model.isEmpty\">\n <div [class]=\"model.cssClasses.emptyText\" [attr.aria-label]=\"model.emptyMessage || ''\">{{ model.emptyMessage }}</div>\n </div>\n <ul *ngIf=\"model.renderElements\" [class]=\"model.getListClass()\" [attr.role]=\"model.listRole\" [attr.aria-label]=\"model.a11ya11y_input_ariaLabel\" [attr.id]=\"model.elementId\" [visible]=\"!model.isEmpty\" (mousedown)=\"onMouseDown($event)\" (keydown)=\"onKeyDown($event)\" (mousemove)=\"onMouseMove($event)\">\n <sv-ng-list-item *ngFor=\"let item of model.renderedActions; trackBy: trackItemBy\" [listModel]=\"model\" [model]=\"item\"></sv-ng-list-item>\n <!--ko foreach: model.renderedActions -->\n <!-- ko component: { name: 'sv-list-item', params: { item: $data, model: $parent.model } } -->\n <!-- /ko -->\n <!-- /ko -->\n </ul>\n </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: ListItemComponent, selector: "sv-ng-list-item, '[sv-ng-list-item]'", inputs: ["element", "model", "listModel"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
2577
+ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ListComponent, selector: "sv-ng-list, '[sv-ng-list]'", inputs: { model: "model" }, viewQueries: [{ propertyName: "listContainerElement", first: true, predicate: ["listContainerElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div [class]=\"model.cssClasses.root\" #listContainerElement>\n <div *ngIf=\"model.showFilter\" [class]=\"model.cssClasses.filter\">\n <div [class]=\"model.cssClasses.filterIcon\">\n <svg [iconName]=\"'icon-search'\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n </div>\n <input type=\"text\" [class]=\"model.cssClasses.filterInput\" [(ngModel)]=\"model.filterString\"\n [attr.aria-label]=\"model.filterStringPlaceholder || ''\"\n [attr.placeholder]=\"model.filterStringPlaceholder || ''\" \n (keyup)=\"onGoToItems($event)\" />\n <button *ngIf=\"model.showSearchClearButton && !!model.filterString\" (click)=\"model.onClickSearchClearButton($event)\" [class]=\"model.cssClasses.searchClearButtonIcon\">\n <svg [iconName]=\"'icon-searchclear'\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n </button>\n </div>\n <div [class]=\"model.cssClasses.emptyContainer\" [visible]=\"model.isEmpty\">\n <div [class]=\"model.cssClasses.emptyText\" [attr.aria-label]=\"model.emptyMessage || ''\">{{ model.emptyMessage }}</div>\n </div>\n <ul *ngIf=\"model.renderElements\" [class]=\"model.getListClass()\" [attr.role]=\"model.listRole\" [attr.aria-label]=\"model.a11ya11y_input_ariaLabel\" [attr.id]=\"model.elementId\" [visible]=\"!model.isEmpty\" (mousedown)=\"onMouseDown($event)\" (keydown)=\"onKeyDown($event)\" (mousemove)=\"onMouseMove($event)\">\n <sv-ng-list-item *ngFor=\"let item of model.renderedActions; trackBy: trackItemBy\" [listModel]=\"model\" [model]=\"item\"></sv-ng-list-item>\n <!--ko foreach: model.renderedActions -->\n <!-- ko component: { name: 'sv-list-item', params: { item: $data, model: $parent.model } } -->\n <!-- /ko -->\n <!-- /ko -->\n </ul>\n </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: ListItemComponent, selector: "sv-ng-list-item, '[sv-ng-list-item]'", inputs: ["element", "model", "listModel"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
2577
2578
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ListComponent, decorators: [{
2578
2579
  type: Component,
2579
2580
  args: [{
@@ -2762,7 +2763,7 @@ RendererFactory.Instance.registerRenderer("rating", "dropdown", "rating-dropdown
2762
2763
  class BooleanCheckboxComponent {
2763
2764
  }
2764
2765
  BooleanCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BooleanCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2765
- BooleanCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanCheckboxComponent, selector: "sv-ng-boolean-checkbox-question", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.cssClasses.rootCheckbox\">\n <div [class]=\"model.getCheckboxItemCss()\">\n <label [class]=\"model.cssClasses.checkboxLabel\">\n <input\n type=\"checkbox\"\n [value]=\"model.booleanValue\" [class]=\"model.cssClasses.controlCheckbox\" \n [attr.name]=\"model.name\" [id]=\"model.inputId\"\n [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\"\n [(ngModel)]=\"model.booleanValue\" [value]=\"model.booleanValue\"\n [disabled]=\"model.isDisabledAttr\" [readonly]=\"model.isReadOnlyAttr\" [indeterminate]=\"model.isIndeterminate\"\n />\n <span [class]=\"model.cssClasses.checkboxMaterialDecorator\">\n <svg *ngIf=\"!!model.svgIcon\" [class]=\"model.cssClasses.checkboxItemDecorator\">\n <use [attr.xlink:href]=\"model.svgIcon\"></use>\n </svg>\n <span class=\"check\"></span>\n </span>\n <span *ngIf=\"model.isLabelRendered\" [class]=\"model.cssClasses.checkboxControlLabel\" [id]=\"model.labelRenderedAriaID\">\n <sv-ng-element-title-actions [element]=\"model\"></sv-ng-element-title-actions>\n </span>\n </label>\n <div *ngIf=\"model.canRenderLabelDescription\" [class]=\"model.cssDescription\" [attr.id]=\"model.ariaDescriptionId\" [model]=\"model.locDescription\" sv-ng-string></div>\n </div>\n</div>", components: [{ type: ElementTitleActionsComponent, selector: "sv-ng-element-title-actions", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
2766
+ BooleanCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanCheckboxComponent, selector: "sv-ng-boolean-checkbox-question", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.cssClasses.rootCheckbox\">\n <div [class]=\"model.getCheckboxItemCss()\">\n <label [class]=\"model.cssClasses.checkboxLabel\">\n <input\n type=\"checkbox\"\n [value]=\"model.booleanValue\" [class]=\"model.cssClasses.controlCheckbox\" \n [attr.name]=\"model.name\" [id]=\"model.inputId\"\n [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"\n [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\"\n [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\"\n [(ngModel)]=\"model.booleanValue\" [value]=\"model.booleanValue\"\n [disabled]=\"model.isDisabledAttr\" [readonly]=\"model.isReadOnlyAttr\" [indeterminate]=\"model.isIndeterminate\"\n />\n <span [class]=\"model.cssClasses.checkboxMaterialDecorator\">\n <svg *ngIf=\"!!model.svgIcon\" [class]=\"model.cssClasses.checkboxItemDecorator\">\n <use [attr.xlink:href]=\"model.svgIcon\"></use>\n </svg>\n <span class=\"check\"></span>\n </span>\n <span *ngIf=\"model.isLabelRendered\" [class]=\"model.cssClasses.checkboxControlLabel\" [id]=\"model.labelRenderedAriaID\">\n <sv-ng-element-title-actions [element]=\"model\"></sv-ng-element-title-actions>\n </span>\n </label>\n <div *ngIf=\"model.canRenderLabelDescription\" [class]=\"model.cssDescription\" [attr.id]=\"model.ariaDescriptionId\" [model]=\"model.locDescription\" sv-ng-string></div>\n </div>\n</div>", components: [{ type: ElementTitleActionsComponent, selector: "sv-ng-element-title-actions", inputs: ["element"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
2766
2767
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BooleanCheckboxComponent, decorators: [{
2767
2768
  type: Component,
2768
2769
  args: [{
@@ -2778,9 +2779,12 @@ RendererFactory.Instance.registerRenderer("boolean", "checkbox", "boolean-checkb
2778
2779
  class BooleanRadioItemComponent {
2779
2780
  constructor() {
2780
2781
  }
2782
+ change() {
2783
+ this.question.value = this.value;
2784
+ }
2781
2785
  }
2782
2786
  BooleanRadioItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BooleanRadioItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2783
- BooleanRadioItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanRadioItemComponent, selector: "sv-ng-boolean-radio-item", inputs: { question: "question", value: "value", locText: "locText" }, ngImport: i0, template: "<div role=\"presentation\" [class]=\"question.getRadioItemClass(question.cssClasses, value)\">\n <label [class]=\"question.cssClasses.radioLabel\">\n <input\n type=\"radio\"\n [attr.name]=\"question.name\" [attr.aria-errormessage]=\"question.ariaErrormessage\" [value]=\"value\" [(ngModel)]=\"question.booleanValue\"\n [disabled]=\"question.isDisabledAttr\" [readonly]=\"question.isReadOnlyAttr\" [class]=\"question.cssClasses.itemRadioControl || ''\"\n />\n <span *ngIf=\"question.cssClasses.materialRadioDecorator\" [class]=\"question.cssClasses.materialRadioDecorator\">\n <svg\n *ngIf=\"question.itemSvgIcon\"\n [class]=\"question.cssClasses.itemRadioDecorator\"\n >\n <use [attr.xlink:href]=\"question.itemSvgIcon\"></use>\n </svg>\n </span>\n <span [class]=\"question.cssClasses.radioControlLabel\" [model]=\"locText\" sv-ng-string>\n </span>\n </label>\n</div>\n", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { 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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
2787
+ BooleanRadioItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanRadioItemComponent, selector: "sv-ng-boolean-radio-item", inputs: { question: "question", value: "value", locText: "locText" }, ngImport: i0, template: "<div role=\"presentation\" [class]=\"question.getRadioItemClass(question.cssClasses, value)\">\n <label [class]=\"question.cssClasses.radioLabel\">\n <input\n type=\"radio\"\n [attr.name]=\"question.name\" [attr.aria-errormessage]=\"question.ariaErrormessage\" [value]=\"value\" [checked]=\"question.value == value\" (input)=\"change()\"\n [disabled]=\"question.isDisabledAttr\" [readonly]=\"question.isReadOnlyAttr\" [class]=\"question.cssClasses.itemRadioControl || ''\"\n />\n <span *ngIf=\"question.cssClasses.materialRadioDecorator\" [class]=\"question.cssClasses.materialRadioDecorator\">\n <svg\n *ngIf=\"question.itemSvgIcon\"\n [class]=\"question.cssClasses.itemRadioDecorator\"\n >\n <use [attr.xlink:href]=\"question.itemSvgIcon\"></use>\n </svg>\n </span>\n <span [class]=\"question.cssClasses.radioControlLabel\" [model]=\"locText\" sv-ng-string>\n </span>\n </label>\n</div>\n", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
2784
2788
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BooleanRadioItemComponent, decorators: [{
2785
2789
  type: Component,
2786
2790
  args: [{
@@ -2798,7 +2802,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
2798
2802
  class BooleanRadioComponent {
2799
2803
  }
2800
2804
  BooleanRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BooleanRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2801
- BooleanRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanRadioComponent, selector: "sv-ng-boolean-radio-question", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.cssClasses.rootRadio\">\n <fieldset role=\"presentation\" [class]=\"model.cssClasses.radioFieldset\">\n <sv-ng-boolean-radio-item *ngIf=\"model.swapOrder\" [value]=\"true\" [locText]=\"model.locLabelTrue\" [question]=\"model\" ></sv-ng-boolean-radio-item>\n <sv-ng-boolean-radio-item [value]=\"false\" [locText]=\"model.locLabelFalse\" [question]=\"model\" ></sv-ng-boolean-radio-item>\n <sv-ng-boolean-radio-item *ngIf=\"!model.swapOrder\" [value]=\"true\" [locText]=\"model.locLabelTrue\" [question]=\"model\" ></sv-ng-boolean-radio-item>\n </fieldset>\n</div>\n", components: [{ type: BooleanRadioItemComponent, selector: "sv-ng-boolean-radio-item", inputs: ["question", "value", "locText"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
2805
+ BooleanRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanRadioComponent, selector: "sv-ng-boolean-radio-question", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.cssClasses.rootRadio\">\n <fieldset role=\"presentation\" [class]=\"model.cssClasses.radioFieldset\">\n <sv-ng-boolean-radio-item *ngIf=\"model.swapOrder\" [value]=\"model.getValueTrue()\" [locText]=\"model.locLabelTrue\" [question]=\"model\" ></sv-ng-boolean-radio-item>\n <sv-ng-boolean-radio-item [value]=\"model.getValueFalse()\" [locText]=\"model.locLabelFalse\" [question]=\"model\" ></sv-ng-boolean-radio-item>\n <sv-ng-boolean-radio-item *ngIf=\"!model.swapOrder\" [value]=\"model.getValueTrue()\" [locText]=\"model.locLabelTrue\" [question]=\"model\" ></sv-ng-boolean-radio-item>\n </fieldset>\n</div>\n", components: [{ type: BooleanRadioItemComponent, selector: "sv-ng-boolean-radio-item", inputs: ["question", "value", "locText"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
2802
2806
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BooleanRadioComponent, decorators: [{
2803
2807
  type: Component,
2804
2808
  args: [{
@@ -3001,42 +3005,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
3001
3005
  }] } });
3002
3006
  AngularComponentFactory.Instance.registerComponent("sv-nav-btn", SurveyNavigationButton);
3003
3007
 
3004
- class FileItemComponent extends EmbeddedViewContentComponent {
3008
+ class FilePageComponent extends BaseAngular {
3009
+ getModel() {
3010
+ return this.page;
3011
+ }
3005
3012
  }
3006
- FileItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FileItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
3007
- FileItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FileItemComponent, selector: "sv-ng-file-item", inputs: { item: "item", question: "question" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <span [class]=\"question.cssClasses.previewItem\" (click)=\"question.doDownloadFileFromContainer($event)\">\n <div *ngIf=\"item.name && question.cssClasses.fileSign\" [class]=\"question.cssClasses.fileSign\">\n <a (click)=\"question.doDownloadFile($event, item)\" [attr.href]=\"item.content | safeUrl\"\n [attr.title]=\"item.name\" [attr.download]=\"item.name\" [style.width]=\"question.imageWidth\">{{\n item.name\n }}</a>\n </div>\n <div [class]=\"question.getImageWrapperCss(item)\">\n <img *ngIf=\"question.canPreviewImage(item)\" [attr.src]=\"item.content | safeUrl\"\n [style.height]=\"question.imageHeight\" [style.width]=\"question.imageWidth\" alt=\"File preview\" />\n <svg *ngIf=\"question.defaultImage(item)\" [iconName]=\"question.cssClasses.defaultImageIconId\"\n [partCss]=\"question.cssClasses.defaultImage\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n <div *ngIf=\"item.name && !question.isReadOnly\" [class]=\"question.getRemoveButtonCss()\"\n (click)=\"question.doRemoveFile(item, $event)\">\n <span [class]=\"question.cssClasses.removeFile\">{{ question.removeFileCaption }}</span>\n <svg *ngIf=\"question.cssClasses.removeFileSvgIconId\" [title]=\"question.removeFileCaption\"\n [partCss]=\"question.cssClasses.removeFileSvg\" [iconName]=\"question.cssClasses.removeFileSvgIconId\"\n [size]=\"'auto'\" sv-ng-svg-icon></svg>\n </div>\n </div>\n <div *ngIf=\"item.name && question.cssClasses.fileSignBottom\" [class]=\"question.cssClasses.fileSignBottom\">\n <a (click)=\"question.doDownloadFile($event, item)\" [attr.href]=\"item.content | safeUrl\"\n [attr.title]=\"item.name\" [attr.download]=\"item.name\" [style.width]=\"question.imageWidth\">{{\n item.name\n }}</a>\n </div>\n </span>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "safeUrl": SafeUrlPipe } });
3008
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FileItemComponent, decorators: [{
3013
+ FilePageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FilePageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
3014
+ FilePageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FilePageComponent, selector: "sv-ng-file-page", inputs: { page: "page", question: "question" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div [class]=\"page.css\" [attr.id]=\"page.id\">\n <ng-container *ngFor=\"let item of page.items\">\n <ng-template [component]=\"{ name: 'sv-file-item', data: { item, question } }\"></ng-template>\n </ng-container>\n </div>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
3015
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FilePageComponent, decorators: [{
3009
3016
  type: Component,
3010
3017
  args: [{
3011
- templateUrl: "./file-item.component.html",
3012
- selector: "sv-ng-file-item",
3018
+ templateUrl: "./file-page.component.html",
3019
+ selector: "sv-ng-file-page",
3013
3020
  styleUrls: ["../../hide-host.scss"]
3014
3021
  }]
3015
- }], propDecorators: { item: [{
3022
+ }], propDecorators: { page: [{
3016
3023
  type: Input
3017
3024
  }], question: [{
3018
3025
  type: Input
3019
3026
  }] } });
3020
3027
 
3021
- class FilePageComponent extends BaseAngular {
3022
- getModel() {
3023
- return this.page;
3024
- }
3028
+ class FileItemComponent extends EmbeddedViewContentComponent {
3025
3029
  }
3026
- FilePageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FilePageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
3027
- FilePageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FilePageComponent, selector: "sv-ng-file-page", inputs: { page: "page", question: "question" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div [class]=\"page.css\" [attr.id]=\"page.id\">\n <ng-container *ngFor=\"let item of page.items\">\n <sv-ng-file-item [item]=\"item\" [question]=\"question\"></sv-ng-file-item>\n </ng-container>\n </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: FileItemComponent, selector: "sv-ng-file-item", inputs: ["item", "question"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
3028
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FilePageComponent, decorators: [{
3030
+ FileItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FileItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
3031
+ FileItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FileItemComponent, selector: "sv-ng-file-item", inputs: { item: "item", question: "question" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <span [class]=\"question.cssClasses.previewItem\" (click)=\"question.doDownloadFileFromContainer($event)\">\n <div *ngIf=\"item.name && question.cssClasses.fileSign\" [class]=\"question.cssClasses.fileSign\">\n <a (click)=\"question.doDownloadFile($event, item)\" [attr.href]=\"item.content | safeUrl\"\n [attr.title]=\"item.name\" [attr.download]=\"item.name\" [style.width]=\"question.imageWidth\">{{\n item.name\n }}</a>\n </div>\n <div [class]=\"question.getImageWrapperCss(item)\">\n <img *ngIf=\"question.canPreviewImage(item)\" [attr.src]=\"item.content | safeUrl\"\n [style.height]=\"question.imageHeight\" [style.width]=\"question.imageWidth\" alt=\"File preview\" />\n <svg *ngIf=\"question.defaultImage(item)\" [iconName]=\"question.cssClasses.defaultImageIconId\"\n [partCss]=\"question.cssClasses.defaultImage\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n <div *ngIf=\"item.name && !question.isReadOnly\" [class]=\"question.getRemoveButtonCss()\"\n (click)=\"question.doRemoveFile(item, $event)\">\n <span [class]=\"question.cssClasses.removeFile\">{{ question.removeFileCaption }}</span>\n <svg *ngIf=\"question.cssClasses.removeFileSvgIconId\" [title]=\"question.removeFileCaption\"\n [partCss]=\"question.cssClasses.removeFileSvg\" [iconName]=\"question.cssClasses.removeFileSvgIconId\"\n [size]=\"'auto'\" sv-ng-svg-icon></svg>\n </div>\n </div>\n <div *ngIf=\"item.name && question.cssClasses.fileSignBottom\" [class]=\"question.cssClasses.fileSignBottom\">\n <a (click)=\"question.doDownloadFile($event, item)\" [attr.href]=\"item.content | safeUrl\"\n [attr.title]=\"item.name\" [attr.download]=\"item.name\" [style.width]=\"question.imageWidth\">{{\n item.name\n }}</a>\n </div>\n </span>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "safeUrl": SafeUrlPipe } });
3032
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FileItemComponent, decorators: [{
3029
3033
  type: Component,
3030
3034
  args: [{
3031
- templateUrl: "./file-page.component.html",
3032
- selector: "sv-ng-file-page",
3035
+ templateUrl: "./file-item.component.html",
3036
+ selector: "sv-ng-file-item",
3033
3037
  styleUrls: ["../../hide-host.scss"]
3034
3038
  }]
3035
- }], propDecorators: { page: [{
3039
+ }], propDecorators: { item: [{
3036
3040
  type: Input
3037
3041
  }], question: [{
3038
3042
  type: Input
3039
3043
  }] } });
3044
+ AngularComponentFactory.Instance.registerComponent("sv-file-item", FileItemComponent);
3040
3045
 
3041
3046
  class FilePreviewComponent extends EmbeddedViewContentComponent {
3042
3047
  constructor() {
@@ -4047,10 +4052,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
4047
4052
  AngularComponentFactory.Instance.registerComponent("sv-header-cell", HeaderMobileComponent);
4048
4053
 
4049
4054
  class HeaderComponent extends BaseAngular {
4055
+ constructor() {
4056
+ super(...arguments);
4057
+ this.shouldProcessResponsiveness = false;
4058
+ }
4050
4059
  getModel() {
4051
4060
  this.model.survey = this.survey;
4052
4061
  return this.model;
4053
4062
  }
4063
+ onModelChanged() {
4064
+ super.onModelChanged();
4065
+ this.shouldProcessResponsiveness = true;
4066
+ }
4067
+ ngAfterViewInit() {
4068
+ this.shouldProcessResponsiveness = true;
4069
+ }
4070
+ ngAfterViewChecked() {
4071
+ super.ngAfterViewChecked();
4072
+ if (this.shouldProcessResponsiveness) {
4073
+ this.model.processResponsiveness();
4074
+ this.shouldProcessResponsiveness = false;
4075
+ }
4076
+ }
4054
4077
  }
4055
4078
  HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
4056
4079
  HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: HeaderComponent, selector: "sv-header, sv-ng-header", inputs: { model: "model", survey: "survey" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div *ngIf=\"(survey.headerView === 'advanced') && !model.isEmpty\" [class]=\"model.headerClasses\" [style]=\"{ height: model.renderedHeight }\">\n <div *ngIf=\"!!model.backgroundImage\" [style]=\"model.backgroundImageStyle\" [class]=\"model.backgroundImageClasses\"></div>\n <div *ngIf=\"!survey.isMobile\" [class]=\"model.contentClasses\" [style.maxWidth]=\"model.maxWidth\">\n <ng-container *ngFor=\"let cell of model.cells\">\n <sv-ng-header-cell [model]=\"cell\"></sv-ng-header-cell>\n </ng-container>\n </div>\n <div *ngIf=\"survey.isMobile\">\n <sv-ng-header-mobile [model]=\"model\"></sv-ng-header-mobile>\n </div>\n </div>\n</ng-template>", styles: [":host { display: none }"], components: [{ type: HeaderCellComponent, selector: "sv-ng-header-cell", inputs: ["model"] }, { type: HeaderMobileComponent, selector: "sv-ng-header-mobile", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });