survey-angular-ui 1.9.52 → 1.9.53

package/fesm2015/survey-angular-ui.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { TemplateRef, Component, ViewChild, Directive, Input, Injectable, ViewContainerRef, ElementRef, HostBinding, HostListener, Pipe, NgModule } from '@angular/core';
+import { TemplateRef, Component, ViewChild, Directive, Input, ViewContainerRef, Injectable, ElementRef, HostBinding, HostListener, Pipe, NgModule } from '@angular/core';
 import * as Survey from 'survey-core';
-import { createPopupModalViewModel, settings, createDialogOptions, SvgRegistry, TooltipManager, LocalizableString, PopupBaseViewModel, DropdownListModel, Helpers, DropdownMultiSelectListModel, RendererFactory, ButtonGroupItemModel, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, ActionDropdownViewModel, SurveyProgressModel, SurveyProgressButtonsModel, SurveyModel } from 'survey-core';
+import { createPopupModalViewModel, settings, createDialogOptions, SvgRegistry, TooltipManager, LocalizableString, createPopupViewModel, DropdownListModel, Helpers, DropdownMultiSelectListModel, RendererFactory, ButtonGroupItemModel, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, ActionDropdownViewModel, SurveyProgressModel, SurveyProgressButtonsModel, SurveyModel } from 'survey-core';
 import { DomPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
@@ -133,31 +133,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }]; } });
 
-class VisibleDirective {
-    constructor(el) {
-        this.el = el;
-    }
-    ngOnChanges(changes) {
-        changes["visible"].currentValue ? this.show() : this.hide();
-    }
-    hide() {
-        this.el.nativeElement.style.display = "none";
-    }
-    show() {
-        this.el.nativeElement.style.display = "";
-    }
-}
-VisibleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: VisibleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-VisibleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: VisibleDirective, selector: "[visible]", inputs: { visible: "visible" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: VisibleDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "[visible]"
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { visible: [{
-                type: Input
-            }] } });
-
 class AngularComponentFactory {
     constructor() {
         this.creatorHash = {};
@@ -234,7 +209,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 type: Input
             }] } });
 
-class PopupContainerComponent extends BaseAngular {
+class ActionComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+}
+ActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ActionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ActionComponent, selector: "sv-ng-action", inputs: { model: "model" }, viewQueries: [{ propertyName: "actionContent", first: true, predicate: ["actionContent"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "\n<ng-template #template>\n  <div [class]=\"model.getActionRootCss()\" [id]=\"model.id\">\n    <div class=\"sv-action__content\">\n      <ng-container *ngIf=\"model.needSeparator\">\n        <div class=\"sv-action-bar-separator\"></div>\n      </ng-container>\n      <ng-template [component]=\"{ name: model.component, data: { model }, default: 'sv-action-bar-item'}\"></ng-template>\n    </div>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ActionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "sv-ng-action", styles: [":host { display: none; }"], template: "\n<ng-template #template>\n  <div [class]=\"model.getActionRootCss()\" [id]=\"model.id\">\n    <div class=\"sv-action__content\">\n      <ng-container *ngIf=\"model.needSeparator\">\n        <div class=\"sv-action-bar-separator\"></div>\n      </ng-container>\n      <ng-template [component]=\"{ name: model.component, data: { model }, default: 'sv-action-bar-item'}\"></ng-template>\n    </div>\n  </div>\n</ng-template>" }]
+        }], propDecorators: { model: [{
+                type: Input
+            }], actionContent: [{
+                type: ViewChild,
+                args: ["actionContent", { read: ViewContainerRef, static: true }]
+            }] } });
+AngularComponentFactory.Instance.registerComponent("sv-action", ActionComponent);
+
+class ActionBarComponent extends BaseAngular {
+    getModel() {
+        return this.model;
+    }
+    get allowOnClick() {
+        return this.handleClick !== undefined ? this.handleClick : true;
+    }
+    onClick(event) {
+        if (this.allowOnClick) {
+            event.stopPropagation();
+        }
+    }
+    ngAfterViewInit() {
+        if (!!this.model.hasActions) {
+            this.model.initResponsivityManager(this.container.nativeElement);
+        }
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.model.resetResponsivityManager();
+    }
+}
+ActionBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ActionBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ActionBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: { model: "model", handleClick: "handleClick" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"model.hasActions\" [class]=\"model.getRootCss()\" (click)=\"onClick($event)\" #container>\n    <ng-container *ngFor=\"let action of model.renderedActions\">\n      <sv-ng-action [model]=\"action\"></sv-ng-action>\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: ActionComponent, selector: "sv-ng-action", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ActionBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "sv-action-bar, sv-ng-action-bar", styles: [":host { display: none }"], template: "<ng-template #template>\n  <div *ngIf=\"model.hasActions\" [class]=\"model.getRootCss()\" (click)=\"onClick($event)\" #container>\n    <ng-container *ngFor=\"let action of model.renderedActions\">\n      <sv-ng-action [model]=\"action\"></sv-ng-action>\n    </ng-container>\n  </div>\n</ng-template>" }]
+        }], propDecorators: { model: [{
+                type: Input
+            }], handleClick: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ["container"]
+            }] } });
+AngularComponentFactory.Instance.registerComponent("sv-action-bar", ActionBarComponent);
+
+class VisibleDirective {
+    constructor(el) {
+        this.el = el;
+    }
+    ngOnChanges(changes) {
+        changes["visible"].currentValue ? this.show() : this.hide();
+    }
+    hide() {
+        this.el.nativeElement.style.display = "none";
+    }
+    show() {
+        this.el.nativeElement.style.display = "";
+    }
+}
+VisibleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: VisibleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+VisibleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: VisibleDirective, selector: "[visible]", inputs: { visible: "visible" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: VisibleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[visible]"
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { visible: [{
+                type: Input
+            }] } });
+
+class PopupBaseContainerComponent extends BaseAngular {
     constructor(changeDetectorRef) {
         super(changeDetectorRef);
         this.prevIsVisible = false;
@@ -244,6 +299,18 @@ class PopupContainerComponent extends BaseAngular {
     getModel() {
         return this.model;
     }
+    get applyButtonText() {
+        const popupModalModel = this.model;
+        if (!popupModalModel)
+            return null;
+        return popupModalModel.applyButtonText;
+    }
+    apply() {
+        const popupModalModel = this.model;
+        if (!popupModalModel)
+            return;
+        popupModalModel.apply();
+    }
     onModelChanged() {
         this.changeDetectorRef.detectChanges();
     }
@@ -267,11 +334,11 @@ class PopupContainerComponent extends BaseAngular {
         super.afterUpdate();
     }
 }
-PopupContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PopupContainerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PopupContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: PopupContainerComponent, selector: "sv-ng-popup-container, '[sv-ng-popup-container]'", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<div class=\"sv-popup\" tabindex=\"-1\" [class]=\"model.styleClass\" [style.visibility]=\"isShow ? 'visible' : 'hidden'\" [visible]=\"model.isVisible\" (click)=\"model.clickOutside()\" (keydown)=\"model.onKeyDown($event)\">\n    <div class=\"sv-popup__container\" [style]=\"{ left: model.left, top: model.top, height: model.height, minWidth: model.minWidth, width: model.width }\">\n        <div class=\"sv-popup__shadow\">\n            <span *ngIf=\"model.showPointer\" class=\"sv-popup__pointer\" [style]=\"{ left: model.pointerTarget.left, top: model.pointerTarget.top }\"></span>\n            <div class=\"sv-popup__body-content\">\n                <div *ngIf=\"model.title\" class=\"sv-popup__body-header\">{{ model.title }}</div>\n                <div class=\"sv-popup__scrolling-content\">\n                    <div class=\"sv-popup__content\">\n                        <ng-template [component]=\"{ name: model.contentComponentName, data: model.contentComponentData }\"></ng-template>\n                    </div>\n                </div>\n                <div *ngIf=\"model.showFooter\" class=\"sv-popup__body-footer\">\n                    <button type=\"button\" (click)=\"model.cancel()\"\n                        class=\"sv-popup__body-footer-item sv-popup__button sv-popup__button--cancel\">{{ model.cancelButtonText }}</button>\n                    <button type=\"button\" *ngIf=\"model.isModal\" (click)=\"model.apply()\" \n                    class=\"sv-popup__body-footer-item sv-popup__button sv-popup__button--apply\">{{ model.applyButtonText }}</button>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>", directives: [{ type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PopupContainerComponent, decorators: [{
+PopupBaseContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PopupBaseContainerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PopupBaseContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: PopupBaseContainerComponent, selector: "sv-ng-popup-container, '[sv-ng-popup-container]'", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<div class=\"sv-popup\" tabindex=\"-1\" [class]=\"model.styleClass\" [style.visibility]=\"isShow ? 'visible' : 'hidden'\" [visible]=\"model.isVisible\" (click)=\"model.clickOutside()\" (keydown)=\"model.onKeyDown($event)\">\n    <div class=\"sv-popup__container\" [style]=\"{ left: model.left, top: model.top, height: model.height, minWidth: model.minWidth, width: model.width }\">\n        <div class=\"sv-popup__shadow\">\n            <ng-container *ngIf=\"model.showHeader\">\n                <ng-template [component]=\"{ name: model.popupHeaderTemplate, data: { model: model } }\"></ng-template>\n            </ng-container>\n            <div class=\"sv-popup__body-content\">\n                <div *ngIf=\"model.title\" class=\"sv-popup__body-header\">{{ model.title }}</div>\n                <div class=\"sv-popup__scrolling-content\">\n                    <div class=\"sv-popup__content\">\n                        <ng-template [component]=\"{ name: model.contentComponentName, data: model.contentComponentData }\"></ng-template>\n                    </div>\n                </div>\n                <div *ngIf=\"model.showFooter\" class=\"sv-popup__body-footer\">\n                    <sv-ng-action-bar [model]=\"model.footerToolbar\"></sv-ng-action-bar>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>", components: [{ type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: ["model", "handleClick"] }], directives: [{ type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PopupBaseContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: "sv-ng-popup-container, '[sv-ng-popup-container]'", template: "<div class=\"sv-popup\" tabindex=\"-1\" [class]=\"model.styleClass\" [style.visibility]=\"isShow ? 'visible' : 'hidden'\" [visible]=\"model.isVisible\" (click)=\"model.clickOutside()\" (keydown)=\"model.onKeyDown($event)\">\n    <div class=\"sv-popup__container\" [style]=\"{ left: model.left, top: model.top, height: model.height, minWidth: model.minWidth, width: model.width }\">\n        <div class=\"sv-popup__shadow\">\n            <span *ngIf=\"model.showPointer\" class=\"sv-popup__pointer\" [style]=\"{ left: model.pointerTarget.left, top: model.pointerTarget.top }\"></span>\n            <div class=\"sv-popup__body-content\">\n                <div *ngIf=\"model.title\" class=\"sv-popup__body-header\">{{ model.title }}</div>\n                <div class=\"sv-popup__scrolling-content\">\n                    <div class=\"sv-popup__content\">\n                        <ng-template [component]=\"{ name: model.contentComponentName, data: model.contentComponentData }\"></ng-template>\n                    </div>\n                </div>\n                <div *ngIf=\"model.showFooter\" class=\"sv-popup__body-footer\">\n                    <button type=\"button\" (click)=\"model.cancel()\"\n                        class=\"sv-popup__body-footer-item sv-popup__button sv-popup__button--cancel\">{{ model.cancelButtonText }}</button>\n                    <button type=\"button\" *ngIf=\"model.isModal\" (click)=\"model.apply()\" \n                    class=\"sv-popup__body-footer-item sv-popup__button sv-popup__button--apply\">{{ model.applyButtonText }}</button>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>" }]
+            args: [{ selector: "sv-ng-popup-container, '[sv-ng-popup-container]'", template: "<div class=\"sv-popup\" tabindex=\"-1\" [class]=\"model.styleClass\" [style.visibility]=\"isShow ? 'visible' : 'hidden'\" [visible]=\"model.isVisible\" (click)=\"model.clickOutside()\" (keydown)=\"model.onKeyDown($event)\">\n    <div class=\"sv-popup__container\" [style]=\"{ left: model.left, top: model.top, height: model.height, minWidth: model.minWidth, width: model.width }\">\n        <div class=\"sv-popup__shadow\">\n            <ng-container *ngIf=\"model.showHeader\">\n                <ng-template [component]=\"{ name: model.popupHeaderTemplate, data: { model: model } }\"></ng-template>\n            </ng-container>\n            <div class=\"sv-popup__body-content\">\n                <div *ngIf=\"model.title\" class=\"sv-popup__body-header\">{{ model.title }}</div>\n                <div class=\"sv-popup__scrolling-content\">\n                    <div class=\"sv-popup__content\">\n                        <ng-template [component]=\"{ name: model.contentComponentName, data: model.contentComponentData }\"></ng-template>\n                    </div>\n                </div>\n                <div *ngIf=\"model.showFooter\" class=\"sv-popup__body-footer\">\n                    <sv-ng-action-bar [model]=\"model.footerToolbar\"></sv-ng-action-bar>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { model: [{
                 type: Input
             }] } });
@@ -284,7 +351,7 @@ class PopupService {
     }
     createComponent(popupViewModel) {
         const portalHost = new DomPortalOutlet(popupViewModel.container, this.componentFactoryResolver, this.applicationRef, this.injector);
-        const portal = new ComponentPortal(PopupContainerComponent);
+        const portal = new ComponentPortal(PopupBaseContainerComponent);
         const componentRef = portalHost.attach(portal);
         popupViewModel.container = popupViewModel.container.children[0];
         componentRef.instance.model = popupViewModel;
@@ -351,61 +418,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 type: Input
             }] } });
 
