survey-angular-ui 1.9.116 → 1.9.117

package/fesm2015/survey-angular-ui.js

@@ -848,9 +848,6 @@ class SvgIconComponent {
     get rootRole() {
         return "img";
     }
-    get ariaLabel() {
-        return this.title;
-    }
     ngOnChanges() {
         const el = this.viewContaierRef.element.nativeElement;
         el.innerHTML = "";
@@ -859,7 +856,7 @@ class SvgIconComponent {
     }
 }
 SvgIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SvgIconComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-SvgIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: { size: "size", width: "width", height: "height", iconName: "iconName", partCss: "partCss", css: "css", title: "title" }, host: { properties: { "class": "this.rootClass", "[attr.role]": "this.rootRole", "[attr.aria-label]": "this.ariaLabel" } }, usesOnChanges: true, ngImport: i0, template: "", isInline: true });
+SvgIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: { size: "size", width: "width", height: "height", iconName: "iconName", partCss: "partCss", css: "css", title: "title" }, host: { properties: { "class": "this.rootClass", "[attr.role]": "this.rootRole" } }, usesOnChanges: true, ngImport: i0, template: "", isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SvgIconComponent, decorators: [{
             type: Component,
             args: [{
@@ -886,9 +883,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             }], rootRole: [{
                 type: HostBinding,
                 args: ["[attr.role]"]
-            }], ariaLabel: [{
-                type: HostBinding,
-                args: ["[attr.aria-label]"]
             }] } });
 
 class PopupSurveyComponent extends BaseAngular {
@@ -1064,7 +1058,7 @@ class SurveyCommentComponent {
     }
 }
 SurveyCommentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyCommentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SurveyCommentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: { question: "question" }, ngImport: i0, template: "<textarea *ngIf=\"!question.isReadOnlyRenderDiv()\" [id]=\"question.commentId\" [attr.maxlength]=\"question.getOthersMaxLength()\"  [attr.aria-required]=\"question.ariaRequired || question.a11y_input_ariaRequired\" [attr.aria-label]=\"question.ariaLabel || question.a11y_input_ariaLabel\" [attr.placeholder]=\"question.renderedCommentPlaceholder\" \n  [value]=\"comment\"\n  [style.resize]=\"question.resizeStyle\"\n  [disabled]=\"question.isInputReadOnly\"\n  (change)=\"question.onCommentChange($event)\"\n  (input)=\"question.onCommentInput($event)\"\n  [class]=\"question.cssClasses.other\">\n</textarea>\n<div *ngIf=\"question.isReadOnlyRenderDiv()\">{{ question.comment }}</div>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SurveyCommentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: { question: "question" }, ngImport: i0, template: "<textarea *ngIf=\"!question.isReadOnlyRenderDiv()\" [id]=\"question.commentId\" [attr.maxlength]=\"question.getOthersMaxLength()\"  [attr.aria-required]=\"question.ariaRequired || question.a11y_input_ariaRequired\" [attr.aria-label]=\"question.ariaLabel || question.a11y_input_ariaLabel\" [attr.placeholder]=\"question.renderedCommentPlaceholder\" \n  [value]=\"comment\"\n  [style.resize]=\"question.resizeStyle\"\n  [disabled]=\"question.isInputReadOnly\"\n  (change)=\"question.onCommentChange($event)\"\n  (input)=\"question.onCommentInput($event)\"\n  (compositionupdate)=\"question.onCompositionUpdateComment($event)\"\n  [class]=\"question.cssClasses.other\">\n</textarea>\n<div *ngIf=\"question.isReadOnlyRenderDiv()\">{{ question.comment }}</div>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyCommentComponent, decorators: [{
             type: Component,
             args: [{
@@ -1295,7 +1289,7 @@ class DropdownComponent extends BaseAngular {
     }
 }
 DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DropdownComponent, selector: "sv-ng-dropdown, '[sv-ng-dropdown]'", inputs: { model: "model" }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.selectWrapper\" (click)=\"click($event)\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (blur)=\"blur($event)\"\n        (keydown)=\"keyhandler($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n        [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n        [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.role]=\"model.ariaRole\"\n        [attr.aria-controls]=\"dropdownModel.listElementId\"\n        [attr.aria-expanded]=\"model.ariaExpanded\"\n        [attr.aria-activedescendant]=\"dropdownModel.ariaActivedescendant\">\n        <div *ngIf=\"dropdownModel.showHintPrefix\" [class]=\"model.cssClasses.hintPrefix\">\n            <span>{{ dropdownModel.hintStringPrefix }}</span>\n        </div>\n        <div [class]=\"model.cssClasses.controlValue\">\n            <div *ngIf=\"dropdownModel.showHintString\" [class]=\"model.cssClasses.hintSuffix\">\n                <span style=\"visibility: hidden\">{{ dropdownModel.inputStringRendered }}</span>\n                <span>{{ dropdownModel.hintStringSuffix }}</span>\n            </div>\n            <ng-container *ngIf=\"dropdownModel.showInputFieldComponent\">\n                <ng-template [component]=\"{ name: model.inputFieldComponentName, data: { model: dropdownModel.getSelectedAction(), question: model } }\"></ng-template>\n            </ng-container>\n            <sv-ng-string *ngIf=\"model.showSelectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n            <input #inputElement type=\"text\" autocomplete=\"off\" [(ngModel)]=\"dropdownModel.inputStringRendered\" [class]=\"model.cssClasses.filterStringInput\"\n            [attr.role]=\"dropdownModel.filterStringEnabled ? model.ariaRole : null\"\n            [attr.id]=\"model.getInputId()\"\n            [attr.inputmode]=\"dropdownModel.inputMode\"\n            [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : -1\"\n            [attr.disabled]=\"model.isInputReadOnly ? true : null\"\n            [attr.aria-controls]=\"dropdownModel.listElementId\"\n            [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n            [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\"\n            [attr.aria-expanded]=\"model.ariaExpanded\"\n            [attr.aria-activedescendant]=\"dropdownModel.ariaActivedescendant\"\n            [attr.placeholder]=\"dropdownModel.placeholderRendered\" [attr.readonly]=\"!dropdownModel.searchEnabled ? true : null\" \n            (change)=\"inputChange($event)\" (blur)=\"blur($event)\" (focus)=\"focus($event)\"/>\n        </div>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\"\n            [class]=\"model.cssClasses.cleanButton\" (click)=\"clear($event)\" [visible]=\"model.showClearButton\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.clearCaption\"\n                [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"dropdownModel.popupModel\"></sv-ng-popup>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">\n        <sv-ng-string *ngIf=\"model.selectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n        <div>{{ model.readOnlyText }}</div>\n    </div>\n    <div *ngIf=\"model.cssClasses.chevronButtonIconId\" [class]=\"model.cssClasses.chevronButton\" (pointerdown)=\"chevronPointerDown($event)\">\n        <svg [iconName]=\"model.cssClasses.chevronButtonIconId\" [partCss]=\"model.cssClasses.chevronButtonSvg\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    </div>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }, { type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
+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\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (blur)=\"blur($event)\"\n        (keydown)=\"keyhandler($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n        [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n        [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.role]=\"model.ariaRole\"\n        [attr.aria-controls]=\"dropdownModel.listElementId\"\n        [attr.aria-expanded]=\"model.ariaExpanded\"\n        [attr.aria-activedescendant]=\"dropdownModel.ariaActivedescendant\">\n        <div *ngIf=\"dropdownModel.showHintPrefix\" [class]=\"model.cssClasses.hintPrefix\">\n            <span>{{ dropdownModel.hintStringPrefix }}</span>\n        </div>\n        <div [class]=\"model.cssClasses.controlValue\">\n            <div *ngIf=\"dropdownModel.showHintString\" [class]=\"model.cssClasses.hintSuffix\">\n                <span style=\"visibility: hidden\">{{ dropdownModel.inputStringRendered }}</span>\n                <span>{{ dropdownModel.hintStringSuffix }}</span>\n            </div>\n            <ng-container *ngIf=\"dropdownModel.showInputFieldComponent\">\n                <ng-template [component]=\"{ name: model.inputFieldComponentName, data: { model: dropdownModel.getSelectedAction(), question: model } }\"></ng-template>\n            </ng-container>\n            <sv-ng-string *ngIf=\"model.showSelectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n            <input #inputElement type=\"text\" autocomplete=\"off\" [(ngModel)]=\"dropdownModel.inputStringRendered\" [class]=\"model.cssClasses.filterStringInput\"\n            [attr.role]=\"dropdownModel.filterStringEnabled ? model.ariaRole : null\"\n            [attr.id]=\"model.getInputId()\"\n            [attr.inputmode]=\"dropdownModel.inputMode\"\n            [attr.tabindex]=\"dropdownModel.noTabIndex ? null : -1\"\n            [attr.disabled]=\"model.isInputReadOnly ? 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-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)\"\n            [class]=\"model.cssClasses.cleanButton\" (click)=\"clear($event)\" [visible]=\"model.showClearButton\" [attr.tabindex]=\"model.showClearButton ? 0 : -1\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.clearCaption\"\n                [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"dropdownModel.popupModel\"></sv-ng-popup>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">\n        <sv-ng-string *ngIf=\"model.selectedItemLocText\" [model]=\"model.selectedItemLocText\"></sv-ng-string>\n        <div>{{ model.readOnlyText }}</div>\n    </div>\n    <div *ngIf=\"model.cssClasses.chevronButtonIconId\" [class]=\"model.cssClasses.chevronButton\" (pointerdown)=\"chevronPointerDown($event)\" 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", "getTarget"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
             args: [{
@@ -1315,7 +1309,7 @@ class TagboxFilterComponent extends BaseAngular {
     }
 }
 TagboxFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TagboxFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TagboxFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxFilterComponent, selector: "sv-tagbox-filter", inputs: { model: "model", question: "question" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"question.cssClasses.hint\">\n    <div *ngIf=\"model.showHintPrefix\" [class]=\"question.cssClasses.hintPrefix\">\n        <span>{{ model.hintStringPrefix }}</span>\n    </div>\n    <div [class]=\"question.cssClasses.hintSuffixWrapper\">\n        <div *ngIf=\"model.showHintString\" [class]=\"question.cssClasses.hintSuffix\">\n            <span style=\"visibility: hidden\">{{ model.inputStringRendered }}</span>\n            <span>{{ model.hintStringSuffix }}</span>\n        </div>\n    <input\n      type=\"text\"\n      autocomplete=\"off\"\n      [(ngModel)]=\"model.inputStringRendered\"\n      [attr.id]=\"question.getInputId()\"\n      [class]=\"question.cssClasses.filterStringInput\"\n      [attr.inputmode]=\"model.inputMode\"\n      [attr.role]=\"model.filterStringEnabled ? question.ariaRole : null\"\n      [attr.readonly]=\"!model.searchEnabled ? true : null\"\n      [attr.disabled]=\"question.isInputReadOnly ? true : null\"\n      [attr.size]=\"!model.inputStringRendered ? 1 : null\"\n      [attr.aria-label]=\"question.a11y_input_ariaLabel\"\n      [attr.aria-labelledby]=\"question.a11y_input_ariaLabelledBy\"\n      [attr.aria-controls]=\"model.listElementId\"\n      [attr.aria-expanded]=\"question.ariaExpanded\"\n      [attr.aria-activedescendant]=\"model.ariaActivedescendant\"\n      [attr.placeholder]=\"model.filterStringPlaceholder\"\n      (keydown)=\"model.inputKeyHandler($event)\"\n      (blur)=\"model.onBlur($event)\"\n      (focus)=\"model.onFocus($event)\"\n    />\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:none}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+TagboxFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxFilterComponent, selector: "sv-tagbox-filter", inputs: { model: "model", question: "question" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"question.cssClasses.hint\">\n    <div *ngIf=\"model.showHintPrefix\" [class]=\"question.cssClasses.hintPrefix\">\n        <span>{{ model.hintStringPrefix }}</span>\n    </div>\n    <div [class]=\"question.cssClasses.hintSuffixWrapper\">\n        <div *ngIf=\"model.showHintString\" [class]=\"question.cssClasses.hintSuffix\">\n            <span style=\"visibility: hidden\">{{ model.inputStringRendered }}</span>\n            <span>{{ model.hintStringSuffix }}</span>\n        </div>\n    <input\n      type=\"text\"\n      autocomplete=\"off\"\n      [(ngModel)]=\"model.inputStringRendered\"\n      [attr.id]=\"question.getInputId()\"\n      [class]=\"question.cssClasses.filterStringInput\"\n      [attr.inputmode]=\"model.inputMode\"\n      [attr.role]=\"model.filterStringEnabled ? question.ariaRole : null\"\n      [attr.readonly]=\"model.filterReadOnly ? true : null\"\n      [attr.disabled]=\"question.isInputReadOnly ? 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-controls]=\"model.listElementId\"\n      [attr.aria-expanded]=\"question.ariaExpanded\"\n      [attr.aria-activedescendant]=\"model.ariaActivedescendant\"\n      [attr.placeholder]=\"model.filterStringPlaceholder\"\n      (keydown)=\"model.inputKeyHandler($event)\"\n      (blur)=\"model.onBlur($event)\"\n      (focus)=\"model.onFocus($event)\"\n    />\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:none}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TagboxFilterComponent, decorators: [{
             type: Component,
             args: [{
@@ -1389,7 +1383,7 @@ class TagboxComponent {
     }
 }
 TagboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TagboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TagboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxComponent, selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.cssClasses.selectWrapper\" (click)=\"click($event)\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (blur)=\"blur($event)\"\n        (keydown)=\"keyhandler($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n        [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n        [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.role]=\"model.ariaRole\"\n        [attr.aria-controls]=\"dropdownModel.listElementId\"\n        [attr.aria-expanded]=\"model.ariaExpanded\"\n        [attr.aria-activedescendant]=\"dropdownModel.ariaActivedescendant\">\n        <div [class]=\"model.cssClasses.controlValue\">\n            <ng-container *ngIf=\"!model.isEmpty()\">\n                <sv-ng-tagbox-item *ngFor=\"let item of model.selectedChoices\" [item]=\"item\" [question]=\"model\">\n                </sv-ng-tagbox-item>\n            </ng-container>\n            <ng-template [component]=\"{ name: 'sv-tagbox-filter', data: { model: dropdownModel, question: model } }\"></ng-template>\n        </div>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\" [class]=\"model.cssClasses.cleanButton\"\n            (click)=\"clear($event)\" [visible]=\"model.showClearButton\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.clearCaption\"\n                [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"model.popupModel\"></sv-ng-popup>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">\n        <div>{{ model.readOnlyText }}</div>\n    </div>\n    <div *ngIf=\"model.cssClasses.chevronButtonIconId\" [class]=\"model.cssClasses.chevronButton\" (pointerdown)=\"chevronPointerDown($event)\">\n        <svg [iconName]=\"model.cssClasses.chevronButtonIconId\" [partCss]=\"model.cssClasses.chevronButtonSvg\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    </div>\n</div>", components: [{ type: TagboxItemComponent, selector: "sv-ng-tagbox-item, '[sv-ng-tagbox-item]'", inputs: ["item", "question"] }, { type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
+TagboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TagboxComponent, selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.cssClasses.selectWrapper\" (click)=\"click($event)\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.noTabIndex ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (blur)=\"blur($event)\"\n        (keydown)=\"keyhandler($event)\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\"\n        [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\"\n        [attr.aria-describedby]=\"model.ariaDescribedBy\" [attr.role]=\"model.ariaRole\"\n        [attr.aria-controls]=\"dropdownModel.listElementId\"\n        [attr.aria-expanded]=\"model.ariaExpanded\"\n        [attr.aria-activedescendant]=\"dropdownModel.ariaActivedescendant\">\n        <div [class]=\"model.cssClasses.controlValue\">\n            <ng-container *ngIf=\"!model.isEmpty()\">\n                <sv-ng-tagbox-item *ngFor=\"let item of model.selectedChoices\" [item]=\"item\" [question]=\"model\">\n                </sv-ng-tagbox-item>\n            </ng-container>\n            <ng-template [component]=\"{ name: 'sv-tagbox-filter', data: { model: dropdownModel, question: model } }\"></ng-template>\n        </div>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\" [class]=\"model.cssClasses.cleanButton\" [attr.tabindex]=\"model.showClearButton ? 0 : -1\"\n            (click)=\"clear($event)\" [visible]=\"model.showClearButton\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.clearCaption\"\n                [size]=\"'auto'\" sv-ng-svg-icon></svg>\n        </div>\n    </div>\n    <sv-ng-popup *ngIf=\"!model.isReadOnly\" [popupModel]=\"model.popupModel\"></sv-ng-popup>\n    <div disabled *ngIf=\"model.isReadOnly\" [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">\n        <div>{{ model.readOnlyText }}</div>\n    </div>\n    <div *ngIf=\"model.cssClasses.chevronButtonIconId\" [class]=\"model.cssClasses.chevronButton\" (pointerdown)=\"chevronPointerDown($event)\">\n        <svg [iconName]=\"model.cssClasses.chevronButtonIconId\" [partCss]=\"model.cssClasses.chevronButtonSvg\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n    </div>\n</div>", components: [{ type: TagboxItemComponent, selector: "sv-ng-tagbox-item, '[sv-ng-tagbox-item]'", inputs: ["item", "question"] }, { type: SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: PopupComponent, selector: "sv-ng-popup, '[sv-ng-popup]'", inputs: ["popupModel", "getTarget"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TagboxComponent, decorators: [{
             type: Component,
             args: [{
@@ -1438,6 +1432,9 @@ class SurveyCommentOtherComponent {
     onOtherValueInput(event) {
         this.question.onOtherValueInput(event);
     }
+    onCompositionUpdateOtherValue(event) {
+        this.question.onCompositionUpdateOtherValue(event);
+    }
     get otherId() {
         return this.question.otherId;
     }
@@ -1446,7 +1443,7 @@ class SurveyCommentOtherComponent {
     }
 }
 SurveyCommentOtherComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyCommentOtherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SurveyCommentOtherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurveyCommentOtherComponent, selector: "sv-ng-comment-other, '[sv-ng-comment-other]'", inputs: { question: "question" }, ngImport: i0, template: "<textarea *ngIf=\"!question.isReadOnlyRenderDiv()\" [id]=\"otherId\" [attr.maxlength]=\"question.getOthersMaxLength()\"  [attr.aria-required]=\"question.ariaRequired || question.a11y_input_ariaRequired\" [attr.aria-label]=\"question.ariaLabel || question.a11y_input_ariaLabel\" [attr.placeholder]=\"otherPlaceholder\" \n  [value]=\"otherValue\"\n  [style.resize]=\"question.resizeStyle\"\n  [disabled]=\"question.isInputReadOnly\"\n  (change)=\"onOtherValueChange($event)\"\n  (input)=\"onOtherValueInput($event)\"\n  [class]=\"question.cssClasses.other\">\n</textarea>\n<div *ngIf=\"question.isReadOnlyRenderDiv()\">{{ otherValue }}</div>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SurveyCommentOtherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurveyCommentOtherComponent, selector: "sv-ng-comment-other, '[sv-ng-comment-other]'", inputs: { question: "question" }, ngImport: i0, template: "<textarea *ngIf=\"!question.isReadOnlyRenderDiv()\" [id]=\"otherId\" [attr.maxlength]=\"question.getOthersMaxLength()\"  [attr.aria-required]=\"question.ariaRequired || question.a11y_input_ariaRequired\" [attr.aria-label]=\"question.ariaLabel || question.a11y_input_ariaLabel\" [attr.placeholder]=\"otherPlaceholder\" \n  [value]=\"otherValue\"\n  [style.resize]=\"question.resizeStyle\"\n  [disabled]=\"question.isInputReadOnly\"\n  (change)=\"onOtherValueChange($event)\"\n  (input)=\"onOtherValueInput($event)\"\n  (compositionupdate)=\"onCompositionUpdateOtherValue($event)\"\n  [class]=\"question.cssClasses.other\">\n</textarea>\n<div *ngIf=\"question.isReadOnlyRenderDiv()\">{{ otherValue }}</div>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurveyCommentOtherComponent, decorators: [{
             type: Component,
             args: [{
@@ -2581,7 +2578,7 @@ class MatrixQuestionComponent extends QuestionAngular {
     }
 }
 MatrixQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MatrixQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MatrixQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixQuestionComponent, selector: "sv-ng-matrix-question", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"model.cssClasses.tableWrapper\" #contentElement>\n    <fieldset>\n      <legend class=\"sv-hidden\">{{model.locTitle.renderedHtml}}</legend>\n      <table [class]=\"model.getTableCss()\">\n        <thead *ngIf=\"model.showHeader\">\n          <tr>\n            <td *ngIf=\"model.hasRows\"></td>\n            <th\n              *ngFor=\"let column of model.visibleColumns\" [style]=\"{ minWidth: model.columnMinWidth, width: model.columnMinWidth }\" [class]=\"model.cssClasses.headerCell\">\n              <ng-template [component]=\"{ name: model.getColumnHeaderWrapperComponentName(column), data: { componentData: model.getColumnHeaderWrapperComponentData(column) } }\">\n                <sv-ng-string [model]=\"column.locText\"></sv-ng-string>\n              </ng-template>\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let row of model.visibleRows; trackBy: trackRowByFn \" [class]=\"row.rowClasses || undefined\">\n           <td [class]=\"model.cssClasses.rowTextCell\" [style]=\"{ minWidth: model.rowTitleWidth, width: model.rowTitleWidth }\" *ngIf=\"model.hasRows\">\n              <ng-template [component]=\"{ name: model.getRowHeaderWrapperComponentName($any(row)), data: { componentData: model.getRowHeaderWrapperComponentData($any(row)) } }\">\n                <sv-ng-string [model]=\"row.locText\"></sv-ng-string>\n              </ng-template>\n            </td>\n            <ng-container *ngIf=\"model.hasCellText\">\n              <td *ngFor=\"let column of model.visibleColumns\"\n                [class]=\"model.getItemClass(row, column)\"\n                (click)=\"onChange(row, column)\" [model]=\"model.getCellDisplayLocText(row.name, column)\" sv-ng-string>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"!model.hasCellText\">\n              <td\n              *ngFor=\"let column of model.visibleColumns; index as columnIndex; trackBy: trackColumnByFn\"\n              [attr.data-responsive-title]=\"column.locText.renderedHtml\"\n              [class]=\"model.cssClasses.cell\">\n                <label (mousedown)=\"model.onMouseDown()\" [class]=\"model.getItemClass(row, column)\">\n                  <input\n                    type=\"radio\"\n                    [class]=\"model.cssClasses.itemValue\"\n                    [name]=\"row.fullName\"\n                    [value]=\"column.value\"\n                    [checked]=\"row.value === column.value\"\n                    [disabled]=\"model.isInputReadOnly\"\n                    [attr.id]=\"model.inputId + '_' + row.name + '_' + columnIndex\"\n                    (change)=\"onChange(row, column)\"\n                    [attr.aria-required]=\"model.ariaRequired\"\n                    [attr.aria-label]=\"column.locText.renderedHtml\"\n                    [attr.aria-invalid]=\"model.ariaInvalid\"\n                    [attr.aria-describedby]=\"model.ariaDescribedBy\"\n                  />\n                  <span [class]=\"model.cssClasses.materialDecorator\">\n                    <svg *ngIf=\"model.itemSvgIcon\" [class]=\"model.cssClasses.itemDecorator\">\n                      <use [attr.xlink:href]=\"model.itemSvgIcon\"></use>\n                    </svg> \n                  </span>\n                  <span [visible]=\"model.isMobile\" [class]=\"model.cssClasses.cellResponsiveTitle\" [model]=\"column.locText\" sv-ng-string></span>\n                </label>\n              </td>\n            </ng-container>\n          </tr>\n        </tbody>\n      </table>\n    </fieldset>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
+MatrixQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatrixQuestionComponent, selector: "sv-ng-matrix-question", usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div [class]=\"model.cssClasses.tableWrapper\" #contentElement>\n    <fieldset>\n      <legend class=\"sv-hidden\">{{model.locTitle.renderedHtml}}</legend>\n      <table [class]=\"model.getTableCss()\">\n        <thead *ngIf=\"model.showHeader\">\n          <tr>\n            <td *ngIf=\"model.hasRows\"></td>\n            <th\n              *ngFor=\"let column of model.visibleColumns\" [style]=\"{ minWidth: model.columnMinWidth, width: model.columnMinWidth }\" [class]=\"model.cssClasses.headerCell\">\n              <ng-template [component]=\"{ name: model.getColumnHeaderWrapperComponentName(column), data: { componentData: model.getColumnHeaderWrapperComponentData(column) } }\">\n                <sv-ng-string [model]=\"column.locText\"></sv-ng-string>\n              </ng-template>\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let row of model.visibleRows; trackBy: trackRowByFn \" [class]=\"row.rowClasses || undefined\">\n           <td [class]=\"model.cssClasses.rowTextCell\" [style]=\"{ minWidth: model.rowTitleWidth, width: model.rowTitleWidth }\" *ngIf=\"model.hasRows\">\n              <ng-template [component]=\"{ name: model.getRowHeaderWrapperComponentName($any(row)), data: { componentData: model.getRowHeaderWrapperComponentData($any(row)) } }\">\n                <sv-ng-string [model]=\"row.locText\"></sv-ng-string>\n              </ng-template>\n            </td>\n            <ng-container *ngIf=\"model.hasCellText\">\n              <td *ngFor=\"let column of model.visibleColumns\"\n                [class]=\"model.getItemClass(row, column)\"\n                (click)=\"onChange(row, column)\" [model]=\"model.getCellDisplayLocText(row.name, column)\" sv-ng-string>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"!model.hasCellText\">\n              <td\n              *ngFor=\"let column of model.visibleColumns; index as columnIndex; trackBy: trackColumnByFn\"\n              [attr.data-responsive-title]=\"column.locText.renderedHtml\"\n              [class]=\"model.cssClasses.cell\">\n                <label (mousedown)=\"model.onMouseDown()\" [class]=\"model.getItemClass(row, column)\">\n                  <input\n                    type=\"radio\"\n                    [class]=\"model.cssClasses.itemValue\"\n                    [name]=\"row.fullName\"\n                    [value]=\"column.value\"\n                    [checked]=\"row.value === column.value\"\n                    [disabled]=\"model.isInputReadOnly\"\n                    [attr.id]=\"model.inputId + '_' + row.name + '_' + columnIndex\"\n                    (change)=\"onChange(row, column)\"\n                    [attr.aria-required]=\"model.ariaRequired\"\n                    [attr.aria-label]=\"model.getCellAriaLabel(row.locText.renderedHtml, column.locText.renderedHtml)\"\n                    [attr.aria-invalid]=\"model.ariaInvalid\"\n                    [attr.aria-describedby]=\"model.ariaDescribedBy\"\n                  />\n                  <span [class]=\"model.cssClasses.materialDecorator\">\n                    <svg *ngIf=\"model.itemSvgIcon\" [class]=\"model.cssClasses.itemDecorator\">\n                      <use [attr.xlink:href]=\"model.itemSvgIcon\"></use>\n                    </svg> \n                  </span>\n                  <span [visible]=\"model.isMobile\" [class]=\"model.cssClasses.cellResponsiveTitle\" [model]=\"column.locText\" sv-ng-string></span>\n                </label>\n              </td>\n            </ng-container>\n          </tr>\n        </tbody>\n      </table>\n    </fieldset>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MatrixQuestionComponent, decorators: [{
             type: Component,
             args: [{