survey-angular-ui 2.0.9 → 2.1.0

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

@@ -1159,7 +1159,7 @@
       return DynamicHeadComponent;
   }(EmbeddedViewContentComponent));
   DynamicHeadComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicHeadComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  DynamicHeadComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicHeadComponent, selector: "sv-ng-dynamic-head", inputs: { tagName: "tagName", element: "element" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <ng-container [ngSwitch]=\"tagName\">\n    <h1 *ngSwitchCase=\"'h1'\" [class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"element.titleAriaRole\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h1>\n    <h2 *ngSwitchCase=\"'h2'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"element.titleAriaRole\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h2>\n    <h3 *ngSwitchCase=\"'h3'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"element.titleAriaRole\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h3>\n    <h4 *ngSwitchCase=\"'h4'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"element.titleAriaRole\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h4>\n    <h5 *ngSwitchCase=\"'h5'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"element.titleAriaRole\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h5>\n    <h6 *ngSwitchCase=\"'h6'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"element.titleAriaRole\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h6>\n    <label *ngSwitchCase=\"'label'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"element.titleAriaRole\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></label>\n  </ng-container>\n  <ng-template #titleContent>\n    <ng-content></ng-content>\n  </ng-template>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i2__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+  DynamicHeadComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicHeadComponent, selector: "sv-ng-dynamic-head", inputs: { tagName: "tagName", element: "element" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <ng-container [ngSwitch]=\"tagName\">\n    <h1 *ngSwitchCase=\"'h1'\" [class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"element.titleAriaRole\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h1>\n    <h2 *ngSwitchCase=\"'h2'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"element.titleAriaRole\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h2>\n    <h3 *ngSwitchCase=\"'h3'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"element.titleAriaRole\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h3>\n    <h4 *ngSwitchCase=\"'h4'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"element.titleAriaRole\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h4>\n    <h5 *ngSwitchCase=\"'h5'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"element.titleAriaRole\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h5>\n    <h6 *ngSwitchCase=\"'h6'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"element.titleAriaRole\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></h6>\n    <div *ngSwitchCase=\"'div'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"element.titleAriaRole\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></div>\n    <label *ngSwitchCase=\"'label'\"[class]=\"element.cssTitle\" [attr.id]=\"element.ariaTitleId\" [attr.tabindex]=\"element.titleTabIndex\" [attr.aria-expanded]=\"element.titleAriaExpanded\" [attr.role]=\"element.titleAriaRole\" [attr.aria-label]=\"ariaLabel\"><ng-container *ngTemplateOutlet=\"titleContent\"></ng-container></label>\n  </ng-container>\n  <ng-template #titleContent>\n    <ng-content></ng-content>\n  </ng-template>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i2__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicHeadComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2296,7 +2296,7 @@
       return DropdownComponent;
   }(BaseAngular));
   DropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DropdownComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  DropdownComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "<div [class]=\"model.cssClasses.selectWrapper\" (click)=\"click($event)\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.noTabIndex ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isDisabledAttr ? true : null\" (blur)=\"blur($event)\"\n        (keydown)=\"keyhandler($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n        [attr.aria-labelledby]=\"model.ariaLabelledBy\"\n        [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n        [attr.aria-errormessage]=\"model.ariaErrormessage\" [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.noTabIndex ? null : -1\"\n            [attr.disabled]=\"model.isDisabledAttr ? true : null\"\n            [attr.aria-controls]=\"dropdownModel.listElementId\"\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-expanded]=\"model.ariaExpanded\"\n            [attr.aria-activedescendant]=\"dropdownModel.ariaActivedescendant\"\n            [attr.placeholder]=\"dropdownModel.placeholderRendered\" \n            [attr.readonly]=\"dropdownModel.filterReadOnly ? true : null\" \n            (change)=\"inputChange($event)\" (blur)=\"blur($event)\" (focus)=\"focus($event)\"/>\n        </div>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\" aria-hidden=\"true\"\n            [class]=\"model.cssClasses.cleanButton\" (click)=\"clear($event)\" [visible]=\"model.showClearButton\">\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 *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\" \n    [attr.tabindex]=\"model.isDisabledAttr ? null : 0\"\n    [attr.disabled]=\"model.isDisabledAttr ? true : null\"\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        <sv-ng-string *ngIf=\"model.locReadOnlyText\" [model]=\"model.locReadOnlyText\"></sv-ng-string>\n    </div>\n    <div *ngIf=\"model.cssClasses.chevronButtonIconId\" [class]=\"model.cssClasses.chevronButton\" (pointerdown)=\"chevronPointerDown($event)\" aria-hidden=\"true\">\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"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2__namespace$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