-class ActionComponent extends BaseAngular {
-    getModel() {
-        return this.model;
-    }
-}
-ActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ActionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ActionComponent, selector: "sv-ng-action", inputs: { model: "model" }, viewQueries: [{ propertyName: "actionContent", first: true, predicate: ["actionContent"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "\n<ng-template #template>\n  <div [class]=\"model.getActionRootCss()\" [id]=\"model.id\">\n    <div class=\"sv-action__content\">\n      <ng-container *ngIf=\"model.needSeparator\">\n        <div class=\"sv-action-bar-separator\"></div>\n      </ng-container>\n      <ng-template [component]=\"{ name: model.component, data: { model }, default: 'sv-action-bar-item'}\"></ng-template>\n    </div>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ActionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "sv-ng-action", styles: [":host { display: none; }"], template: "\n<ng-template #template>\n  <div [class]=\"model.getActionRootCss()\" [id]=\"model.id\">\n    <div class=\"sv-action__content\">\n      <ng-container *ngIf=\"model.needSeparator\">\n        <div class=\"sv-action-bar-separator\"></div>\n      </ng-container>\n      <ng-template [component]=\"{ name: model.component, data: { model }, default: 'sv-action-bar-item'}\"></ng-template>\n    </div>\n  </div>\n</ng-template>" }]
-        }], propDecorators: { model: [{
-                type: Input
-            }], actionContent: [{
-                type: ViewChild,
-                args: ["actionContent", { read: ViewContainerRef, static: true }]
-            }] } });
-AngularComponentFactory.Instance.registerComponent("sv-action", ActionComponent);
-
-class ActionBarComponent extends BaseAngular {
-    getModel() {
-        return this.model;
-    }
-    get allowOnClick() {
-        return this.handleClick !== undefined ? this.handleClick : true;
-    }
-    onClick(event) {
-        if (this.allowOnClick) {
-            event.stopPropagation();
-        }
-    }
-    ngAfterViewInit() {
-        if (!!this.model.hasActions) {
-            this.model.initResponsivityManager(this.container.nativeElement);
-        }
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this.model.resetResponsivityManager();
-    }
-}
-ActionBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ActionBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ActionBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ActionBarComponent, selector: "sv-action-bar, sv-ng-action-bar", inputs: { model: "model", handleClick: "handleClick" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div *ngIf=\"model.hasActions\" [class]=\"model.getRootCss()\" (click)=\"onClick($event)\" #container>\n    <ng-container *ngFor=\"let action of model.renderedActions\">\n      <sv-ng-action [model]=\"action\"></sv-ng-action>\n    </ng-container>\n  </div>\n</ng-template>", styles: [":host{display:none}\n"], components: [{ type: ActionComponent, selector: "sv-ng-action", inputs: ["model"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ActionBarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "sv-action-bar, sv-ng-action-bar", styles: [":host { display: none }"], template: "<ng-template #template>\n  <div *ngIf=\"model.hasActions\" [class]=\"model.getRootCss()\" (click)=\"onClick($event)\" #container>\n    <ng-container *ngFor=\"let action of model.renderedActions\">\n      <sv-ng-action [model]=\"action\"></sv-ng-action>\n    </ng-container>\n  </div>\n</ng-template>" }]
-        }], propDecorators: { model: [{
-                type: Input
-            }], handleClick: [{
-                type: Input
-            }], container: [{
-                type: ViewChild,
-                args: ["container"]
-            }] } });
-AngularComponentFactory.Instance.registerComponent("sv-action-bar", ActionBarComponent);
-
 class SurveyStringComponent {
 }
 SurveyStringComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SurveyStringComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -472,6 +484,15 @@ class ElementComponent extends BaseAngular {
         }
         return this.elementComponentName;
     }
+    get rootStyle() {
+        //use this if to check if cssClassses are calculated and allowRootStyle flag was set
+        if (!!this.model.cssClasses) {
+            return this.model.rootStyle;
+        }
+        else {
+            return {};
+        }
+    }
     get componentData() {
         const survey = this.surveyModel;
         let data;
@@ -488,10 +509,10 @@ class ElementComponent extends BaseAngular {
     }
 }
 ElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ElementComponent, selector: "sv-ng-element", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n    <div [class]=\"model.cssClasses.questionWrapper\" [style]=\"model.rootStyle\" (focusin)=\"model.focusIn()\">\n        <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n    </div>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+ElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ElementComponent, selector: "sv-ng-element", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n    <div [class]=\"model.cssClasses.questionWrapper\" [style]=\"rootStyle\" (focusin)=\"model.focusIn()\">\n        <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n    </div>\n</ng-template>", styles: [":host{display:none}\n"], directives: [{ type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: "sv-ng-element", template: "<ng-template #template>\n    <div [class]=\"model.cssClasses.questionWrapper\" [style]=\"model.rootStyle\" (focusin)=\"model.focusIn()\">\n        <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n    </div>\n</ng-template>", styles: [":host{display:none}\n"] }]
+            args: [{ selector: "sv-ng-element", template: "<ng-template #template>\n    <div [class]=\"model.cssClasses.questionWrapper\" [style]=\"rootStyle\" (focusin)=\"model.focusIn()\">\n        <ng-template [component]=\"{ name: componentName, data: componentData }\"></ng-template>\n    </div>\n</ng-template>", styles: [":host{display:none}\n"] }]
         }], propDecorators: { model: [{
                 type: Input
             }] } });
@@ -750,12 +771,24 @@ class QuestionComponent extends EmbeddedViewContentComponent {
         }
         return this.model.getComponentName();
     }