+  DropdownComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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 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        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\" aria-hidden=\"true\"\n            [class]=\"model.cssClasses.cleanButton\" (click)=\"clear($event)\" [visible]=\"model.showClearButton\">\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\"\n                [title]=\"model.clearCaption\" [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 *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        <sv-ng-string *ngIf=\"model.locReadOnlyText\" [model]=\"model.locReadOnlyText\"></sv-ng-string>\n    </div>\n    <div *ngIf=\"model.cssClasses.chevronButtonIconId\" [class]=\"model.cssClasses.chevronButton\"\n        (pointerdown)=\"chevronPointerDown($event)\" 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>", 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"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2__namespace$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DropdownComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2321,7 +2321,7 @@
       return TagboxFilterComponent;
   }(BaseAngular));
   TagboxFilterComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TagboxFilterComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  TagboxFilterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxFilterComponent, selector: "sv-tagbox-filter", inputs: { model: "model", question: "question" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div [class]=\"question.cssClasses.hint\">\n    <div *ngIf=\"model.showHintPrefix\" [class]=\"question.cssClasses.hintPrefix\">\n        <span>{{ model.hintStringPrefix }}</span>\n    </div>\n    <div [class]=\"question.cssClasses.hintSuffixWrapper\">\n        <div *ngIf=\"model.showHintString\" [class]=\"question.cssClasses.hintSuffix\">\n            <span style=\"visibility: hidden\">{{ model.inputStringRendered }}</span>\n            <span>{{ model.hintStringSuffix }}</span>\n        </div>\n    <input\n      type=\"text\"\n      autocomplete=\"off\"\n      [(ngModel)]=\"model.inputStringRendered\"\n      [attr.id]=\"question.getInputId()\"\n      [class]=\"question.cssClasses.filterStringInput\"\n      [attr.inputmode]=\"model.inputMode\"\n      [attr.role]=\"model.filterStringEnabled ? question.ariaRole : null\"\n      [attr.readonly]=\"model.filterReadOnly ? true : null\"\n      [attr.disabled]=\"question.isDisabledAttr ? true : null\"\n      [attr.size]=\"!model.inputStringRendered ? 1 : null\"\n      [attr.aria-label]=\"question.a11y_input_ariaLabel\"\n      [attr.aria-labelledby]=\"question.a11y_input_ariaLabelledBy\"\n      [attr.aria-describedby]=\"question.a11y_input_ariaDescribedBy\"\n      [attr.aria-controls]=\"model.listElementId\"\n      [attr.aria-expanded]=\"question.ariaExpanded\"\n      [attr.aria-activedescendant]=\"model.ariaActivedescendant\"\n      [attr.placeholder]=\"model.filterStringPlaceholder\"\n      (keydown)=\"model.inputKeyHandler($event)\"\n      (blur)=\"question.onBlur($event)\"\n      (focus)=\"question.onFocus($event)\"\n    />\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:none}\n"], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+  TagboxFilterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxFilterComponent, selector: "sv-tagbox-filter", inputs: { model: "model", question: "question" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div [class]=\"question.cssClasses.hint\">\n    <div *ngIf=\"model.showHintPrefix\" [class]=\"question.cssClasses.hintPrefix\">\n      <span>{{ model.hintStringPrefix }}</span>\n    </div>\n    <div [class]=\"question.cssClasses.hintSuffixWrapper\">\n      <div *ngIf=\"model.showHintString\" [class]=\"question.cssClasses.hintSuffix\">\n        <span style=\"visibility: hidden\">{{ model.inputStringRendered }}</span>\n        <span>{{ model.hintStringSuffix }}</span>\n      </div>\n      <input 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TagboxFilterComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2412,7 +2412,7 @@
       return TagboxComponent;
   }());
   TagboxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TagboxComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  TagboxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxComponent, selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", inputs: { model: "model" }, ngImport: i0__namespace, template: "<div [class]=\"model.cssClasses.selectWrapper\" (click)=\"click($event)\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.noTabIndex ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isDisabledAttr ? 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-errormessage]=\"model.ariaErrormessage\" [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.showClearButton\" aria-hidden=\"true\">\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 *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\"\n    [attr.tabindex]=\"model.isDisabledAttr ? null : 0\"\n    [attr.disabled]=\"model.isDisabledAttr ? true : null\"\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        <sv-ng-string *ngIf=\"model.locReadOnlyText\" [model]=\"model.locReadOnlyText\"></sv-ng-string>\n    </div>\n    <div *ngIf=\"model.cssClasses.chevronButtonIconId\" [class]=\"model.cssClasses.chevronButton\" (pointerdown)=\"chevronPointerDown($event)\" aria-hidden=\"true\">\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"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