+    getQuestionContentWrapperComponentName() {
+        return this.model.survey.getQuestionContentWrapperComponentName(this.model) || this.getComponentName();
+    }
+    getQuestionContentWrapperComponentData() {
+        return {
+            componentName: this.getComponentName(),
+            componentData: {
+                model: this.model,
+                data: this.model.survey.getElementWrapperComponentData(this.model)
+            }
+        };
+    }
 }
 QuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: QuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-QuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: QuestionComponent, selector: "sv-ng-question", inputs: { model: "model" }, viewQueries: [{ propertyName: "rootEl", first: true, predicate: ["elementContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div #elementContainer [class]=\"model.getRootCss()\" [style]=\"{ paddingLeft: model.paddingLeft, paddingRight: model.paddingRight }\" [id]=\"model.id\" [attr.data-name]=\"model.name\" [attr.role]=\"model.ariaRole\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-labelledby]=\"model.hasTitle ? model.ariaTitleId : null\">\n    <div *ngIf=\"model.showErrorsAboveQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n    <div [element]=\"model\" *ngIf=\"model.hasTitleOnLeftTop\" sv-ng-element-header></div>\n    <div [class]=\"model.cssContent\" role=\"presentation\" [visible]=\"!model.isCollapsed\">\n      <div *ngIf=\"model.showErrorOnTop && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n      <ng-template [component]=\"{ name: getComponentName(), data: { model }, default: 'skeleton-question' }\" ></ng-template>\n      <div *ngIf=\"model.hasComment\" [class]=\"model.cssClasses.formGroup\">\n        <div>{{ model.commentText }}</div>\n        <div [question]=\"model\" sv-ng-comment></div>\n      </div>\n      <div *ngIf=\"model.showErrorOnBottom && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n      <div *ngIf=\"model.isErrorsModeTooltip && model.hasVisibleErrors\" [element]=\"model\" [location]=\"'tooltip'\" sv-ng-errors></div>\n    </div>\n    <div [element]=\"model\" *ngIf=\"model.hasTitleOnBottom\" sv-ng-element-header></div>\n    <div *ngIf=\"model.showErrorsBelowQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></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: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: ["question"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
+QuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: QuestionComponent, selector: "sv-ng-question", inputs: { model: "model" }, viewQueries: [{ propertyName: "rootEl", first: true, predicate: ["elementContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n  <div #elementContainer [class]=\"model.getRootCss()\" [style]=\"{ paddingLeft: model.paddingLeft, paddingRight: model.paddingRight }\" [id]=\"model.id\" [attr.data-name]=\"model.name\" [attr.role]=\"model.ariaRole\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-labelledby]=\"model.hasTitle ? model.ariaTitleId : null\">\n    <div *ngIf=\"model.showErrorsAboveQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n    <div [element]=\"model\" *ngIf=\"model.hasTitleOnLeftTop\" sv-ng-element-header></div>\n    <div [class]=\"model.cssContent\" role=\"presentation\" [visible]=\"!model.isCollapsed\">\n      <div *ngIf=\"model.showErrorOnTop && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n      <ng-template [component]=\"{ name: getQuestionContentWrapperComponentName(), data: getQuestionContentWrapperComponentData(), default: 'skeleton-question' }\">\n      </ng-template>\n      <div *ngIf=\"model.hasComment\" [class]=\"model.cssClasses.formGroup\">\n        <div>{{ model.commentText }}</div>\n        <div [question]=\"model\" sv-ng-comment></div>\n      </div>\n      <div *ngIf=\"model.showErrorOnBottom && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n      <div *ngIf=\"model.isErrorsModeTooltip && model.hasVisibleErrors\" [element]=\"model\" [location]=\"'tooltip'\" sv-ng-errors></div>\n    </div>\n    <div [element]=\"model\" *ngIf=\"model.hasTitleOnBottom\" sv-ng-element-header></div>\n    <div *ngIf=\"model.showErrorsBelowQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></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: SurveyCommentComponent, selector: "sv-ng-comment, '[sv-ng-comment]'", inputs: ["question"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: VisibleDirective, selector: "[visible]", inputs: ["visible"] }, { type: DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: QuestionComponent, decorators: [{
             type: Component,
-            args: [{ selector: "sv-ng-question", template: "<ng-template #template>\n  <div #elementContainer [class]=\"model.getRootCss()\" [style]=\"{ paddingLeft: model.paddingLeft, paddingRight: model.paddingRight }\" [id]=\"model.id\" [attr.data-name]=\"model.name\" [attr.role]=\"model.ariaRole\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-labelledby]=\"model.hasTitle ? model.ariaTitleId : null\">\n    <div *ngIf=\"model.showErrorsAboveQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n    <div [element]=\"model\" *ngIf=\"model.hasTitleOnLeftTop\" sv-ng-element-header></div>\n    <div [class]=\"model.cssContent\" role=\"presentation\" [visible]=\"!model.isCollapsed\">\n      <div *ngIf=\"model.showErrorOnTop && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n      <ng-template [component]=\"{ name: getComponentName(), data: { model }, default: 'skeleton-question' }\" ></ng-template>\n      <div *ngIf=\"model.hasComment\" [class]=\"model.cssClasses.formGroup\">\n        <div>{{ model.commentText }}</div>\n        <div [question]=\"model\" sv-ng-comment></div>\n      </div>\n      <div *ngIf=\"model.showErrorOnBottom && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n      <div *ngIf=\"model.isErrorsModeTooltip && model.hasVisibleErrors\" [element]=\"model\" [location]=\"'tooltip'\" sv-ng-errors></div>\n    </div>\n    <div [element]=\"model\" *ngIf=\"model.hasTitleOnBottom\" sv-ng-element-header></div>\n    <div *ngIf=\"model.showErrorsBelowQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n  </div>\n</ng-template>" }]
+            args: [{ selector: "sv-ng-question", template: "<ng-template #template>\n  <div #elementContainer [class]=\"model.getRootCss()\" [style]=\"{ paddingLeft: model.paddingLeft, paddingRight: model.paddingRight }\" [id]=\"model.id\" [attr.data-name]=\"model.name\" [attr.role]=\"model.ariaRole\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-labelledby]=\"model.hasTitle ? model.ariaTitleId : null\">\n    <div *ngIf=\"model.showErrorsAboveQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n    <div [element]=\"model\" *ngIf=\"model.hasTitleOnLeftTop\" sv-ng-element-header></div>\n    <div [class]=\"model.cssContent\" role=\"presentation\" [visible]=\"!model.isCollapsed\">\n      <div *ngIf=\"model.showErrorOnTop && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n      <ng-template [component]=\"{ name: getQuestionContentWrapperComponentName(), data: getQuestionContentWrapperComponentData(), default: 'skeleton-question' }\">\n      </ng-template>\n      <div *ngIf=\"model.hasComment\" [class]=\"model.cssClasses.formGroup\">\n        <div>{{ model.commentText }}</div>\n        <div [question]=\"model\" sv-ng-comment></div>\n      </div>\n      <div *ngIf=\"model.showErrorOnBottom && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n      <div *ngIf=\"model.isErrorsModeTooltip && model.hasVisibleErrors\" [element]=\"model\" [location]=\"'tooltip'\" sv-ng-errors></div>\n    </div>\n    <div [element]=\"model\" *ngIf=\"model.hasTitleOnBottom\" sv-ng-element-header></div>\n    <div *ngIf=\"model.showErrorsBelowQuestion && model.hasVisibleErrors\" [element]=\"model\" sv-ng-errors></div>\n  </div>\n</ng-template>" }]
         }], propDecorators: { model: [{
                 type: Input
             }], rootEl: [{
@@ -768,11 +801,16 @@ class StringViewerComponent {
     constructor(changeDetectorRef) {
         this.changeDetectorRef = changeDetectorRef;
     }
-    ngOnChanges(changes) {
-        const currentValue = changes["model"].currentValue;
-        const previousValue = changes["model"].previousValue;
-        currentValue.onChanged = () => { this.changeDetectorRef.detectChanges(); };
-        !!previousValue && this.clearOnChanged(previousValue);
+    ngDoCheck() {
+        if (this.model !== this.previousModel) {
+            if (!!this.previousModel) {
+                this.clearOnChanged(this.previousModel);
+            }
+            if (!!this.model) {
+                this.model.onChanged = () => { this.changeDetectorRef.detectChanges(); };
+            }
+            this.previousModel = this.model;
+        }
     }
     clearOnChanged(model) {
         model.onChanged = () => { };
@@ -782,7 +820,7 @@ class StringViewerComponent {
     }
 }
 StringViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StringViewerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-StringViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: StringViewerComponent, selector: "sv-ng-string-viewer, string-viewer, '[sv-ng-string-viewer]'", inputs: { model: "model" }, usesOnChanges: true, ngImport: i0, template: "<span *ngIf=\"!model.hasHtml\" class=\"sv-string-viewer\">{{model.renderedHtml}}</span>\n<span *ngIf=\"model.hasHtml\" class=\"sv-string-viewer\" [innerHtml]=\"model.renderedHtml\"></span>", styles: [""], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+StringViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: StringViewerComponent, selector: "sv-ng-string-viewer, string-viewer, '[sv-ng-string-viewer]'", inputs: { model: "model" }, ngImport: i0, template: "<span *ngIf=\"!model.hasHtml\" class=\"sv-string-viewer\">{{model.renderedHtml}}</span>\n<span *ngIf=\"model.hasHtml\" class=\"sv-string-viewer\" [innerHtml]=\"model.renderedHtml\"></span>", styles: [""], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StringViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-string-viewer, string-viewer, '[sv-ng-string-viewer]'", template: "<span *ngIf=\"!model.hasHtml\" class=\"sv-string-viewer\">{{model.renderedHtml}}</span>\n<span *ngIf=\"model.hasHtml\" class=\"sv-string-viewer\" [innerHtml]=\"model.renderedHtml\"></span>", styles: [""] }]
@@ -791,6 +829,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             }] } });
 AngularComponentFactory.Instance.registerComponent(LocalizableString.defaultRenderer, StringViewerComponent);
 
+class PopupPointerComponent extends BaseAngular {
+    get popupModel() {
+        return this.model;
+    }
+    getModel() {
+        return this.model;
+    }
+}
+PopupPointerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PopupPointerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PopupPointerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: PopupPointerComponent, selector: "sv-ng-popup-pointer, '[sv-ng-popup-pointer]'", inputs: { model: "model" }, usesInheritance: true, ngImport: i0, template: "<span class=\"sv-popup__pointer\" [style]=\"{ left: popupModel.pointerTarget.left, top: popupModel.pointerTarget.top }\"></span>" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PopupPointerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "sv-ng-popup-pointer, '[sv-ng-popup-pointer]'", template: "<span class=\"sv-popup__pointer\" [style]=\"{ left: popupModel.pointerTarget.left, top: popupModel.pointerTarget.top }\"></span>" }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+AngularComponentFactory.Instance.registerComponent("popup-pointer", PopupPointerComponent);
+
 class PopupComponent extends BaseAngular {
     constructor(viewContainerRef, changeDetectorRef, popupService) {
         super(changeDetectorRef, viewContainerRef);
@@ -801,7 +857,7 @@ class PopupComponent extends BaseAngular {
     }
     ngOnInit() {
         var _a;
-        this.model = new PopupBaseViewModel(this.popupModel, (_a = this.viewContainerRef) === null || _a === void 0 ? void 0 : _a.element.nativeElement.parentElement);
+        this.model = createPopupViewModel(this.popupModel, (_a = this.viewContainerRef) === null || _a === void 0 ? void 0 : _a.element.nativeElement.parentElement);
         this.model.initializePopupContainer();
         this.portalHost = this.popupService.createComponent(this.model);
     }
@@ -842,7 +898,7 @@ class SvgIconComponent {
     }
     createSvg() {
         if (!!this.iconName) {
-            Survey.createSvg(this.size, this.width, this.height, this.iconName, this.viewContaierRef.element.nativeElement);
+            Survey.createSvg(this.size, this.width, this.height, this.iconName, this.viewContaierRef.element.nativeElement, this.title);
         }
     }
     get rootClass() {
@@ -949,10 +1005,10 @@ class DropdownComponent extends BaseAngular {
     }
 }
 DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (click)=\"click($event)\" (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        <div [class]=\"model.cssClasses.controlValue\">\n            <ng-container *ngIf=\"model.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.filterString\" [class]=\"model.cssClasses.filterStringInput\"\n            [attr.id]=\"model.getInputId()\"\n            [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : -1\"\n            [attr.disabled]=\"model.isInputReadOnly ? true : null\"\n            [attr.placeholder]=\"model.readOnlyText\" [attr.readonly]=\"!dropdownModel.searchEnabled ? true : null\" \n            (change)=\"inputChange($event)\" (blur)=\"blur($event)\" />\n        </div>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\"\n            [class]=\"model.cssClasses.cleanButton\" (click)=\"clear($event)\" [visible]=\"!model.isEmpty()\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.cleanButtonCaption\"\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>", 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.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: "13.0.3", 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\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (click)=\"click($event)\" (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        <div [class]=\"model.cssClasses.controlValue\">\n            <ng-container *ngIf=\"model.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.filterString\" [class]=\"model.cssClasses.filterStringInput\"\n            [attr.id]=\"model.getInputId()\"\n            [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : -1\"\n            [attr.disabled]=\"model.isInputReadOnly ? true : null\"\n            [attr.placeholder]=\"model.readOnlyText\" [attr.readonly]=\"!dropdownModel.searchEnabled ? true : null\" \n            (change)=\"inputChange($event)\" (blur)=\"blur($event)\" />\n        </div>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\"\n            [class]=\"model.cssClasses.cleanButton\" (click)=\"clear($event)\" [visible]=\"!model.isEmpty()\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.cleanCaption\"\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>", 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.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: "13.0.3", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: "sv-ng-dropdown, '[sv-ng-dropdown]'", template: "<div [class]=\"model.cssClasses.selectWrapper\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (click)=\"click($event)\" (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        <div [class]=\"model.cssClasses.controlValue\">\n            <ng-container *ngIf=\"model.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.filterString\" [class]=\"model.cssClasses.filterStringInput\"\n            [attr.id]=\"model.getInputId()\"\n            [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : -1\"\n            [attr.disabled]=\"model.isInputReadOnly ? true : null\"\n            [attr.placeholder]=\"model.readOnlyText\" [attr.readonly]=\"!dropdownModel.searchEnabled ? true : null\" \n            (change)=\"inputChange($event)\" (blur)=\"blur($event)\" />\n        </div>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\"\n            [class]=\"model.cssClasses.cleanButton\" (click)=\"clear($event)\" [visible]=\"!model.isEmpty()\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.cleanButtonCaption\"\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>" }]
+            args: [{ selector: "sv-ng-dropdown, '[sv-ng-dropdown]'", template: "<div [class]=\"model.cssClasses.selectWrapper\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (click)=\"click($event)\" (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        <div [class]=\"model.cssClasses.controlValue\">\n            <ng-container *ngIf=\"model.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.filterString\" [class]=\"model.cssClasses.filterStringInput\"\n            [attr.id]=\"model.getInputId()\"\n            [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : -1\"\n            [attr.disabled]=\"model.isInputReadOnly ? true : null\"\n            [attr.placeholder]=\"model.readOnlyText\" [attr.readonly]=\"!dropdownModel.searchEnabled ? true : null\" \n            (change)=\"inputChange($event)\" (blur)=\"blur($event)\" />\n        </div>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\"\n            [class]=\"model.cssClasses.cleanButton\" (click)=\"clear($event)\" [visible]=\"!model.isEmpty()\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.cleanCaption\"\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>" }]
         }], propDecorators: { model: [{
                 type: Input
             }], inputElementRef: [{
@@ -1030,10 +1086,10 @@ class TagboxComponent {
     }
 }
 TagboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TagboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TagboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: TagboxComponent, selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.cssClasses.selectWrapper\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (click)=\"click($event)\" (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        <div [class]=\"model.cssClasses.controlValue\">\n            <ng-container *ngIf=\"!model.isEmpty()\">\n                <sv-ng-tagbox-item *ngFor=\"let item of model.selectedItems\" [item]=\"item\" [question]=\"model\">\n                </sv-ng-tagbox-item>\n            </ng-container>\n            <ng-template [component]=\"{ name: 'sv-tagbox-filter', data: { model: dropdownModel, question: model } }\"></ng-template>\n        </div>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\" [class]=\"model.cssClasses.cleanButton\"\n            (click)=\"clear($event)\" [visible]=\"!model.isEmpty()\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.cleanButtonCaption\"\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>", 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"] }], 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: "13.0.3", type: TagboxComponent, selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.cssClasses.selectWrapper\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (click)=\"click($event)\" (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        <div [class]=\"model.cssClasses.controlValue\">\n            <ng-container *ngIf=\"!model.isEmpty()\">\n                <sv-ng-tagbox-item *ngFor=\"let item of model.selectedChoices\" [item]=\"item\" [question]=\"model\">\n                </sv-ng-tagbox-item>\n            </ng-container>\n            <ng-template [component]=\"{ name: 'sv-tagbox-filter', data: { model: dropdownModel, question: model } }\"></ng-template>\n        </div>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\" [class]=\"model.cssClasses.cleanButton\"\n            (click)=\"clear($event)\" [visible]=\"!model.isEmpty()\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.cleanCaption\"\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>", 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"] }], 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: "13.0.3", ngImport: i0, type: TagboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", template: "<div [class]=\"model.cssClasses.selectWrapper\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (click)=\"click($event)\" (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        <div [class]=\"model.cssClasses.controlValue\">\n            <ng-container *ngIf=\"!model.isEmpty()\">\n                <sv-ng-tagbox-item *ngFor=\"let item of model.selectedItems\" [item]=\"item\" [question]=\"model\">\n                </sv-ng-tagbox-item>\n            </ng-container>\n            <ng-template [component]=\"{ name: 'sv-tagbox-filter', data: { model: dropdownModel, question: model } }\"></ng-template>\n        </div>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\" [class]=\"model.cssClasses.cleanButton\"\n            (click)=\"clear($event)\" [visible]=\"!model.isEmpty()\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.cleanButtonCaption\"\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>" }]
+            args: [{ selector: "sv-ng-tagbox, '[sv-ng-tagbox]'", template: "<div [class]=\"model.cssClasses.selectWrapper\">\n    <div *ngIf=\"!model.isReadOnly\" [attr.tabindex]=\"dropdownModel.inputReadOnly ? null : 0\" [class]=\"model.getControlClass()\"\n        [attr.disabled]=\"model.isInputReadOnly ? true : null\" (click)=\"click($event)\" (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        <div [class]=\"model.cssClasses.controlValue\">\n            <ng-container *ngIf=\"!model.isEmpty()\">\n                <sv-ng-tagbox-item *ngFor=\"let item of model.selectedChoices\" [item]=\"item\" [question]=\"model\">\n                </sv-ng-tagbox-item>\n            </ng-container>\n            <ng-template [component]=\"{ name: 'sv-tagbox-filter', data: { model: dropdownModel, question: model } }\"></ng-template>\n        </div>\n        <div *ngIf=\"(model.allowClear && model.cssClasses.cleanButtonIconId)\" [class]=\"model.cssClasses.cleanButton\"\n            (click)=\"clear($event)\" [visible]=\"!model.isEmpty()\">\n            <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->\n            <!-- /ko -->\n            <svg [iconName]=\"model.cssClasses.cleanButtonIconId\" [partCss]=\"model.cssClasses.cleanButtonSvg\" [title]=\"model.cleanCaption\"\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>" }]
         }], propDecorators: { model: [{
                 type: Input
             }] } });
@@ -1364,14 +1420,14 @@ AngularComponentFactory.Instance.registerComponent("rating-question", RatingQues
 
 class BooleanQuestionComponent extends QuestionAngular {
     onChange(event) {
-        this.model.checkedValue = event.target.value;
+        this.model.booleanValue = event.target.value;
     }
 }
 BooleanQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: BooleanQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-BooleanQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: BooleanQuestionComponent, selector: "sv-ng-boolean-question", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.root\" (keydown)=\"model.onKeyDownCore($event)\" #contentElement>\n    <label [class]=\"model.getItemCss()\">\n      <input\n        type=\"checkbox\"\n        [attr.name]=\"model.name\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\"\n        [class]=\"model.cssClasses.control\" [disabled]=\"model.isInputReadOnly\"  [indeterminate]=\"model.isIndeterminate\" [value]=\"model.checkedValue\" [(ngModel)]=\"model.checkedValue\" />\n      <span [class]=\"model.getLabelCss(false)\" (click)=\"model.onLabelClick($event, false)\" [model]=\"model.locLabelFalse\" sv-ng-string></span>\n      <div [class]=\"model.cssClasses.switch\" (click)=\"model.onSwitchClickModel($event)\">\n        <span [class]=\"model.cssClasses.slider\">\n            <span *ngIf=\"model.cssClasses.sliderText && model.isDeterminated\" [class]=\"model.cssClasses.sliderText\" [model]=\"model.getCheckedLabel()\" sv-ng-string></span>\n        </span>\n      </div>\n      <span [class]=\"model.getLabelCss(true)\" (click)=\"model.onLabelClick($event, true)\" [model]=\"model.locLabelTrue\"  sv-ng-string></span>\n    </label>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+BooleanQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: BooleanQuestionComponent, selector: "sv-ng-boolean-question", usesInheritance: true, ngImport: i0, template: "<div [class]=\"model.cssClasses.root\" (keydown)=\"model.onKeyDownCore($event)\" #contentElement>\n    <label [class]=\"model.getItemCss()\">\n      <input\n        type=\"checkbox\"\n        [attr.name]=\"model.name\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\"\n        [class]=\"model.cssClasses.control\" [disabled]=\"model.isInputReadOnly\"  [indeterminate]=\"model.isIndeterminate\" [value]=\"model.booleanValue\" [(ngModel)]=\"model.booleanValue\" />\n      <span [class]=\"model.getLabelCss(false)\" (click)=\"model.onLabelClick($event, false)\" [model]=\"model.locLabelFalse\" sv-ng-string></span>\n      <div [class]=\"model.cssClasses.switch\" (click)=\"model.onSwitchClickModel($event)\">\n        <span [class]=\"model.cssClasses.slider\">\n            <span *ngIf=\"model.cssClasses.sliderText && model.isDeterminated\" [class]=\"model.cssClasses.sliderText\" [model]=\"model.getCheckedLabel()\" sv-ng-string></span>\n        </span>\n      </div>\n      <span [class]=\"model.getLabelCss(true)\" (click)=\"model.onLabelClick($event, true)\" [model]=\"model.locLabelTrue\"  sv-ng-string></span>\n    </label>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: BooleanQuestionComponent, decorators: [{
             type: Component,
-            args: [{ selector: "sv-ng-boolean-question", template: "<div [class]=\"model.cssClasses.root\" (keydown)=\"model.onKeyDownCore($event)\" #contentElement>\n    <label [class]=\"model.getItemCss()\">\n      <input\n        type=\"checkbox\"\n        [attr.name]=\"model.name\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\"\n        [class]=\"model.cssClasses.control\" [disabled]=\"model.isInputReadOnly\"  [indeterminate]=\"model.isIndeterminate\" [value]=\"model.checkedValue\" [(ngModel)]=\"model.checkedValue\" />\n      <span [class]=\"model.getLabelCss(false)\" (click)=\"model.onLabelClick($event, false)\" [model]=\"model.locLabelFalse\" sv-ng-string></span>\n      <div [class]=\"model.cssClasses.switch\" (click)=\"model.onSwitchClickModel($event)\">\n        <span [class]=\"model.cssClasses.slider\">\n            <span *ngIf=\"model.cssClasses.sliderText && model.isDeterminated\" [class]=\"model.cssClasses.sliderText\" [model]=\"model.getCheckedLabel()\" sv-ng-string></span>\n        </span>\n      </div>\n      <span [class]=\"model.getLabelCss(true)\" (click)=\"model.onLabelClick($event, true)\" [model]=\"model.locLabelTrue\"  sv-ng-string></span>\n    </label>\n</div>" }]
+            args: [{ selector: "sv-ng-boolean-question", template: "<div [class]=\"model.cssClasses.root\" (keydown)=\"model.onKeyDownCore($event)\" #contentElement>\n    <label [class]=\"model.getItemCss()\">\n      <input\n        type=\"checkbox\"\n        [attr.name]=\"model.name\" [attr.id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\" [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\"\n        [class]=\"model.cssClasses.control\" [disabled]=\"model.isInputReadOnly\"  [indeterminate]=\"model.isIndeterminate\" [value]=\"model.booleanValue\" [(ngModel)]=\"model.booleanValue\" />\n      <span [class]=\"model.getLabelCss(false)\" (click)=\"model.onLabelClick($event, false)\" [model]=\"model.locLabelFalse\" sv-ng-string></span>\n      <div [class]=\"model.cssClasses.switch\" (click)=\"model.onSwitchClickModel($event)\">\n        <span [class]=\"model.cssClasses.slider\">\n            <span *ngIf=\"model.cssClasses.sliderText && model.isDeterminated\" [class]=\"model.cssClasses.sliderText\" [model]=\"model.getCheckedLabel()\" sv-ng-string></span>\n        </span>\n      </div>\n      <span [class]=\"model.getLabelCss(true)\" (click)=\"model.onLabelClick($event, true)\" [model]=\"model.locLabelTrue\"  sv-ng-string></span>\n    </label>\n</div>" }]
         }] });
 AngularComponentFactory.Instance.registerComponent("boolean-question", BooleanQuestionComponent);
 