+  TagboxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxComponent, selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", inputs: { model: "model" }, ngImport: i0__namespace, 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\" [attr.aria-label]=\"dropdownModel.ariaQuestionLabel\"\n        [attr.aria-labelledby]=\"dropdownModel.ariaQuestionLabelledby\"\n        [attr.aria-describedby]=\"dropdownModel.ariaQuestionDescribedby\"\n        [attr.aria-invalid]=\"dropdownModel.ariaQuestionInvalid\"\n        [attr.aria-errormessage]=\"dropdownModel.ariaQuestionErrorMessage\"\n        [attr.aria-controls]=\"dropdownModel.ariaQuestionControls\"\n        [attr.aria-expanded]=\"dropdownModel.ariaQuestionExpanded\"\n        [attr.aria-activedescendant]=\"dropdownModel.ariaQuestionActivedescendant\">\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\n                [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.showClearButton\" aria-hidden=\"true\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\"\n                [title]=\"model.clearCaption\" [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 *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        <sv-ng-string *ngIf=\"model.locReadOnlyText\" [model]=\"model.locReadOnlyText\"></sv-ng-string>\n    </div>\n    <div *ngIf=\"model.cssClasses.chevronButtonIconId\" [class]=\"model.cssClasses.chevronButton\"\n        (pointerdown)=\"chevronPointerDown($event)\" 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>", 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"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TagboxComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2513,7 +2513,7 @@
       return DropdownSelectComponent;
   }());
   DropdownSelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DropdownSelectComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  DropdownSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DropdownSelectComponent, selector: "sv-ng-dropdown-select-question", inputs: { model: "model" }, ngImport: i0__namespace, 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.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\"\n      [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-errormessage]=\"model.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.isOtherSelected\" [class]=\"model.getCommentAreaCss(true)\"\n    [style.display]=\"model.isFlowLayout ? 'inline': '' \" [question]=\"model\" sv-ng-comment-other></div>\n</div>", components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: SurveyCommentOtherComponent, selector: "sv-ng-comment-other, '[sv-ng-comment-other]'", inputs: ["question"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2__namespace$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2__namespace$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+  DropdownSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DropdownSelectComponent, selector: "sv-ng-dropdown-select-question", inputs: { model: "model" }, ngImport: i0__namespace, 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.isOtherSelected\" [class]=\"model.getCommentAreaCss(true)\"\n    [style.display]=\"model.isFlowLayout ? 'inline': '' \" [question]=\"model\" sv-ng-comment-other></div>\n</div>", components: [{ type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: SurveyCommentOtherComponent, selector: "sv-ng-comment-other, '[sv-ng-comment-other]'", inputs: ["question"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2__namespace$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2__namespace$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DropdownSelectComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2763,7 +2763,7 @@
       return RadiogroupItemComponent;
   }());
   RadiogroupItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RadiogroupItemComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  RadiogroupItemComponent.ɵcmp = i0__namespace.ɵɵ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" }, ngImport: i0__namespace, 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)]=\"question.renderedValue\" [attr.value]=\"model.value\" [value]=\"model.value\"\n/>\n<ng-content></ng-content>", styles: [""], directives: [{ type: i2__namespace$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i2__namespace$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+  RadiogroupItemComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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)]=\"question.renderedValue\" [attr.value]=\"model.value\" [value]=\"model.value\" [attr.aria-label]=\"ariaLabel\"\n/>\n<ng-content></ng-content>", styles: [""], directives: [{ type: i2__namespace$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i2__namespace$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RadiogroupItemComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2775,6 +2775,8 @@
                   type: i0.Input
               }], model: [{
                   type: i0.Input
+              }], ariaLabel: [{
+                  type: i0.Input
               }] } });
 
   var CheckboxComponent = /** @class */ (function (_super) {
@@ -2807,7 +2809,7 @@
       return CheckboxItemComponent;
   }());
   CheckboxItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CheckboxItemComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  CheckboxItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CheckboxItemComponent, selector: "sv-ng-checkbox-item, '[sv-ng-checkbox-item]'", inputs: { question: "question", model: "model" }, ngImport: i0__namespace, template: "<input type=\"checkbox\" [name]=\"question.name+model.id\" [id]=\"question.getItemId(model)\" [class]=\"question.cssClasses.itemControl\" [required]=\"question.hasRequiredError()\"\n  [disabled]=\"!question.getItemEnabled(model)\" [readonly]=\"question.isReadOnlyAttr\" [checked]=\"question.isItemSelected(model)\" [value]=\"model.value\" (change)=\"onChange($event)\"/>\n<ng-content></ng-content>", styles: [""] });
+  CheckboxItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CheckboxItemComponent, selector: "sv-ng-checkbox-item, '[sv-ng-checkbox-item]'", inputs: { question: "question", model: "model", ariaLabel: "ariaLabel" }, ngImport: i0__namespace, template: "<input type=\"checkbox\" [name]=\"question.name+model.id\" [id]=\"question.getItemId(model)\" [class]=\"question.cssClasses.itemControl\" [required]=\"question.hasRequiredError()\"\n  [disabled]=\"!question.getItemEnabled(model)\" [readonly]=\"question.isReadOnlyAttr\" [checked]=\"question.isItemSelected(model)\" [value]=\"model.value\" (change)=\"onChange($event)\" [attr.aria-label]=\"ariaLabel\"/>\n<ng-content></ng-content>", styles: [""] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CheckboxItemComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2819,6 +2821,8 @@
                   type: i0.Input
               }], model: [{
                   type: i0.Input
+              }], ariaLabel: [{
+                  type: i0.Input
               }] } });
 
   var DropdownQuestionComponent = /** @class */ (function (_super) {
@@ -2987,6 +2991,73 @@
           }] });
   AngularComponentFactory.Instance.registerComponent("imagepicker-question", ImagePickerQuestionComponent);
 