@@ -1676,10 +1732,10 @@ RendererFactory.Instance.registerRenderer("rating", "dropdown", "rating-dropdown
 class BooleanCheckboxComponent {
 }
 BooleanCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: BooleanCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BooleanCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: BooleanCheckboxComponent, selector: "sv-ng-boolean-checkbox-question", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.cssClasses.rootCheckbox\">\n  <div [class]=\"model.getCheckboxItemCss()\">\n    <label [class]=\"model.cssClasses.checkboxLabel\">\n      <input\n        type=\"checkbox\"\n        [value]=\"model.checkedValue\" [class]=\"model.cssClasses.controlCheckbox\" \n        [attr.name]=\"model.name\" [id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\"\n        [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\" [(ngModel)]=\"model.checkedValue\" [value]=\"model.checkedValue\"\n        [disabled]=\"model.isInputReadOnly\" [indeterminate]=\"model.isIndeterminate\"\n      />\n      <span [class]=\"model.cssClasses.checkboxMaterialDecorator\">\n        <svg *ngIf=\"!!model.svgIcon\" [class]=\"model.cssClasses.checkboxItemDecorator\">\n          <use [attr.xlink:href]=\"model.svgIcon\"></use>\n        </svg>\n        <span class=\"check\"></span>\n      </span>\n      <span *ngIf=\"model.titleLocation === 'hidden'\" [class]=\"model.cssClasses.checkboxControlLabel\" [model]=\"model.locDisplayLabel\" sv-ng-string></span>\n    </label>\n  </div>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+BooleanCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: BooleanCheckboxComponent, selector: "sv-ng-boolean-checkbox-question", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.cssClasses.rootCheckbox\">\n  <div [class]=\"model.getCheckboxItemCss()\">\n    <label [class]=\"model.cssClasses.checkboxLabel\">\n      <input\n        type=\"checkbox\"\n        [value]=\"model.booleanValue\" [class]=\"model.cssClasses.controlCheckbox\" \n        [attr.name]=\"model.name\" [id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\"\n        [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\" [(ngModel)]=\"model.booleanValue\" [value]=\"model.booleanValue\"\n        [disabled]=\"model.isInputReadOnly\" [indeterminate]=\"model.isIndeterminate\"\n      />\n      <span [class]=\"model.cssClasses.checkboxMaterialDecorator\">\n        <svg *ngIf=\"!!model.svgIcon\" [class]=\"model.cssClasses.checkboxItemDecorator\">\n          <use [attr.xlink:href]=\"model.svgIcon\"></use>\n        </svg>\n        <span class=\"check\"></span>\n      </span>\n      <span *ngIf=\"model.titleLocation === 'hidden'\" [class]=\"model.cssClasses.checkboxControlLabel\" [model]=\"model.locDisplayLabel\" sv-ng-string></span>\n    </label>\n  </div>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: BooleanCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: "sv-ng-boolean-checkbox-question", template: "<div [class]=\"model.cssClasses.rootCheckbox\">\n  <div [class]=\"model.getCheckboxItemCss()\">\n    <label [class]=\"model.cssClasses.checkboxLabel\">\n      <input\n        type=\"checkbox\"\n        [value]=\"model.checkedValue\" [class]=\"model.cssClasses.controlCheckbox\" \n        [attr.name]=\"model.name\" [id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\"\n        [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\" [(ngModel)]=\"model.checkedValue\" [value]=\"model.checkedValue\"\n        [disabled]=\"model.isInputReadOnly\" [indeterminate]=\"model.isIndeterminate\"\n      />\n      <span [class]=\"model.cssClasses.checkboxMaterialDecorator\">\n        <svg *ngIf=\"!!model.svgIcon\" [class]=\"model.cssClasses.checkboxItemDecorator\">\n          <use [attr.xlink:href]=\"model.svgIcon\"></use>\n        </svg>\n        <span class=\"check\"></span>\n      </span>\n      <span *ngIf=\"model.titleLocation === 'hidden'\" [class]=\"model.cssClasses.checkboxControlLabel\" [model]=\"model.locDisplayLabel\" sv-ng-string></span>\n    </label>\n  </div>\n</div>" }]
+            args: [{ selector: "sv-ng-boolean-checkbox-question", template: "<div [class]=\"model.cssClasses.rootCheckbox\">\n  <div [class]=\"model.getCheckboxItemCss()\">\n    <label [class]=\"model.cssClasses.checkboxLabel\">\n      <input\n        type=\"checkbox\"\n        [value]=\"model.booleanValue\" [class]=\"model.cssClasses.controlCheckbox\" \n        [attr.name]=\"model.name\" [id]=\"model.inputId\" [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\"\n        [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-describedby]=\"model.ariaDescribedBy\" [(ngModel)]=\"model.booleanValue\" [value]=\"model.booleanValue\"\n        [disabled]=\"model.isInputReadOnly\" [indeterminate]=\"model.isIndeterminate\"\n      />\n      <span [class]=\"model.cssClasses.checkboxMaterialDecorator\">\n        <svg *ngIf=\"!!model.svgIcon\" [class]=\"model.cssClasses.checkboxItemDecorator\">\n          <use [attr.xlink:href]=\"model.svgIcon\"></use>\n        </svg>\n        <span class=\"check\"></span>\n      </span>\n      <span *ngIf=\"model.titleLocation === 'hidden'\" [class]=\"model.cssClasses.checkboxControlLabel\" [model]=\"model.locDisplayLabel\" sv-ng-string></span>\n    </label>\n  </div>\n</div>" }]
         }], propDecorators: { model: [{
                 type: Input
             }] } });
@@ -1982,10 +2038,10 @@ class RankingItemComponent extends BaseAngular {
     }
 }
 RankingItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RankingItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-RankingItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: RankingItemComponent, selector: "sv-ng-ranking-item", inputs: { question: "question", model: "model", index: "index" }, usesInheritance: true, ngImport: i0, template: "\n\n\n<div tabindex=\"0\" [attr.data-sv-drop-target-ranking-item]=\"index\" \n    [class]=\"question.getItemClass(model)\"\n    (keydown)=\"question.handleKeydown($event, model)\"\n    (pointerdown)=\"question.handlePointerDown($event, model, $any($event.currentTarget))\">\n  <div tabindex=\"-1\" style=\"outline: none;\">\n    <div [class]=\"question.cssClasses.itemGhostNode\"></div>\n    <div [class]=\"question.cssClasses.itemContent\">\n      <div [class]=\"question.cssClasses.itemIconContainer\">\n        <svg\n          width=\"10\"\n          height=\"16\"\n          viewBox=\"0 0 10 16\"\n          [class]=\"question.getIconHoverCss()\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M6 2C6 0.9 6.9 0 8 0C9.1 0 10 0.9 10 2C10 3.1 9.1 4 8 4C6.9 4 6 3.1 6 2ZM2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0ZM8 6C6.9 6 6 6.9 6 8C6 9.1 6.9 10 8 10C9.1 10 10 9.1 10 8C10 6.9 9.1 6 8 6ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM8 12C6.9 12 6 12.9 6 14C6 15.1 6.9 16 8 16C9.1 16 10 15.1 10 14C10 12.9 9.1 12 8 12ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z\" />\n        </svg>\n        <svg\n          width=\"10\"\n          height=\"24\"\n          viewBox=\"0 0 10 24\"\n          [class]=\"question.getIconFocusCss()\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M10 5L5 0L0 5H4V9H6V5H10Z\" />\n          <path d=\"M6 19V15H4V19H0L5 24L10 19H6Z\" />\n        </svg>\n      </div>\n\n      <div [class]=\"question.cssClasses.itemIndex\">{{ question.getNumberByIndex(index) }}</div>\n      <div [class]=\"question.cssClasses.controlLabel\">\n        <sv-ng-string [model]=\"model.locText\"></sv-ng-string>\n      </div>\n    </div>\n  </div>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }] });
+RankingItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: RankingItemComponent, selector: "sv-ng-ranking-item", inputs: { question: "question", model: "model", index: "index" }, usesInheritance: true, ngImport: i0, template: "\n\n\n<div [attr.tabindex]=\"question.getItemTabIndex(model)\" [attr.data-sv-drop-target-ranking-item]=\"index\" \n    [class]=\"question.getItemClass(model)\"\n    (keydown)=\"question.handleKeydown($event, model)\"\n    (pointerdown)=\"question.handlePointerDown($event, model, $any($event.currentTarget))\">\n  <div tabindex=\"-1\" style=\"outline: none;\">\n    <div [class]=\"question.cssClasses.itemGhostNode\"></div>\n    <div [class]=\"question.cssClasses.itemContent\">\n      <div [class]=\"question.cssClasses.itemIconContainer\">\n        <svg\n          width=\"10\"\n          height=\"16\"\n          viewBox=\"0 0 10 16\"\n          [class]=\"question.getIconHoverCss()\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M6 2C6 0.9 6.9 0 8 0C9.1 0 10 0.9 10 2C10 3.1 9.1 4 8 4C6.9 4 6 3.1 6 2ZM2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0ZM8 6C6.9 6 6 6.9 6 8C6 9.1 6.9 10 8 10C9.1 10 10 9.1 10 8C10 6.9 9.1 6 8 6ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM8 12C6.9 12 6 12.9 6 14C6 15.1 6.9 16 8 16C9.1 16 10 15.1 10 14C10 12.9 9.1 12 8 12ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z\" />\n        </svg>\n        <svg\n          width=\"10\"\n          height=\"24\"\n          viewBox=\"0 0 10 24\"\n          [class]=\"question.getIconFocusCss()\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M10 5L5 0L0 5H4V9H6V5H10Z\" />\n          <path d=\"M6 19V15H4V19H0L5 24L10 19H6Z\" />\n        </svg>\n      </div>\n\n      <div [class]=\"question.cssClasses.itemIndex\">{{ question.getNumberByIndex(index) }}</div>\n      <div [class]=\"question.cssClasses.controlLabel\">\n        <sv-ng-string [model]=\"model.locText\"></sv-ng-string>\n      </div>\n    </div>\n  </div>\n</div>", components: [{ type: SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RankingItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: "sv-ng-ranking-item", template: "\n\n\n<div tabindex=\"0\" [attr.data-sv-drop-target-ranking-item]=\"index\" \n    [class]=\"question.getItemClass(model)\"\n    (keydown)=\"question.handleKeydown($event, model)\"\n    (pointerdown)=\"question.handlePointerDown($event, model, $any($event.currentTarget))\">\n  <div tabindex=\"-1\" style=\"outline: none;\">\n    <div [class]=\"question.cssClasses.itemGhostNode\"></div>\n    <div [class]=\"question.cssClasses.itemContent\">\n      <div [class]=\"question.cssClasses.itemIconContainer\">\n        <svg\n          width=\"10\"\n          height=\"16\"\n          viewBox=\"0 0 10 16\"\n          [class]=\"question.getIconHoverCss()\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M6 2C6 0.9 6.9 0 8 0C9.1 0 10 0.9 10 2C10 3.1 9.1 4 8 4C6.9 4 6 3.1 6 2ZM2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0ZM8 6C6.9 6 6 6.9 6 8C6 9.1 6.9 10 8 10C9.1 10 10 9.1 10 8C10 6.9 9.1 6 8 6ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM8 12C6.9 12 6 12.9 6 14C6 15.1 6.9 16 8 16C9.1 16 10 15.1 10 14C10 12.9 9.1 12 8 12ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z\" />\n        </svg>\n        <svg\n          width=\"10\"\n          height=\"24\"\n          viewBox=\"0 0 10 24\"\n          [class]=\"question.getIconFocusCss()\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M10 5L5 0L0 5H4V9H6V5H10Z\" />\n          <path d=\"M6 19V15H4V19H0L5 24L10 19H6Z\" />\n        </svg>\n      </div>\n\n      <div [class]=\"question.cssClasses.itemIndex\">{{ question.getNumberByIndex(index) }}</div>\n      <div [class]=\"question.cssClasses.controlLabel\">\n        <sv-ng-string [model]=\"model.locText\"></sv-ng-string>\n      </div>\n    </div>\n  </div>\n</div>" }]
+            args: [{ selector: "sv-ng-ranking-item", template: "\n\n\n<div [attr.tabindex]=\"question.getItemTabIndex(model)\" [attr.data-sv-drop-target-ranking-item]=\"index\" \n    [class]=\"question.getItemClass(model)\"\n    (keydown)=\"question.handleKeydown($event, model)\"\n    (pointerdown)=\"question.handlePointerDown($event, model, $any($event.currentTarget))\">\n  <div tabindex=\"-1\" style=\"outline: none;\">\n    <div [class]=\"question.cssClasses.itemGhostNode\"></div>\n    <div [class]=\"question.cssClasses.itemContent\">\n      <div [class]=\"question.cssClasses.itemIconContainer\">\n        <svg\n          width=\"10\"\n          height=\"16\"\n          viewBox=\"0 0 10 16\"\n          [class]=\"question.getIconHoverCss()\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M6 2C6 0.9 6.9 0 8 0C9.1 0 10 0.9 10 2C10 3.1 9.1 4 8 4C6.9 4 6 3.1 6 2ZM2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0ZM8 6C6.9 6 6 6.9 6 8C6 9.1 6.9 10 8 10C9.1 10 10 9.1 10 8C10 6.9 9.1 6 8 6ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM8 12C6.9 12 6 12.9 6 14C6 15.1 6.9 16 8 16C9.1 16 10 15.1 10 14C10 12.9 9.1 12 8 12ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z\" />\n        </svg>\n        <svg\n          width=\"10\"\n          height=\"24\"\n          viewBox=\"0 0 10 24\"\n          [class]=\"question.getIconFocusCss()\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M10 5L5 0L0 5H4V9H6V5H10Z\" />\n          <path d=\"M6 19V15H4V19H0L5 24L10 19H6Z\" />\n        </svg>\n      </div>\n\n      <div [class]=\"question.cssClasses.itemIndex\">{{ question.getNumberByIndex(index) }}</div>\n      <div [class]=\"question.cssClasses.controlLabel\">\n        <sv-ng-string [model]=\"model.locText\"></sv-ng-string>\n      </div>\n    </div>\n  </div>\n</div>" }]
         }], propDecorators: { question: [{
                 type: Input
             }], model: [{
@@ -2007,10 +2063,10 @@ class StringEditorComponent {
     }
 }
 StringEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StringEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StringEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: StringEditorComponent, selector: "sv-ng-string-editor", inputs: { model: "model" }, ngImport: i0, template: "<span style=\"position: static\">\n  <span\n    class=\"sv-string-editor\"\n    contenteditable=\"true\"\n    style=\"position: static\"\n    *ngIf=\"model.hasHtml\"\n    [innerHtml]=\"model.renderedHtml\"\n    (blur)=\"onInput($event)\"\n    (click)=\"onClick($event)\"\n  ></span>\n  <span\n    class=\"sv-string-editor\"\n    contenteditable=\"true\"\n    style=\"position: static\"\n    *ngIf=\"!model.hasHtml\"\n    (blur)=\"onInput($event)\"\n    (click)=\"onClick($event)\"\n    >{{ model.renderedHtml }}</span\n  >\n</span>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+StringEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: StringEditorComponent, selector: "sv-ng-string-editor", inputs: { model: "model" }, ngImport: i0, template: "<span\n  class=\"sv-string-editor\"\n  contenteditable=\"true\"\n  *ngIf=\"model.hasHtml\"\n  [innerHtml]=\"model.renderedHtml\"\n  (blur)=\"onInput($event)\"\n  (click)=\"onClick($event)\"\n></span>\n<span\n  class=\"sv-string-editor\"\n  contenteditable=\"true\"\n  *ngIf=\"!model.hasHtml\"\n  (blur)=\"onInput($event)\"\n  (click)=\"onClick($event)\"\n  >{{ model.renderedHtml }}</span\n>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StringEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: "sv-ng-string-editor", template: "<span style=\"position: static\">\n  <span\n    class=\"sv-string-editor\"\n    contenteditable=\"true\"\n    style=\"position: static\"\n    *ngIf=\"model.hasHtml\"\n    [innerHtml]=\"model.renderedHtml\"\n    (blur)=\"onInput($event)\"\n    (click)=\"onClick($event)\"\n  ></span>\n  <span\n    class=\"sv-string-editor\"\n    contenteditable=\"true\"\n    style=\"position: static\"\n    *ngIf=\"!model.hasHtml\"\n    (blur)=\"onInput($event)\"\n    (click)=\"onClick($event)\"\n    >{{ model.renderedHtml }}</span\n  >\n</span>" }]