+  var SliderQuestionComponent = /** @class */ (function (_super) {
+      __extends(SliderQuestionComponent, _super);
+      function SliderQuestionComponent() {
+          return _super !== null && _super.apply(this, arguments) || this;
+      }
+      SliderQuestionComponent.prototype.ngAfterViewInit = function () {
+          _super.prototype.ngAfterViewInit.call(this);
+          if (this.model && this.rangeInputElement) {
+              this.model.refreshInputRange(this.rangeInputElement);
+          }
+      };
+      Object.defineProperty(SliderQuestionComponent.prototype, "rootRef", {
+          get: function () {
+              var _a;
+              return (_a = this.elementContentRef) === null || _a === void 0 ? void 0 : _a.nativeElement;
+          },
+          enumerable: false,
+          configurable: true
+      });
+      Object.defineProperty(SliderQuestionComponent.prototype, "rangeInputElement", {
+          get: function () {
+              var _a;
+              return (_a = this.rangeInputRef) === null || _a === void 0 ? void 0 : _a.nativeElement;
+          },
+          enumerable: false,
+          configurable: true
+      });
+      Object.defineProperty(SliderQuestionComponent.prototype, "labelCountArray", {
+          get: function () {
+              var result = [];
+              for (var i = 0; i < this.model.labelCount; i++) {
+                  result.push(i);
+              }
+              return result;
+          },
+          enumerable: false,
+          configurable: true
+      });
+      Object.defineProperty(SliderQuestionComponent.prototype, "valueArray", {
+          get: function () {
+              return this.model.getRenderedValue();
+          },
+          enumerable: false,
+          configurable: true
+      });
+      SliderQuestionComponent.prototype.trackByRenderedValue = function (i) {
+          return i;
+      };
+      SliderQuestionComponent.prototype.trackByLabelCount = function (i) {
+          return i;
+      };
+      return SliderQuestionComponent;
+  }(QuestionAngular));
+  SliderQuestionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SliderQuestionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+  SliderQuestionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SliderQuestionComponent, selector: "sv-ng-slider-question", viewQueries: [{ propertyName: "rangeInputRef", first: true, predicate: ["rangeInputRef"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "\n<div [class]=\"model.rootCss\" #contentElement>\n  <input *ngIf=\"model.sliderType !== 'single' && model.allowDragRange\" #rangeInputRef\n  name=\"range-input\" [class]=\"model.cssClasses.input\" type=\"range\" tabIndex=\"-1\" \n  [attr.min]=\"model.min\" [attr.max]=\"model.max\" [attr.step]=\"model.step\" aria-hidden=\"true\"\n  (input)=\"model.handleRangeOnChange($any($event))\"\n  (pointerdown)=\"model.handleRangePointerDown($any($event), rootRef)\"\n  (pointerup)=\"model.handleRangePointerUp($any($event), rangeInputRef)\" />\n  \n  <div [class]=\"model.cssClasses.visualContainer\" (pointerup)=\"model.setValueByClickOnPath($any($event), rootRef)\">\n    <div [class]=\"model.cssClasses.visualContainerSlider\">\n      <div [class]=\"model.cssClasses.inverseTrackLeft\" [style]=\"{ width: model.getTrackPercentLeft() + '%' }\"></div>\n      <div [class]=\"model.cssClasses.inverseTrackRight\" [style]=\"{ width: model.getTrackPercentRight() + '%' }\"></div>\n      <div [class]=\"model.cssClasses.rangeTrack\" [style]=\"{ left: model.getTrackPercentLeft() + '%', right: model.getTrackPercentRight() + '%' }\" ></div>\n\n       <ng-container *ngFor=\"let value of valueArray; index as i; trackBy: trackByRenderedValue;\">\n        <input [class]=\"model.cssClasses.input\" [attr.id]=\"'sjs-slider-input-' + i\" type=\"range\" [value]=\"value\" \n          [attr.min]=\"model.min\" [attr.max]=\"model.max\" [attr.step]=\"model.step\" [disabled]=\"model.isDisabledAttr\"\n          (input)=\"model.handleOnChange($any($event), i)\"\n          (pointerdown)=\"model.handlePointerDown($any($event))\"\n          (pointerup)=\"model.handlePointerUp($any($event))\"\n          (keydown)=\"model.handleKeyDown($any($event))\"\n          (keyup)=\"model.handleKeyUp($any($event))\"\n          (focus)=\"model.handleOnFocus(i)\"\n          (blur)=\"model.handleOnBlur()\"\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        />\n        <div [class]=\"model.getThumbContainerCss(i)\" [style]=\"{ left: model.getPercent(value) + '%' }\">\n          <div *ngIf=\"model.tooltipVisibility !== 'never'\" [class]=\"model.tooltipCss\">\n            <div [class]=\"model.cssClasses.tooltipPanel\">\n              <div [class]=\"model.cssClasses.tooltipValue\">{{model.getTooltipValue(i)}}</div>\n            </div>\n          </div>\n          <div [class]=\"model.cssClasses.thumb\">\n            <div [class]=\"model.cssClasses.thumbDot\"></div>\n          </div>\n        </div>\n      </ng-container>\n\n    </div>\n  </div>\n\n  <div *ngIf=\"model.showLabels\" [class]=\"model.cssClasses.labelsContainer\">\n    <div>\n      <div *ngFor=\"let label of model.renderedLabels; index as i; trackBy: trackByLabelCount;\"  [class]=\"model.getLabelCss(i)\"\n      [style]=\"{ left: label.value + '%' }\"\n      (pointerup)=\"model.handleLabelPointerUp($any($event), i)\">\n        <div [class]=\"model.cssClasses.labelTick\"></div>\n        <div [class]=\"model.cssClasses.labelText\" [model]=\"label.locText\" sv-ng-string></div>\n      </div>\n    </div>\n  </div>\n</div>\n", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SliderQuestionComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: "sv-ng-slider-question",
+                      templateUrl: "./slider.component.html"
+                  }]
+          }], propDecorators: { rangeInputRef: [{
+                  type: i0.ViewChild,
+                  args: ["rangeInputRef"]
+              }] } });
+  AngularComponentFactory.Instance.registerComponent("slider-question", SliderQuestionComponent);
+
   var ButtonGroupItemComponent = /** @class */ (function (_super) {
       __extends(ButtonGroupItemComponent, _super);
       function ButtonGroupItemComponent() {
@@ -3239,7 +3310,7 @@
       return SelectBaseItemComponent;
   }(BaseAngular));
   SelectBaseItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SelectBaseItemComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  SelectBaseItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SelectBaseItemComponent, selector: "['sv-ng-selectbase-item'], sv-ng-selebase-item", inputs: { question: "question", model: "model", inputType: "inputType", showLabel: "showLabel" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div role=\"presentation\" [class]=\"question.getItemClass(model)\" #container>\n    <ng-container [ngSwitch]=\"inputType\">\n      <label *ngSwitchCase=\"'checkbox'\" [class]=\"question.getLabelClass(model)\" [model]=\"model\" [question]=\"question\"\n        sv-ng-checkbox-item>\n        <ng-container *ngTemplateOutlet=\"itemDecorator\"></ng-container>\n      </label>\n      <label *ngSwitchCase=\"'radio'\" (mousedown)=\"question.onMouseDown()\" [class]=\"question.getLabelClass(model)\"\n        [model]=\"model\" [question]=\"question\" sv-ng-radiogroup-item>\n        <ng-container *ngTemplateOutlet=\"itemDecorator\"></ng-container>\n      </label>\n    </ng-container>\n    <ng-template #itemDecorator>\n      <span *ngIf=\"question.cssClasses.materialDecorator\" [class]=\"question.cssClasses.materialDecorator\">\n        <svg *ngIf=\"question.itemSvgIcon\" [class]=\"question.cssClasses.itemDecorator\">\n          <use [attr.xlink:href]=\"question.itemSvgIcon\"></use>\n        </svg>\n      </span>\n      <span [class]=\"question.getControlLabelClass(model)\" *ngIf=\"!model.hideCaption\">\n        <sv-ng-string [model]=\"model.locText\"></sv-ng-string>\n      </span>\n    </ng-template>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: CheckboxItemComponent, selector: "sv-ng-checkbox-item, '[sv-ng-checkbox-item]'", inputs: ["question", "model"] }, { type: RadiogroupItemComponent, selector: "sv-ng-radiogroup-item, '[sv-ng-radiogroup-item]'", inputs: ["question", "model"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  SelectBaseItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SelectBaseItemComponent, selector: "['sv-ng-selectbase-item'], sv-ng-selebase-item", inputs: { question: "question", model: "model", inputType: "inputType", showLabel: "showLabel", ariaLabel: "ariaLabel" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div role=\"presentation\" [class]=\"question.getItemClass(model)\" #container>\n    <ng-container [ngSwitch]=\"inputType\">\n      <label *ngSwitchCase=\"'checkbox'\" [class]=\"question.getLabelClass(model)\" [model]=\"model\" [question]=\"question\"\n        sv-ng-checkbox-item [ariaLabel]=\"ariaLabel\">\n        <ng-container *ngTemplateOutlet=\"itemDecorator\"></ng-container>\n      </label>\n      <label *ngSwitchCase=\"'radio'\" (mousedown)=\"question.onMouseDown()\" [class]=\"question.getLabelClass(model)\"\n        [model]=\"model\" [question]=\"question\" sv-ng-radiogroup-item [ariaLabel]=\"ariaLabel\">\n        <ng-container *ngTemplateOutlet=\"itemDecorator\"></ng-container>\n      </label>\n    </ng-container>\n    <ng-template #itemDecorator>\n      <span *ngIf=\"question.cssClasses.materialDecorator\" [class]=\"question.cssClasses.materialDecorator\">\n        <svg *ngIf=\"question.itemSvgIcon\" [class]=\"question.cssClasses.itemDecorator\">\n          <use [attr.xlink:href]=\"question.itemSvgIcon\"></use>\n        </svg>\n      </span>\n      <span [class]=\"question.getControlLabelClass(model)\" *ngIf=\"!model.hideCaption\">\n        <sv-ng-string [model]=\"model.locText\"></sv-ng-string>\n      </span>\n    </ng-template>\n  </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: CheckboxItemComponent, selector: "sv-ng-checkbox-item, '[sv-ng-checkbox-item]'", inputs: ["question", "model", "ariaLabel"] }, { type: RadiogroupItemComponent, selector: "sv-ng-radiogroup-item, '[sv-ng-radiogroup-item]'", inputs: ["question", "model", "ariaLabel"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SelectBaseItemComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -3255,6 +3326,8 @@
                   type: i0.Input
               }], showLabel: [{
                   type: i0.Input
+              }], ariaLabel: [{
+                  type: i0.Input
               }], container: [{
                   type: i0.ViewChild,
                   args: ["container", { read: i0.ElementRef }]
@@ -3445,7 +3518,7 @@
       return ListComponent;
   }(BaseAngular));
   ListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ListComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  ListComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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.a11yInputAriaLabel\" [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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+  ListComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ListComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -3897,7 +3970,7 @@
       return PanelComponent;
   }(BaseAngular));
   PanelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PanelComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  PanelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelComponent, selector: "sv-ng-panel, '[sv-ng-panel]'", inputs: { model: "model" }, viewQueries: [{ propertyName: "panelContainerRef", first: true, predicate: ["panelContainer"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div *ngIf=\"canRender\" [attr.id]=\"model.id\" [class]=\"model.getContainerCss()\" (focusin)=\"model.focusIn()\" #panelContainer>\n    <div *ngIf=\"model.showErrorsAbovePanel && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n    <div *ngIf=\"model.hasDescription || model.hasTitle\" [element]=\"model\" sv-ng-element-header></div>\n    <div *ngIf=\"!model.showErrorsAbovePanel && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n    <div *ngIf=\"model.renderedIsExpanded\" [style.paddingLeft]=\"model.innerPaddingLeft\" [class]=\"model.cssClasses.panel.content\" [attr.id]=\"model.contentId\">\n      <ng-container *ngFor=\"let row of model.visibleRows; trackBy: trackRowBy\">\n        <ng-template [component]=\"{ name: $any(model.survey).getRowWrapperComponentName(row), data: { componentData: $any(model.survey).getRowWrapperComponentData(row) } }\">\n          <sv-ng-row [row]=\"row\"></sv-ng-row>\n        </ng-template>\n      </ng-container>\n      <sv-ng-action-bar [model]=\"model.getFooterToolbar()\"></sv-ng-action-bar>\n    </div>\n  </div>\n</ng-template>", components: [{ type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: ["element"] }, { type: RowComponent, selector: "sv-ng-row", inputs: ["row"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+  PanelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PanelComponent, selector: "sv-ng-panel, '[sv-ng-panel]'", inputs: { model: "model" }, viewQueries: [{ propertyName: "panelContainerRef", first: true, predicate: ["panelContainer"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <div *ngIf=\"canRender\" [attr.id]=\"model.id\" [class]=\"model.getContainerCss()\" (focusin)=\"model.focusIn()\" #panelContainer>\n    <div *ngIf=\"model.showErrorsAbovePanel && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n    <div *ngIf=\"model.hasDescription || model.hasTitle\" [element]=\"model\" sv-ng-element-header></div>\n    <div *ngIf=\"!model.showErrorsAbovePanel && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n    <div *ngIf=\"model.renderedIsExpanded\" [style.paddingLeft]=\"model.innerPaddingLeft\" [class]=\"model.cssClasses.panel.content\" \n      [attr.id]=\"model.contentId\" [attr.role]=\"model.ariaRole\" [attr.aria-labelledby]=\"model.ariaLabelledBy\"[attr.aria-label]=\"model.ariaLabel\">\n      <ng-container *ngFor=\"let row of model.visibleRows; trackBy: trackRowBy\">\n        <ng-template [component]=\"{ name: $any(model.survey).getRowWrapperComponentName(row), data: { componentData: $any(model.survey).getRowWrapperComponentData(row) } }\">\n          <sv-ng-row [row]=\"row\"></sv-ng-row>\n        </ng-template>\n      </ng-container>\n      <sv-ng-action-bar [model]=\"model.getFooterToolbar()\"></sv-ng-action-bar>\n    </div>\n  </div>\n</ng-template>", components: [{ type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: ElementHeaderComponent, selector: "'[sv-ng-element-header]'", inputs: ["element"] }, { type: RowComponent, selector: "sv-ng-row", inputs: ["row"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PanelComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -4862,10 +4935,17 @@
           enumerable: false,
           configurable: true
       });
+      Object.defineProperty(MatrixDropdownCellComponent.prototype, "ariaLabel", {
+          get: function () {
+              return this.question.getCellAriaLabel(this.cell.row.locText.renderedHtml, this.cell.column.locTitle.renderedHtml);
+          },
+          enumerable: false,
+          configurable: true
+      });
       return MatrixDropdownCellComponent;
   }(BaseAngular));
   MatrixDropdownCellComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixDropdownCellComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  MatrixDropdownCellComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixDropdownCellComponent, selector: "sv-ng-matrixdropdown-cell", inputs: { question: "question", cell: "cell" }, viewQueries: [{ propertyName: "cellContainer", first: true, predicate: ["cellContainer"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <td [class]=\"cell.className\" *ngIf=\"canRender\" [title]=\"cell.getTitle()\"\n    [style]=\"getCellStyle()\" [attr.colspan]=\"cell.colSpans\" (focusin)=\"cell.focusIn()\" #cellContainer>\n    <sv-ng-matrix-drag-drop-icon *ngIf=\"cell.isDragHandlerCell\"\n      [model]=\"$any({ data: { row: row, question: question } })\"></sv-ng-matrix-drag-drop-icon>\n    <sv-action-bar *ngIf=\"cell.isActionsCell\" [model]=\"cell.item.getData()\" [handleClick]=\"false\"></sv-action-bar>\n    <ng-container *ngIf=\"cell.hasPanel\">\n      <ng-template [component]=\"{ name: panelComponentName, data: panelComponentData }\"></ng-template>\n    </ng-container>\n    <div *ngIf=\"cell.isErrorsCell && cell.question?.hasVisibleErrors\" [element]=\"cell.question\" sv-ng-errors></div>\n    <span *ngIf=\"cell.showResponsiveTitle\" [class]=\"cell.responsiveTitleCss\">\n      <sv-ng-string [model]=\"cell.responsiveLocTitle\"></sv-ng-string>\n      <sv-ng-matrixheaderrequired [column]=\"cell.column\" [question]=\"cell.matrix\">\n      </sv-ng-matrixheaderrequired>\n    </span>\n    <div *ngIf=\"cell.hasQuestion\" [class]=\"cell.cellQuestionWrapperClassName\"\n      [visible]=\"cell.question.isVisible\">\n      <ng-container *ngIf=\"!cell.isChoice && cell.question.isDefaultRendering()\">\n        <ng-template\n          [component]=\"{ name: question.getCellWrapperComponentName(cell.cell), data: { componentData: question.getCellWrapperComponentData(cell.cell)} }\">\n          <ng-template\n            [component]=\"{ name: getComponentName(cell.question), data: { model: cell.question } }\"></ng-template>\n        </ng-template>\n      </ng-container>\n      <ng-template *ngIf=\"!cell.isChoice && !cell.question.isDefaultRendering()\"\n        [component]=\"{ name: cell.question.getComponentName(), data: { model: cell.question } }\">\n      </ng-template>\n      <ng-container *ngIf=\"cell.isItemChoice\">\n        <ng-template\n          [component]=\"{ name: question.getCellWrapperComponentName(cell.cell), data: { componentData: question.getCellWrapperComponentData(cell.cell)} }\">\n          <sv-ng-selebase-item [showLabel]=\"false\" [inputType]=\"cell.isCheckbox ? 'checkbox': 'radio'\"\n            [question]=\"cell.question\" [model]=\"cell.item\"></sv-ng-selebase-item>\n        </ng-template>\n      </ng-container>\n      <div *ngIf=\"cell.isOtherChoice\" [class]=\"cell.question.getCommentAreaCss(true)\" [question]=\"cell.question\"\n        sv-ng-comment-other></div>\n    </div>\n    <ng-container *ngIf=\"cell.hasTitle\">\n      <ng-template\n        [component]=\"{ name: question.getCellWrapperComponentName($any(cell)), data: { componentData: question.getCellWrapperComponentData($any(cell))} }\">\n        <sv-ng-string [model]=\"cell.locTitle\"></sv-ng-string>\n        <span *ngIf=\"isRequiredCell\" [class]=\"question.cssClasses.cellRequiredMark\">{{ cell.requiredMark }}</span>\n      </ng-template>\n    </ng-container>\n  </td>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: MatrixDynamicDragDropIconComponent, selector: "sv-ng-matrix-drag-drop-icon", inputs: ["model"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: MatrixRequiredHeader, selector: "sv-ng-matrixheaderrequired", inputs: ["column", "question"] }, { type: SelectBaseItemComponent, selector: "['sv-ng-selectbase-item'], sv-ng-selebase-item", inputs: ["question", "model", "inputType", "showLabel"] }, { type: SurveyCommentOtherComponent, selector: "sv-ng-comment-other, '[sv-ng-comment-other]'", inputs: ["question"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
+  MatrixDropdownCellComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixDropdownCellComponent, selector: "sv-ng-matrixdropdown-cell", inputs: { question: "question", cell: "cell" }, viewQueries: [{ propertyName: "cellContainer", first: true, predicate: ["cellContainer"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #template>\n  <td [class]=\"cell.className\" *ngIf=\"canRender\" [title]=\"cell.getTitle()\"\n    [style]=\"getCellStyle()\" [attr.colspan]=\"cell.colSpans\" (focusin)=\"cell.focusIn()\" #cellContainer>\n    <sv-ng-matrix-drag-drop-icon *ngIf=\"cell.isDragHandlerCell\"\n      [model]=\"$any({ data: { row: row, question: question } })\"></sv-ng-matrix-drag-drop-icon>\n    <sv-action-bar *ngIf=\"cell.isActionsCell\" [model]=\"cell.item.getData()\" [handleClick]=\"false\"></sv-action-bar>\n    <ng-container *ngIf=\"cell.hasPanel\">\n      <ng-template [component]=\"{ name: panelComponentName, data: panelComponentData }\"></ng-template>\n    </ng-container>\n    <div *ngIf=\"cell.isErrorsCell && cell.question?.hasVisibleErrors\" [element]=\"cell.question\" sv-ng-errors></div>\n    <span *ngIf=\"cell.showResponsiveTitle\" [class]=\"cell.responsiveTitleCss\">\n      <sv-ng-string [model]=\"cell.responsiveLocTitle\"></sv-ng-string>\n      <sv-ng-matrixheaderrequired [column]=\"cell.column\" [question]=\"cell.matrix\">\n      </sv-ng-matrixheaderrequired>\n    </span>\n    <div *ngIf=\"cell.hasQuestion\" [class]=\"cell.cellQuestionWrapperClassName\"\n      [visible]=\"cell.question.isVisible\">\n      <ng-container *ngIf=\"!cell.isChoice && cell.question.isDefaultRendering()\">\n        <ng-template\n          [component]=\"{ name: question.getCellWrapperComponentName(cell.cell), data: { componentData: question.getCellWrapperComponentData(cell.cell)} }\">\n          <ng-template\n            [component]=\"{ name: getComponentName(cell.question), data: { model: cell.question } }\"></ng-template>\n        </ng-template>\n      </ng-container>\n      <ng-template *ngIf=\"!cell.isChoice && !cell.question.isDefaultRendering()\"\n        [component]=\"{ name: cell.question.getComponentName(), data: { model: cell.question } }\">\n      </ng-template>\n      <ng-container *ngIf=\"cell.isItemChoice\">\n        <ng-template\n          [component]=\"{ name: question.getCellWrapperComponentName(cell.cell), data: { componentData: question.getCellWrapperComponentData(cell.cell)} }\">\n          <sv-ng-selebase-item [showLabel]=\"false\" [inputType]=\"cell.isCheckbox ? 'checkbox': 'radio'\" [ariaLabel]=\"ariaLabel\"\n            [question]=\"cell.question\" [model]=\"cell.item\"></sv-ng-selebase-item>\n        </ng-template>\n      </ng-container>\n      <div *ngIf=\"cell.isOtherChoice\" [class]=\"cell.question.getCommentAreaCss(true)\" [question]=\"cell.question\"\n        sv-ng-comment-other></div>\n    </div>\n    <ng-container *ngIf=\"cell.hasTitle\">\n      <ng-template\n        [component]=\"{ name: question.getCellWrapperComponentName($any(cell)), data: { componentData: question.getCellWrapperComponentData($any(cell))} }\">\n        <sv-ng-string [model]=\"cell.locTitle\"></sv-ng-string>\n        <span *ngIf=\"isRequiredCell\" [class]=\"question.cssClasses.cellRequiredMark\">{{ cell.requiredMark }}</span>\n      </ng-template>\n    </ng-container>\n  </td>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: MatrixDynamicDragDropIconComponent, selector: "sv-ng-matrix-drag-drop-icon", inputs: ["model"] }, { type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }, { type: ErrorsComponent, selector: "'[sv-ng-errors]'", inputs: ["element", "location"] }, { type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: MatrixRequiredHeader, selector: "sv-ng-matrixheaderrequired", inputs: ["column", "question"] }, { type: SelectBaseItemComponent, selector: "['sv-ng-selectbase-item'], sv-ng-selebase-item", inputs: ["question", "model", "inputType", "showLabel", "ariaLabel"] }, { type: SurveyCommentOtherComponent, selector: "sv-ng-comment-other, '[sv-ng-comment-other]'", inputs: ["question"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatrixDropdownCellComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -5340,7 +5420,7 @@
           TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
           ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
           SelectBaseItemComponent, SelectBaseComponent, SurveyCommentComponent, SurveyCommentOtherComponent, ElementHeaderComponent, ElementTitleActionsComponent, ElementTitleComponent, DynamicHeadComponent, RowComponent,
-          RatingQuestionComponent, RatingDropdownItemComponent, RatingDropdownComponent, ButtonGroupDropdownComponent, BooleanQuestionComponent, BooleanCheckboxComponent, BooleanRadioComponent, BooleanRadioItemComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent,
+          RatingQuestionComponent, SliderQuestionComponent, RatingDropdownItemComponent, RatingDropdownComponent, ButtonGroupDropdownComponent, BooleanQuestionComponent, BooleanCheckboxComponent, BooleanRadioComponent, BooleanRadioItemComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent,
           SurveyHeaderComponent, ProgressDefaultComponent, ProgressButtonsComponent, ProgressTocComponent, SurveyNavigationButton, MatrixQuestionComponent, SvgIconComponent, FileQuestionComponent, SafeUrlPipe, SafeHtmlPipe, CommentQuestionComponent, SignaturePadQuestionComponent, ErrorsComponent,
           MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, RankingItemContentComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent,
           MatrixCellComponent, MatrixDropdownCellComponent, MatrixTableComponent, MatrixDropdownComponent,
@@ -5358,7 +5438,7 @@
           TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
           ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
           SelectBaseItemComponent, SelectBaseComponent, SurveyCommentComponent, SurveyCommentOtherComponent, ElementHeaderComponent, ElementTitleComponent, DynamicHeadComponent, RowComponent,
-          RatingQuestionComponent, RatingDropdownItemComponent, RatingDropdownComponent, ButtonGroupDropdownComponent, BooleanQuestionComponent, BooleanCheckboxComponent, BooleanRadioComponent, BooleanRadioItemComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent,
+          RatingQuestionComponent, SliderQuestionComponent, RatingDropdownItemComponent, RatingDropdownComponent, ButtonGroupDropdownComponent, BooleanQuestionComponent, BooleanCheckboxComponent, BooleanRadioComponent, BooleanRadioItemComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent,
           SurveyHeaderComponent, ProgressDefaultComponent, ProgressButtonsComponent, SurveyNavigationButton, MatrixQuestionComponent, SvgIconComponent, FileQuestionComponent, SafeUrlPipe, SafeHtmlPipe, CommentQuestionComponent, SignaturePadQuestionComponent, ErrorsComponent,
           MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, RankingItemContentComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent,
           MatrixCellComponent, MatrixDropdownCellComponent, MatrixTableComponent, MatrixDropdownComponent,
@@ -5383,7 +5463,7 @@
                           TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
                           ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
                           SelectBaseItemComponent, SelectBaseComponent, SurveyCommentComponent, SurveyCommentOtherComponent, ElementHeaderComponent, ElementTitleActionsComponent, ElementTitleComponent, DynamicHeadComponent, RowComponent,
-                          RatingQuestionComponent, RatingDropdownItemComponent, RatingDropdownComponent, ButtonGroupDropdownComponent, BooleanQuestionComponent, BooleanCheckboxComponent, BooleanRadioComponent, BooleanRadioItemComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent,
+                          RatingQuestionComponent, SliderQuestionComponent, RatingDropdownItemComponent, RatingDropdownComponent, ButtonGroupDropdownComponent, BooleanQuestionComponent, BooleanCheckboxComponent, BooleanRadioComponent, BooleanRadioItemComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent,
                           SurveyHeaderComponent, ProgressDefaultComponent, ProgressButtonsComponent, ProgressTocComponent, SurveyNavigationButton, MatrixQuestionComponent, SvgIconComponent, FileQuestionComponent, SafeUrlPipe, SafeHtmlPipe, CommentQuestionComponent, SignaturePadQuestionComponent, ErrorsComponent,
                           MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, RankingItemContentComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent,
                           MatrixCellComponent, MatrixDropdownCellComponent, MatrixTableComponent, MatrixDropdownComponent,
@@ -5407,7 +5487,7 @@
                           TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
                           ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
                           SelectBaseItemComponent, SelectBaseComponent, SurveyCommentComponent, SurveyCommentOtherComponent, ElementHeaderComponent, ElementTitleComponent, DynamicHeadComponent, RowComponent,
-                          RatingQuestionComponent, RatingDropdownItemComponent, RatingDropdownComponent, ButtonGroupDropdownComponent, BooleanQuestionComponent, BooleanCheckboxComponent, BooleanRadioComponent, BooleanRadioItemComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent,
+                          RatingQuestionComponent, SliderQuestionComponent, RatingDropdownItemComponent, RatingDropdownComponent, ButtonGroupDropdownComponent, BooleanQuestionComponent, BooleanCheckboxComponent, BooleanRadioComponent, BooleanRadioItemComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent,
                           SurveyHeaderComponent, ProgressDefaultComponent, ProgressButtonsComponent, SurveyNavigationButton, MatrixQuestionComponent, SvgIconComponent, FileQuestionComponent, SafeUrlPipe, SafeHtmlPipe, CommentQuestionComponent, SignaturePadQuestionComponent, ErrorsComponent,
                           MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, RankingItemContentComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent,
                           MatrixCellComponent, MatrixDropdownCellComponent, MatrixTableComponent, MatrixDropdownComponent,
@@ -5535,6 +5615,7 @@
   exports.SignaturePadQuestionComponent = SignaturePadQuestionComponent;
   exports.SingleInputSummaryComponent = SingleInputSummaryComponent;
   exports.SkeletonComponent = SkeletonComponent;
+  exports.SliderQuestionComponent = SliderQuestionComponent;
   exports.StringEditorComponent = StringEditorComponent;
   exports.StringViewerComponent = StringViewerComponent;
   exports.SurveyCommentComponent = SurveyCommentComponent;