+            args: [{ selector: "sv-ng-string-editor", template: "<span\n  class=\"sv-string-editor\"\n  contenteditable=\"true\"\n  *ngIf=\"model.hasHtml\"\n  [innerHtml]=\"model.renderedHtml\"\n  (blur)=\"onInput($event)\"\n  (click)=\"onClick($event)\"\n></span>\n<span\n  class=\"sv-string-editor\"\n  contenteditable=\"true\"\n  *ngIf=\"!model.hasHtml\"\n  (blur)=\"onInput($event)\"\n  (click)=\"onClick($event)\"\n  >{{ model.renderedHtml }}</span\n>\n" }]
         }], propDecorators: { model: [{
                 type: Input
             }] } });
@@ -2507,7 +2563,7 @@ SurveyAngularModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ver
         SurveyComponent, SurveyContentComponent, PopupSurveyComponent, PageComponent, PanelComponent, QuestionComponent, StringViewerComponent, SurveyStringComponent, StringEditorComponent,
         QuestionSkeletonComponent, TextQuestionComponent, RadiogroupComponent, RadiogroupItemComponent, CheckboxComponent, CheckboxItemComponent,
         DropdownComponent, DropdownQuestionComponent, DropdownSelectComponent, DropdownOptionItemComponent,
-        PopupComponent, PopupContainerComponent,
+        PopupComponent, PopupBaseContainerComponent, PopupPointerComponent,
         ListComponent, ListItemComponent,
         TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
         ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
@@ -2520,7 +2576,7 @@ SurveyAngularModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ver
         SurveyComponent, SurveyContentComponent, PopupSurveyComponent, PageComponent, PanelComponent, QuestionComponent, StringViewerComponent, SurveyStringComponent, StringEditorComponent,
         QuestionSkeletonComponent, TextQuestionComponent, RadiogroupComponent, RadiogroupItemComponent, CheckboxComponent, CheckboxItemComponent,
         DropdownComponent, DropdownQuestionComponent, DropdownSelectComponent, DropdownOptionItemComponent,
-        PopupComponent, PopupContainerComponent,
+        PopupComponent, PopupBaseContainerComponent, PopupPointerComponent,
         ListComponent, ListItemComponent,
         TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
         ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
@@ -2541,7 +2597,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                         SurveyComponent, SurveyContentComponent, PopupSurveyComponent, PageComponent, PanelComponent, QuestionComponent, StringViewerComponent, SurveyStringComponent, StringEditorComponent,
                         QuestionSkeletonComponent, TextQuestionComponent, RadiogroupComponent, RadiogroupItemComponent, CheckboxComponent, CheckboxItemComponent,
                         DropdownComponent, DropdownQuestionComponent, DropdownSelectComponent, DropdownOptionItemComponent,
-                        PopupComponent, PopupContainerComponent,
+                        PopupComponent, PopupBaseContainerComponent, PopupPointerComponent,
                         ListComponent, ListItemComponent,
                         TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
                         ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
@@ -2560,7 +2616,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                         SurveyComponent, SurveyContentComponent, PopupSurveyComponent, PageComponent, PanelComponent, QuestionComponent, StringViewerComponent, SurveyStringComponent, StringEditorComponent,
                         QuestionSkeletonComponent, TextQuestionComponent, RadiogroupComponent, RadiogroupItemComponent, CheckboxComponent, CheckboxItemComponent,
                         DropdownComponent, DropdownQuestionComponent, DropdownSelectComponent, DropdownOptionItemComponent,
-                        PopupComponent, PopupContainerComponent,
+                        PopupComponent, PopupBaseContainerComponent, PopupPointerComponent,
                         ListComponent, ListItemComponent,
                         TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
                         ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
@@ -2579,5 +2635,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActionBarComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, ActionComponent, AngularComponentFactory, BaseAngular, BooleanCheckboxComponent, BooleanQuestionComponent, BooleanRadioComponent, BooleanRadioItemComponent, BrandInfoComponent, ButtonGroupQuestionComponent, CheckboxComponent, CheckboxItemComponent, CommentQuestionComponent, CompositeQuestionComponent, CustomQuestionComponent, CustomWidgetComponent, DropdownComponent, DropdownOptionItemComponent, DropdownQuestionComponent, DropdownSelectComponent, DynamicComponentDirective, DynamicHeadComponent, ElementComponent, ElementHeaderComponent, ElementTitleComponent, EmbeddedViewContentComponent, ErrorsComponent, ExpressionComponent, FileQuestionComponent, HtmlQuestionComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent, Key2ClickDirective, ListComponent, ListItemComponent, LogoImageComponent, MatrixCellComponent, MatrixDetailButtonComponent, MatrixDropdownComponent, MatrixDynamicComponent, MatrixDynamicDragDropIconComponent, MatrixDynamicRemoveButtonComponent, MatrixQuestionComponent, MatrixRequiredHeader, MatrixTableComponent, ModalComponent, MultipleTextComponent, MultipleTextItemComponent, PageComponent, PanelComponent, PanelDynamicAddBtn, PanelDynamicNextBtn, PanelDynamicPrevBtn, PanelDynamicProgressText, PanelDynamicQuestionComponent, PaneldynamicAction, PopupComponent, PopupContainerComponent, PopupService, PopupSurveyComponent, ProgressButtonsComponent, ProgressDefaultComponent, QuestionAngular, QuestionComponent, QuestionSkeletonComponent, RadiogroupComponent, RadiogroupItemComponent, RankingItemComponent, RankingQuestionComponent, RatingDropdownComponent, RatingQuestionComponent, RowComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeUrlPipe, SelectBaseComponent, SelectBaseItemComponent, SignaturePadQuestionComponent, StringEditorComponent, StringViewerComponent, SurveyAngularModule, SurveyCommentComponent, SurveyComponent, SurveyContentComponent, SurveyHeaderComponent, SurveyNavigationButton, SurveyStringComponent, SvgIconComponent, TagboxComponent, TagboxFilterComponent, TagboxItemComponent, TagboxQuestionComponent, TemplateRendererComponent, TextQuestionComponent, VisibleDirective };
+export { ActionBarComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, ActionComponent, AngularComponentFactory, BaseAngular, BooleanCheckboxComponent, BooleanQuestionComponent, BooleanRadioComponent, BooleanRadioItemComponent, BrandInfoComponent, ButtonGroupQuestionComponent, CheckboxComponent, CheckboxItemComponent, CommentQuestionComponent, CompositeQuestionComponent, CustomQuestionComponent, CustomWidgetComponent, DropdownComponent, DropdownOptionItemComponent, DropdownQuestionComponent, DropdownSelectComponent, DynamicComponentDirective, DynamicHeadComponent, ElementComponent, ElementHeaderComponent, ElementTitleComponent, EmbeddedViewContentComponent, ErrorsComponent, ExpressionComponent, FileQuestionComponent, HtmlQuestionComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent, Key2ClickDirective, ListComponent, ListItemComponent, LogoImageComponent, MatrixCellComponent, MatrixDetailButtonComponent, MatrixDropdownComponent, MatrixDynamicComponent, MatrixDynamicDragDropIconComponent, MatrixDynamicRemoveButtonComponent, MatrixQuestionComponent, MatrixRequiredHeader, MatrixTableComponent, ModalComponent, MultipleTextComponent, MultipleTextItemComponent, PageComponent, PanelComponent, PanelDynamicAddBtn, PanelDynamicNextBtn, PanelDynamicPrevBtn, PanelDynamicProgressText, PanelDynamicQuestionComponent, PaneldynamicAction, PopupBaseContainerComponent, PopupComponent, PopupPointerComponent, PopupService, PopupSurveyComponent, ProgressButtonsComponent, ProgressDefaultComponent, QuestionAngular, QuestionComponent, QuestionSkeletonComponent, RadiogroupComponent, RadiogroupItemComponent, RankingItemComponent, RankingQuestionComponent, RatingDropdownComponent, RatingQuestionComponent, RowComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeUrlPipe, SelectBaseComponent, SelectBaseItemComponent, SignaturePadQuestionComponent, StringEditorComponent, StringViewerComponent, SurveyAngularModule, SurveyCommentComponent, SurveyComponent, SurveyContentComponent, SurveyHeaderComponent, SurveyNavigationButton, SurveyStringComponent, SvgIconComponent, TagboxComponent, TagboxFilterComponent, TagboxItemComponent, TagboxQuestionComponent, TemplateRendererComponent, TextQuestionComponent, VisibleDirective };
 //# sourceMappingURL=survey-angular-ui.mjs.map