devexpress-reporting-angular 23.2.2-beta → 23.2.4-build-23360-1657

package/fesm2015/devexpress-reporting-angular-dx-report-viewer.mjs

@@ -13,11 +13,11 @@ import { KeyboardEnum } from '@devexpress/analytics-core/property-grid/widgets/i
 import { initializeResize, initializeBaseResizableOptions } from '@devexpress/analytics-core/core/internal/_resizable';
 import { initializeMutationObserver } from '@devexpress/analytics-core/accessibility/_dxMutationObserver';
 import { extend } from '@devexpress/analytics-core/analytics-internal-native';
+import * as i2 from 'devextreme-angular';
+import { DxButtonModule, DxLoadIndicatorModule, DxScrollViewModule, DxSelectBoxModule, DxMenuModule, DxTagBoxModule, DxTextBoxModule, DxValidatorModule, DxDateBoxModule, DxCheckBoxModule, DxNumberBoxModule, DxColorBoxModule, DxPopupModule, DxPopoverModule, DxSliderModule, DxCalendarModule, DxListModule, DxGalleryModule } from 'devextreme-angular';
 import { InitAccordion } from '@devexpress/analytics-core/property-grid/bindings.accordion';
 import { globalResolver } from '@devexpress/analytics-core/property-grid/internal/_codeResolver';
 import { getParentContainer } from '@devexpress/analytics-core/widgets/_utils';
-import * as i2 from 'devextreme-angular';
-import { DxButtonModule, DxLoadIndicatorModule, DxScrollViewModule, DxSelectBoxModule, DxMenuModule, DxTagBoxModule, DxTextBoxModule, DxValidatorModule, DxDateBoxModule, DxCheckBoxModule, DxNumberBoxModule, DxColorBoxModule, DxPopupModule, DxPopoverModule, DxSliderModule, DxCalendarModule, DxListModule, DxGalleryModule } from 'devextreme-angular';
 import { CollectionEditorViewModel } from '@devexpress/analytics-core/property-grid/widgets/collectioneditor/_editor';
 import { noDataText, getLocalization } from '@devexpress/analytics-core/property-grid/localization/_localization';
 import * as i2$1 from 'devextreme-angular/core';
@@ -284,11 +284,11 @@ class TemplateEngine {
         this.templates.push({ ref, id });
     }
     hasTemplate(id) {
-        let template = this.templates.find((template) => template.id === id);
+        const template = this.templates.find((template) => template.id === id);
         return !!template;
     }
     getTemplateRef(templateId) {
-        let template = this.templates.find((template) => template.id === templateId);
+        const template = this.templates.find((template) => template.id === templateId);
         return template ? template.ref : null;
     }
 }
@@ -638,7 +638,7 @@ class EditorComponentBase {
     }
     onPropertyChanged() {
         const currentOptions = this.getOptions();
-        for (let name in currentOptions) {
+        for (const name in currentOptions) {
             if (typeof currentOptions[name] !== 'function' && currentOptions[name] !== this.options[name]) {
                 if (Array.isArray(currentOptions[name])) {
                     if (JSON.stringify(this.options[name]) !== JSON.stringify(currentOptions[name]))
@@ -673,10 +673,10 @@ class EditorComponentBase {
     }
 }
 EditorComponentBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorComponentBase, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-EditorComponentBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: EditorComponentBase, selector: "dxa-editor", inputs: { data: "data" }, viewQueries: [{ propertyName: "widget", first: true, predicate: ["widget"], descendants: true }], ngImport: i0, template: "<div class=\"dx-editor\" [hidden]=\"!data.visible\">\r\n    <div class=\"dx-group\" [dxaAccordion]=\"data\">\r\n        <div class=\"dx-editor-header\">\r\n            <div class=\"dx-field\" \r\n                role=\"treeitem\"\r\n                [attr.id]=\"data.isComplexEditor ? data.headerId : undefined\"\r\n                [attr.aria-owns]=\"data.isComplexEditor ? data.contentId : undefined\"\r\n                [attr.aria-expanded]=\"data.isComplexEditor && (data.alwaysShow || !data.collapsed ? 'true' : 'false')\"\r\n                [class.dxrd-accessibility-accordion-trigger]=\"data.isComplexEditor\"\r\n                [class.dx-accessibility-focus-border-accented]=\"data.isComplexEditor\">\r\n                    <div class=\"dx-field-label dx-accordion-header dxd-text-primary\" \r\n                    [style.padding-left]=\"data.padding['padding-left'] + 'px'\"\r\n                    [class.dx-accordion-empty]=\"data.templateName === 'dx-emptyHeader'\">\r\n                        <div *ngIf=\"data.isComplexEditor\" [attr.disabled]=\"data.templateName !== 'dx-emptyHeader'\">\r\n                            <dxa-template class=\"propertygrid-editor-collapsed dx-collapsing-image\" template=\"dxrd-svg-collapsed\" \r\n                             [class.dx-image-expanded]=\"!data.collapsed\"></dxa-template>\r\n                             <div *ngIf=\"!!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\" data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"></div>\r\n                             <div *ngIf=\"!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\">\r\n                                 {{data.displayName}}\r\n                             </div>\r\n                        </div>\r\n                        <label *ngIf=\"!data.isComplexEditor && !!data.textToSearch\" \r\n                        class=\"propertygrid-editor-displayName\"\r\n                        data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"\r\n                        [attr.title]=\"data.displayName\"\r\n                        [attr.for]=\"data.editorInputId\"\r\n                        [class.dx-field-label-required]=\"data.isRequired\"\r\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\r\n                        ></label>\r\n                        <label *ngIf=\"!data.isComplexEditor && !data.textToSearch\" \r\n                        class=\"propertygrid-editor-displayName\"\r\n                        [attr.title]=\"data.displayName\"\r\n                        [attr.for]=\"data.editorInputId\"\r\n                        [class.dx-field-label-required]=\"data.isRequired\"\r\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\r\n                        >{{data.displayName}}</label>                             \r\n                </div>\r\n                <div class=\"dx-field-value\" \r\n                [class.dxd-border-accented]=\"data.isPropertyHighlighted\">\r\n                    <div data-bind=\"service: { name: 'createEditorAddOn' }\"></div>\r\n                    <dxa-lazy-template *ngIf=\"data.templateName !== 'dx-emptyHeader'\" [isResolved]=\"isResolved\" [template]=\"data.templateName\" [data]=\"data\"></dxa-lazy-template>\r\n                    <!-- ko if: templateName !== 'dx-emptyHeader' -->\r\n                    <!-- ko lazy: { innerBindings: { template: templateName }, isResolved: function(val) { $data.setIsRendered(val) } } -->\r\n                    <!-- /ko -->\r\n                    <!-- /ko -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"data.isComplexEditor\" class=\"dx-editor-content dx-accordion-content\" role=\"group\" \r\n        [attr.aria-labelledby]=\"data.headerId\"\r\n        [attr.id]=\"data.contentId\"\r\n        [attr.aria-hidden]=\"!data.alwaysShow && data.collapsed ? 'true' : 'false'\">\r\n        <dxa-template *ngIf=\"data.editorCreated\" [template]=\"data.contentTemplateName\" [data]=\"data\"></dxa-template>\r\n        </div>\r\n    </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "directive", type: AccordionDirective, selector: "[dxaAccordion]", inputs: ["dxaAccordion"] }, { kind: "component", type: LazyTemplateComponent, selector: "dxa-lazy-template", inputs: ["resolver", "isResolved"] }] });
+EditorComponentBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: EditorComponentBase, selector: "dxa-editor", inputs: { data: "data" }, viewQueries: [{ propertyName: "widget", first: true, predicate: ["widget"], descendants: true }], ngImport: i0, template: "<div class=\"dx-editor\" [hidden]=\"!data.visible\">\r\n    <div class=\"dx-group\" [dxaAccordion]=\"data\">\r\n        <div class=\"dx-editor-header\">\r\n            <div class=\"dx-field\" \r\n                role=\"treeitem\"\r\n                [attr.id]=\"data.isComplexEditor ? data.headerId : undefined\"\r\n                [attr.aria-owns]=\"data.isComplexEditor ? data.contentId : undefined\"\r\n                [attr.aria-expanded]=\"data.isComplexEditor && (data.alwaysShow || !data.collapsed ? 'true' : 'false')\"\r\n                [class.dxrd-accessibility-accordion-trigger]=\"data.isComplexEditor\"\r\n                [class.dx-accessibility-focus-border-accented]=\"data.isComplexEditor\">\r\n                    <div class=\"dx-field-label dx-accordion-header dxd-text-primary\" \r\n                    [style.padding-left]=\"data.padding['padding-left'] + 'px'\"\r\n                    [class.dx-accordion-empty]=\"data.templateName === 'dx-emptyHeader'\">\r\n                        <div *ngIf=\"data.isComplexEditor\" [attr.disabled]=\"data.templateName !== 'dx-emptyHeader'\">\r\n                            <dxa-template class=\"dx-collapsing-image dxrd-display-inline-block\" template=\"dxrd-svg-collapsed\" \r\n                             [class.dx-image-expanded]=\"!data.collapsed\"></dxa-template>\r\n                             <div *ngIf=\"!!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\" data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"></div>\r\n                             <div *ngIf=\"!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\">\r\n                                 {{data.displayName}}\r\n                             </div>\r\n                        </div>\r\n                        <label *ngIf=\"!data.isComplexEditor && !!data.textToSearch\" \r\n                        class=\"propertygrid-editor-displayName\"\r\n                        data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"\r\n                        [attr.title]=\"data.displayName\"\r\n                        [attr.for]=\"data.editorInputId\"\r\n                        [class.dx-field-label-required]=\"data.isRequired\"\r\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\r\n                        ></label>\r\n                        <label *ngIf=\"!data.isComplexEditor && !data.textToSearch\" \r\n                        class=\"propertygrid-editor-displayName\"\r\n                        [attr.title]=\"data.displayName\"\r\n                        [attr.for]=\"data.editorInputId\"\r\n                        [class.dx-field-label-required]=\"data.isRequired\"\r\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\r\n                        >{{data.displayName}}</label>\r\n                        <dx-button *ngIf=\"!data.isComplexEditor && data.editorDescriptionAddon\"\r\n                        class=\"propertygrid-editor-description\"\r\n                        (onClick)=\"data.editorDescriptionAddon.data.onClick($event)\"\r\n                        >\r\n                            <dxa-template template=\"dxrd-svg-tabs-description_info\"></dxa-template>\r\n                        </dx-button>\r\n                </div>\r\n                <div class=\"dx-field-value\" \r\n                [class.dxd-border-accented]=\"data.isPropertyHighlighted\">\r\n                    <!-- <div data-bind=\"service: { name: 'createEditorAddOn' }\"></div> -->\r\n                    <dxa-lazy-template *ngIf=\"data.templateName !== 'dx-emptyHeader'\" [isResolved]=\"isResolved\" [template]=\"data.templateName\" [data]=\"data\"></dxa-lazy-template>\r\n                    <!-- ko if: templateName !== 'dx-emptyHeader' -->\r\n                    <!-- ko lazy: { innerBindings: { template: templateName }, isResolved: function(val) { $data.setIsRendered(val) } } -->\r\n                    <!-- /ko -->\r\n                    <!-- /ko -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"data.isComplexEditor\" class=\"dx-editor-content dx-accordion-content\" role=\"group\" \r\n        [attr.aria-labelledby]=\"data.headerId\"\r\n        [attr.id]=\"data.contentId\"\r\n        [attr.aria-hidden]=\"!data.alwaysShow && data.collapsed ? 'true' : 'false'\">\r\n        <dxa-template *ngIf=\"data.editorCreated\" [template]=\"data.contentTemplateName\" [data]=\"data\"></dxa-template>\r\n        </div>\r\n    </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "directive", type: AccordionDirective, selector: "[dxaAccordion]", inputs: ["dxaAccordion"] }, { kind: "component", type: LazyTemplateComponent, selector: "dxa-lazy-template", inputs: ["resolver", "isResolved"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorComponentBase, decorators: [{
             type: Component,
-            args: [{ selector: 'dxa-editor', template: "<div class=\"dx-editor\" [hidden]=\"!data.visible\">\r\n    <div class=\"dx-group\" [dxaAccordion]=\"data\">\r\n        <div class=\"dx-editor-header\">\r\n            <div class=\"dx-field\" \r\n                role=\"treeitem\"\r\n                [attr.id]=\"data.isComplexEditor ? data.headerId : undefined\"\r\n                [attr.aria-owns]=\"data.isComplexEditor ? data.contentId : undefined\"\r\n                [attr.aria-expanded]=\"data.isComplexEditor && (data.alwaysShow || !data.collapsed ? 'true' : 'false')\"\r\n                [class.dxrd-accessibility-accordion-trigger]=\"data.isComplexEditor\"\r\n                [class.dx-accessibility-focus-border-accented]=\"data.isComplexEditor\">\r\n                    <div class=\"dx-field-label dx-accordion-header dxd-text-primary\" \r\n                    [style.padding-left]=\"data.padding['padding-left'] + 'px'\"\r\n                    [class.dx-accordion-empty]=\"data.templateName === 'dx-emptyHeader'\">\r\n                        <div *ngIf=\"data.isComplexEditor\" [attr.disabled]=\"data.templateName !== 'dx-emptyHeader'\">\r\n                            <dxa-template class=\"propertygrid-editor-collapsed dx-collapsing-image\" template=\"dxrd-svg-collapsed\" \r\n                             [class.dx-image-expanded]=\"!data.collapsed\"></dxa-template>\r\n                             <div *ngIf=\"!!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\" data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"></div>\r\n                             <div *ngIf=\"!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\">\r\n                                 {{data.displayName}}\r\n                             </div>\r\n                        </div>\r\n                        <label *ngIf=\"!data.isComplexEditor && !!data.textToSearch\" \r\n                        class=\"propertygrid-editor-displayName\"\r\n                        data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"\r\n                        [attr.title]=\"data.displayName\"\r\n                        [attr.for]=\"data.editorInputId\"\r\n                        [class.dx-field-label-required]=\"data.isRequired\"\r\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\r\n                        ></label>\r\n                        <label *ngIf=\"!data.isComplexEditor && !data.textToSearch\" \r\n                        class=\"propertygrid-editor-displayName\"\r\n                        [attr.title]=\"data.displayName\"\r\n                        [attr.for]=\"data.editorInputId\"\r\n                        [class.dx-field-label-required]=\"data.isRequired\"\r\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\r\n                        >{{data.displayName}}</label>                             \r\n                </div>\r\n                <div class=\"dx-field-value\" \r\n                [class.dxd-border-accented]=\"data.isPropertyHighlighted\">\r\n                    <div data-bind=\"service: { name: 'createEditorAddOn' }\"></div>\r\n                    <dxa-lazy-template *ngIf=\"data.templateName !== 'dx-emptyHeader'\" [isResolved]=\"isResolved\" [template]=\"data.templateName\" [data]=\"data\"></dxa-lazy-template>\r\n                    <!-- ko if: templateName !== 'dx-emptyHeader' -->\r\n                    <!-- ko lazy: { innerBindings: { template: templateName }, isResolved: function(val) { $data.setIsRendered(val) } } -->\r\n                    <!-- /ko -->\r\n                    <!-- /ko -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"data.isComplexEditor\" class=\"dx-editor-content dx-accordion-content\" role=\"group\" \r\n        [attr.aria-labelledby]=\"data.headerId\"\r\n        [attr.id]=\"data.contentId\"\r\n        [attr.aria-hidden]=\"!data.alwaysShow && data.collapsed ? 'true' : 'false'\">\r\n        <dxa-template *ngIf=\"data.editorCreated\" [template]=\"data.contentTemplateName\" [data]=\"data\"></dxa-template>\r\n        </div>\r\n    </div>\r\n</div>" }]
+            args: [{ selector: 'dxa-editor', template: "<div class=\"dx-editor\" [hidden]=\"!data.visible\">\r\n    <div class=\"dx-group\" [dxaAccordion]=\"data\">\r\n        <div class=\"dx-editor-header\">\r\n            <div class=\"dx-field\" \r\n                role=\"treeitem\"\r\n                [attr.id]=\"data.isComplexEditor ? data.headerId : undefined\"\r\n                [attr.aria-owns]=\"data.isComplexEditor ? data.contentId : undefined\"\r\n                [attr.aria-expanded]=\"data.isComplexEditor && (data.alwaysShow || !data.collapsed ? 'true' : 'false')\"\r\n                [class.dxrd-accessibility-accordion-trigger]=\"data.isComplexEditor\"\r\n                [class.dx-accessibility-focus-border-accented]=\"data.isComplexEditor\">\r\n                    <div class=\"dx-field-label dx-accordion-header dxd-text-primary\" \r\n                    [style.padding-left]=\"data.padding['padding-left'] + 'px'\"\r\n                    [class.dx-accordion-empty]=\"data.templateName === 'dx-emptyHeader'\">\r\n                        <div *ngIf=\"data.isComplexEditor\" [attr.disabled]=\"data.templateName !== 'dx-emptyHeader'\">\r\n                            <dxa-template class=\"dx-collapsing-image dxrd-display-inline-block\" template=\"dxrd-svg-collapsed\" \r\n                             [class.dx-image-expanded]=\"!data.collapsed\"></dxa-template>\r\n                             <div *ngIf=\"!!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\" data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"></div>\r\n                             <div *ngIf=\"!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\">\r\n                                 {{data.displayName}}\r\n                             </div>\r\n                        </div>\r\n                        <label *ngIf=\"!data.isComplexEditor && !!data.textToSearch\" \r\n                        class=\"propertygrid-editor-displayName\"\r\n                        data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"\r\n                        [attr.title]=\"data.displayName\"\r\n                        [attr.for]=\"data.editorInputId\"\r\n                        [class.dx-field-label-required]=\"data.isRequired\"\r\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\r\n                        ></label>\r\n                        <label *ngIf=\"!data.isComplexEditor && !data.textToSearch\" \r\n                        class=\"propertygrid-editor-displayName\"\r\n                        [attr.title]=\"data.displayName\"\r\n                        [attr.for]=\"data.editorInputId\"\r\n                        [class.dx-field-label-required]=\"data.isRequired\"\r\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\r\n                        >{{data.displayName}}</label>\r\n                        <dx-button *ngIf=\"!data.isComplexEditor && data.editorDescriptionAddon\"\r\n                        class=\"propertygrid-editor-description\"\r\n                        (onClick)=\"data.editorDescriptionAddon.data.onClick($event)\"\r\n                        >\r\n                            <dxa-template template=\"dxrd-svg-tabs-description_info\"></dxa-template>\r\n                        </dx-button>\r\n                </div>\r\n                <div class=\"dx-field-value\" \r\n                [class.dxd-border-accented]=\"data.isPropertyHighlighted\">\r\n                    <!-- <div data-bind=\"service: { name: 'createEditorAddOn' }\"></div> -->\r\n                    <dxa-lazy-template *ngIf=\"data.templateName !== 'dx-emptyHeader'\" [isResolved]=\"isResolved\" [template]=\"data.templateName\" [data]=\"data\"></dxa-lazy-template>\r\n                    <!-- ko if: templateName !== 'dx-emptyHeader' -->\r\n                    <!-- ko lazy: { innerBindings: { template: templateName }, isResolved: function(val) { $data.setIsRendered(val) } } -->\r\n                    <!-- /ko -->\r\n                    <!-- /ko -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"data.isComplexEditor\" class=\"dx-editor-content dx-accordion-content\" role=\"group\" \r\n        [attr.aria-labelledby]=\"data.headerId\"\r\n        [attr.id]=\"data.contentId\"\r\n        [attr.aria-hidden]=\"!data.alwaysShow && data.collapsed ? 'true' : 'false'\">\r\n        <dxa-template *ngIf=\"data.editorCreated\" [template]=\"data.contentTemplateName\" [data]=\"data\"></dxa-template>\r\n        </div>\r\n    </div>\r\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
                 type: Input,
                 args: ['data']
@@ -686,9 +686,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class EditorDropDownComponentBase extends EditorComponentBase {
-    constructor(_cd) {
-        super(_cd);
-    }
     beforeDetectChanges() {
     }
     ngAfterViewInit() {
@@ -699,14 +696,14 @@ class EditorDropDownComponentBase extends EditorComponentBase {
         this._cd.detectChanges();
     }
 }
-EditorDropDownComponentBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorDropDownComponentBase, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+EditorDropDownComponentBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorDropDownComponentBase, deps: null, target: i0.ɵɵFactoryTarget.Component });
 EditorDropDownComponentBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: EditorDropDownComponentBase, selector: "ng-component", viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorDropDownComponentBase, decorators: [{
             type: Component,
             args: [{
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { target: [{
+        }], propDecorators: { target: [{
                 type: ViewChild,
                 args: ['target', { read: ElementRef }]
             }] } });
@@ -755,10 +752,10 @@ class CollectionEditorComponent {
     }
 }
 CollectionEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CollectionEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CollectionEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CollectionEditorComponent, selector: "dxa-collectioneditor", inputs: { options: ["data", "options"], contentTemplate: "contentTemplate" }, ngImport: i0, template: "<div class=\"dx-collectioneditor\">\n    <div [dxaAccordion]=\"data\" [dxMutationObserver]=\"data.keyboardHelper\">\n        <div class=\"dx-collectioneditor-header dx-accordion-header\">\n            <div class=\"dx-editor-header\">\n                <div role=\"treeitem\"\n                    class=\"dx-field dx-accessibility-focus-border-accented dxrd-accessibility-accordion-trigger\"\n                    [attr.aria-expanded]=\"data.alwaysShow || !data.collapsed ? 'true' : 'false'\"\n                    [attr.aria-owns]=\"data.contentId\" [attr.id]=\"data.headerId\">\n                    <div *ngIf=\"data.showButtons\" class=\"dx-collectioneditor-actions-wrapper\">\n                        <dx-button *ngIf=\"data.buttons.up.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.up.action($event)\" [disabled]=\"data.buttons.up.disabled\"\n                            icon=\"dxrd-svg-operations-moveup\" iconClass=\"dx-image-moveup\"\n                            [template]=\"data.buttons.up.template\"\n                            [attr.title]=\"data.buttons.up.text\"></dx-button>\n                        <dx-button *ngIf=\"data.buttons.down.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.down.action($event)\" [disabled]=\"data.buttons.down.disabled\"\n                            icon=\"dxrd-svg-operations-movedown\" iconClass=\"dx-image-movedown\"\n                            [template]=\"data.buttons.down.template\"\n                            [attr.title]=\"data.buttons.down.text\"></dx-button>\n                        <div class=\"dx-collectioneditor-action-separator\"></div>\n                        <dx-button *ngIf=\"data.buttons.add.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.add.action($event)\" [disabled]=\"data.buttons.add.disabled\"\n                            [template]=\"data.buttons.add.template\"\n                            icon=\"dxrd-svg-operations-add\" iconClass=\"dx-image-add\"\n                            [attr.title]=\"data.buttons.add.text\"></dx-button>\n                        <dx-button *ngIf=\"data.buttons.delete.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.delete.action($event)\" [disabled]=\"data.buttons.delete.disabled\"\n                            [template]=\"data.buttons.delete.template\"\n                            icon=\"dxrd-svg-operations-remove\" iconClass=\"dx-image-remove\"\n                            [attr.title]=\"data.buttons.delete.text\"></dx-button>\n                    </div>\n                    <div *ngIf=\"!!data.displayName\" class=\"dx-collectioneditor-header-text dxd-text-primary\"\n                        [style.padding-left]=\"data.padding + 'px'\">\n                        <dxa-template class=\"propertygrid-editor-collapsed dx-collapsing-image\"\n                            template=\"dxrd-svg-collapsed\"\n                            [class.dx-image-expanded]=\"!data.collapsed \"></dxa-template>\n                        <div class=\"dx-group-header-font dxd-text-primary\" [attr.title]=\"data.displayName\">\n                            {{data.displayName}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div role=\"group\" class=\"dx-accordion-content\"\n            [attr.aria-hidden]=\"!data.alwaysShow && data.collapsed ? 'true' : 'false'\"\n            [attr.aria-labelledby]=\"data.headerId\" [attr.id]=\"data.contentId\">\n            <dx-scroll-view [hidden]=\"data.disabled\" showScrollbar=\"onHover\" [disabled]=\"!data.showScroll\"\n                [useNative]=\"false\" [scrollByThumb]=\"true\" (onInitialized)=\"onScrollViewInitialized($event)\">\n                <div *ngIf=\"data.values.length === 0\"\n                    class=\"dx-collectioneditor-empty dxd-empty-area-placeholder-text-color dxd-text-info\">\n                    <span class=\"dx-collectioneditor-empty-text\">{{data.emptyAreaText}}</span>\n                </div>\n                <div *ngIf=\"data.values.length !== 0\" class=\"dx-collectioneditor-items\">\n                    <div *ngFor=\"let value of data.values\"\n                        class=\"dx-collectioneditor-item-container dxd-button-back-color dxd-state-normal dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented\"\n                        [attr.aria-selected]=\"value.selected\" [dxActionModel]=\"value\" [dxAction]=\"value.select\"\n                        [class.dxd-state-selected]=\"value.selected\">\n                        <div class=\"dx-collection-item\">\n                            <ng-container *ngTemplateOutlet=\"contentTemplate, context: { data: value }\"></ng-container>\n                        </div>\n                    </div>\n                </div>\n            </dx-scroll-view>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: i2.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "directive", type: DxActionDirective, selector: "[dxAction]", inputs: ["dxActionModel", "dxAction"] }, { kind: "directive", type: AccordionDirective, selector: "[dxaAccordion]", inputs: ["dxaAccordion"] }, { kind: "directive", type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }] });
+CollectionEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CollectionEditorComponent, selector: "dxa-collectioneditor", inputs: { options: ["data", "options"], contentTemplate: "contentTemplate" }, ngImport: i0, template: "<div class=\"dx-collectioneditor\">\n    <div [dxaAccordion]=\"data\" [dxMutationObserver]=\"data.keyboardHelper\">\n        <div class=\"dx-collectioneditor-header dx-accordion-header\">\n            <div class=\"dx-editor-header\">\n                <div role=\"treeitem\"\n                    class=\"dx-field dx-accessibility-focus-border-accented dxrd-accessibility-accordion-trigger\"\n                    [attr.aria-expanded]=\"data.alwaysShow || !data.collapsed ? 'true' : 'false'\"\n                    [attr.aria-owns]=\"data.contentId\" [attr.id]=\"data.headerId\">\n                    <div *ngIf=\"data.showButtons\" class=\"dx-collectioneditor-actions-wrapper\">\n                        <dx-button *ngIf=\"data.buttons.up.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.up.action($event)\" [disabled]=\"data.buttons.up.disabled\"\n                            icon=\"dxrd-svg-operations-moveup\" iconClass=\"dx-image-moveup\"\n                            [template]=\"data.buttons.up.template\"\n                            [attr.title]=\"data.buttons.up.text\"></dx-button>\n                        <dx-button *ngIf=\"data.buttons.down.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.down.action($event)\" [disabled]=\"data.buttons.down.disabled\"\n                            icon=\"dxrd-svg-operations-movedown\" iconClass=\"dx-image-movedown\"\n                            [template]=\"data.buttons.down.template\"\n                            [attr.title]=\"data.buttons.down.text\"></dx-button>\n                        <div class=\"dx-collectioneditor-action-separator\"></div>\n                        <dx-button *ngIf=\"data.buttons.add.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.add.action($event)\" [disabled]=\"data.buttons.add.disabled\"\n                            [template]=\"data.buttons.add.template\"\n                            icon=\"dxrd-svg-operations-add\" iconClass=\"dx-image-add\"\n                            [attr.title]=\"data.buttons.add.text\"></dx-button>\n                        <dx-button *ngIf=\"data.buttons.delete.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.delete.action($event)\" [disabled]=\"data.buttons.delete.disabled\"\n                            [template]=\"data.buttons.delete.template\"\n                            icon=\"dxrd-svg-operations-remove\" iconClass=\"dx-image-remove\"\n                            [attr.title]=\"data.buttons.delete.text\"></dx-button>\n                    </div>\n                    <div *ngIf=\"!!data.displayName\" class=\"dx-collectioneditor-header-text dxd-text-primary\"\n                        [style.padding-left]=\"data.padding + 'px'\">\n                        <dxa-template class=\"dx-collapsing-image dxrd-display-inline-block\"\n                            template=\"dxrd-svg-collapsed\"\n                            [class.dx-image-expanded]=\"!data.collapsed \"></dxa-template>\n                        <div class=\"dx-group-header-font dxd-text-primary dxrd-display-inline-block\" [attr.title]=\"data.displayName\">\n                            {{data.displayName}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div role=\"group\" class=\"dx-accordion-content\"\n            [attr.aria-hidden]=\"!data.alwaysShow && data.collapsed ? 'true' : 'false'\"\n            [attr.aria-labelledby]=\"data.headerId\" [attr.id]=\"data.contentId\">\n            <dx-scroll-view [hidden]=\"data.disabled\" showScrollbar=\"onHover\" [disabled]=\"!data.showScroll\"\n                [useNative]=\"false\" [scrollByThumb]=\"true\" (onInitialized)=\"onScrollViewInitialized($event)\">\n                <div *ngIf=\"data.values.length === 0\"\n                    class=\"dx-collectioneditor-empty dxd-empty-area-placeholder-text-color dxd-text-info\">\n                    <span class=\"dx-collectioneditor-empty-text\">{{data.emptyAreaText}}</span>\n                </div>\n                <div *ngIf=\"data.values.length !== 0\" class=\"dx-collectioneditor-items\">\n                    <div *ngFor=\"let value of data.values\"\n                        class=\"dx-collectioneditor-item-container dxd-button-back-color dxd-state-normal dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented\"\n                        [attr.aria-selected]=\"value.selected\" [dxActionModel]=\"value\" [dxAction]=\"value.select\"\n                        [class.dxd-state-selected]=\"value.selected\">\n                        <div class=\"dx-collection-item\">\n                            <ng-container *ngTemplateOutlet=\"contentTemplate, context: { data: value }\"></ng-container>\n                        </div>\n                    </div>\n                </div>\n            </dx-scroll-view>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: i2.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "directive", type: DxActionDirective, selector: "[dxAction]", inputs: ["dxActionModel", "dxAction"] }, { kind: "directive", type: AccordionDirective, selector: "[dxaAccordion]", inputs: ["dxaAccordion"] }, { kind: "directive", type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CollectionEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dxa-collectioneditor', template: "<div class=\"dx-collectioneditor\">\n    <div [dxaAccordion]=\"data\" [dxMutationObserver]=\"data.keyboardHelper\">\n        <div class=\"dx-collectioneditor-header dx-accordion-header\">\n            <div class=\"dx-editor-header\">\n                <div role=\"treeitem\"\n                    class=\"dx-field dx-accessibility-focus-border-accented dxrd-accessibility-accordion-trigger\"\n                    [attr.aria-expanded]=\"data.alwaysShow || !data.collapsed ? 'true' : 'false'\"\n                    [attr.aria-owns]=\"data.contentId\" [attr.id]=\"data.headerId\">\n                    <div *ngIf=\"data.showButtons\" class=\"dx-collectioneditor-actions-wrapper\">\n                        <dx-button *ngIf=\"data.buttons.up.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.up.action($event)\" [disabled]=\"data.buttons.up.disabled\"\n                            icon=\"dxrd-svg-operations-moveup\" iconClass=\"dx-image-moveup\"\n                            [template]=\"data.buttons.up.template\"\n                            [attr.title]=\"data.buttons.up.text\"></dx-button>\n                        <dx-button *ngIf=\"data.buttons.down.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.down.action($event)\" [disabled]=\"data.buttons.down.disabled\"\n                            icon=\"dxrd-svg-operations-movedown\" iconClass=\"dx-image-movedown\"\n                            [template]=\"data.buttons.down.template\"\n                            [attr.title]=\"data.buttons.down.text\"></dx-button>\n                        <div class=\"dx-collectioneditor-action-separator\"></div>\n                        <dx-button *ngIf=\"data.buttons.add.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.add.action($event)\" [disabled]=\"data.buttons.add.disabled\"\n                            [template]=\"data.buttons.add.template\"\n                            icon=\"dxrd-svg-operations-add\" iconClass=\"dx-image-add\"\n                            [attr.title]=\"data.buttons.add.text\"></dx-button>\n                        <dx-button *ngIf=\"data.buttons.delete.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.delete.action($event)\" [disabled]=\"data.buttons.delete.disabled\"\n                            [template]=\"data.buttons.delete.template\"\n                            icon=\"dxrd-svg-operations-remove\" iconClass=\"dx-image-remove\"\n                            [attr.title]=\"data.buttons.delete.text\"></dx-button>\n                    </div>\n                    <div *ngIf=\"!!data.displayName\" class=\"dx-collectioneditor-header-text dxd-text-primary\"\n                        [style.padding-left]=\"data.padding + 'px'\">\n                        <dxa-template class=\"propertygrid-editor-collapsed dx-collapsing-image\"\n                            template=\"dxrd-svg-collapsed\"\n                            [class.dx-image-expanded]=\"!data.collapsed \"></dxa-template>\n                        <div class=\"dx-group-header-font dxd-text-primary\" [attr.title]=\"data.displayName\">\n                            {{data.displayName}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div role=\"group\" class=\"dx-accordion-content\"\n            [attr.aria-hidden]=\"!data.alwaysShow && data.collapsed ? 'true' : 'false'\"\n            [attr.aria-labelledby]=\"data.headerId\" [attr.id]=\"data.contentId\">\n            <dx-scroll-view [hidden]=\"data.disabled\" showScrollbar=\"onHover\" [disabled]=\"!data.showScroll\"\n                [useNative]=\"false\" [scrollByThumb]=\"true\" (onInitialized)=\"onScrollViewInitialized($event)\">\n                <div *ngIf=\"data.values.length === 0\"\n                    class=\"dx-collectioneditor-empty dxd-empty-area-placeholder-text-color dxd-text-info\">\n                    <span class=\"dx-collectioneditor-empty-text\">{{data.emptyAreaText}}</span>\n                </div>\n                <div *ngIf=\"data.values.length !== 0\" class=\"dx-collectioneditor-items\">\n                    <div *ngFor=\"let value of data.values\"\n                        class=\"dx-collectioneditor-item-container dxd-button-back-color dxd-state-normal dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented\"\n                        [attr.aria-selected]=\"value.selected\" [dxActionModel]=\"value\" [dxAction]=\"value.select\"\n                        [class.dxd-state-selected]=\"value.selected\">\n                        <div class=\"dx-collection-item\">\n                            <ng-container *ngTemplateOutlet=\"contentTemplate, context: { data: value }\"></ng-container>\n                        </div>\n                    </div>\n                </div>\n            </dx-scroll-view>\n        </div>\n    </div>\n</div>" }]
+            args: [{ selector: 'dxa-collectioneditor', template: "<div class=\"dx-collectioneditor\">\n    <div [dxaAccordion]=\"data\" [dxMutationObserver]=\"data.keyboardHelper\">\n        <div class=\"dx-collectioneditor-header dx-accordion-header\">\n            <div class=\"dx-editor-header\">\n                <div role=\"treeitem\"\n                    class=\"dx-field dx-accessibility-focus-border-accented dxrd-accessibility-accordion-trigger\"\n                    [attr.aria-expanded]=\"data.alwaysShow || !data.collapsed ? 'true' : 'false'\"\n                    [attr.aria-owns]=\"data.contentId\" [attr.id]=\"data.headerId\">\n                    <div *ngIf=\"data.showButtons\" class=\"dx-collectioneditor-actions-wrapper\">\n                        <dx-button *ngIf=\"data.buttons.up.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.up.action($event)\" [disabled]=\"data.buttons.up.disabled\"\n                            icon=\"dxrd-svg-operations-moveup\" iconClass=\"dx-image-moveup\"\n                            [template]=\"data.buttons.up.template\"\n                            [attr.title]=\"data.buttons.up.text\"></dx-button>\n                        <dx-button *ngIf=\"data.buttons.down.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.down.action($event)\" [disabled]=\"data.buttons.down.disabled\"\n                            icon=\"dxrd-svg-operations-movedown\" iconClass=\"dx-image-movedown\"\n                            [template]=\"data.buttons.down.template\"\n                            [attr.title]=\"data.buttons.down.text\"></dx-button>\n                        <div class=\"dx-collectioneditor-action-separator\"></div>\n                        <dx-button *ngIf=\"data.buttons.add.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.add.action($event)\" [disabled]=\"data.buttons.add.disabled\"\n                            [template]=\"data.buttons.add.template\"\n                            icon=\"dxrd-svg-operations-add\" iconClass=\"dx-image-add\"\n                            [attr.title]=\"data.buttons.add.text\"></dx-button>\n                        <dx-button *ngIf=\"data.buttons.delete.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.delete.action($event)\" [disabled]=\"data.buttons.delete.disabled\"\n                            [template]=\"data.buttons.delete.template\"\n                            icon=\"dxrd-svg-operations-remove\" iconClass=\"dx-image-remove\"\n                            [attr.title]=\"data.buttons.delete.text\"></dx-button>\n                    </div>\n                    <div *ngIf=\"!!data.displayName\" class=\"dx-collectioneditor-header-text dxd-text-primary\"\n                        [style.padding-left]=\"data.padding + 'px'\">\n                        <dxa-template class=\"dx-collapsing-image dxrd-display-inline-block\"\n                            template=\"dxrd-svg-collapsed\"\n                            [class.dx-image-expanded]=\"!data.collapsed \"></dxa-template>\n                        <div class=\"dx-group-header-font dxd-text-primary dxrd-display-inline-block\" [attr.title]=\"data.displayName\">\n                            {{data.displayName}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div role=\"group\" class=\"dx-accordion-content\"\n            [attr.aria-hidden]=\"!data.alwaysShow && data.collapsed ? 'true' : 'false'\"\n            [attr.aria-labelledby]=\"data.headerId\" [attr.id]=\"data.contentId\">\n            <dx-scroll-view [hidden]=\"data.disabled\" showScrollbar=\"onHover\" [disabled]=\"!data.showScroll\"\n                [useNative]=\"false\" [scrollByThumb]=\"true\" (onInitialized)=\"onScrollViewInitialized($event)\">\n                <div *ngIf=\"data.values.length === 0\"\n                    class=\"dx-collectioneditor-empty dxd-empty-area-placeholder-text-color dxd-text-info\">\n                    <span class=\"dx-collectioneditor-empty-text\">{{data.emptyAreaText}}</span>\n                </div>\n                <div *ngIf=\"data.values.length !== 0\" class=\"dx-collectioneditor-items\">\n                    <div *ngFor=\"let value of data.values\"\n                        class=\"dx-collectioneditor-item-container dxd-button-back-color dxd-state-normal dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented\"\n                        [attr.aria-selected]=\"value.selected\" [dxActionModel]=\"value\" [dxAction]=\"value.select\"\n                        [class.dxd-state-selected]=\"value.selected\">\n                        <div class=\"dx-collection-item\">\n                            <ng-container *ngTemplateOutlet=\"contentTemplate, context: { data: value }\"></ng-container>\n                        </div>\n                    </div>\n                </div>\n            </dx-scroll-view>\n        </div>\n    </div>\n</div>" }]
         }], ctorParameters: function () { return []; }, propDecorators: { options: [{
                 type: Input,
                 args: ['data']
@@ -1201,16 +1198,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 class EditorComponent extends EditorComponentBase {
 }
 EditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: EditorComponent, selector: "dxv-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"dx-editor\" [hidden]=\"!data.visible\">\n    <div class=\"dx-group\" [dxaAccordion]=\"data\">\n        <div class=\"dx-editor-header\" [class.dxrd-empty-header]=\"data.hideEditorHeader\">\n            <div *ngIf=\"!data.hideEditorHeader\" class=\"dx-field\"\n            [attr.role]=\"'treeitem'\"\n            [attr.id]=\"data.isComplexEditor && data.headerId\"\n            [attr.aria-owns]=\"data.isComplexEditor && data.contentId\"\n            [attr.aria-expanded]=\"data.isComplexEditor && (data.alwaysShow || !data.collapsed ? 'true' : 'false')\"\n            [class.dxrd-accessibility-accordion-trigger]=\"data.isComplexEditor\"\n            [class.dx-accessibility-focus-border-accented]=\"data.isComplexEditor\"\n            [class.dxrd-vertical-label]=\"data.editorOptions && data.editorOptions.hasVerticalLabel\"\n            >\n                    <div class=\"dx-field-label dxrd-group-label dx-accordion-header dxd-text-primary\"\n                    [style.padding-left]=\"data.padding['padding-left'] + 'px'\"\n                    [class.dx-accordion-empty]=\"data.templateName === 'dx-emptyHeader'\"\n                    [class.dxd-back-secondary]=\"data.isGroupLabel\"\n                    [class.dx-accordion-hide-collapsing-image]=\"data.alwaysShow\">\n                        <div *ngIf=\"data.isComplexEditor\" [attr.disabled]=\"data.templateName !== 'dx-emptyHeader'\">\n                            <dxa-template *ngIf=\"!data.alwaysShow\" \n                            template=\"dxrd-svg-collapsed\" \n                            class=\"propertygrid-editor-collapsed dx-collapsing-image\"\n                            [class.dx-image-expanded]=\"!data.collapsed\"\n                            ></dxa-template>\n                            <div *ngIf=\"!!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\" data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"></div>\n                            <div *ngIf=\"!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\">\n                                {{data.displayName}}\n                            </div>\n                        </div>\n                        <label *ngIf=\"!data.isComplexEditor && !!data.textToSearch\" \n                        class=\"propertygrid-editor-displayName\"\n                        data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"\n                        [attr.title]=\"data.displayName\"\n                        [attr.for]=\"data.editorInputId\"\n                        [class.dx-field-label-required]=\"data.isRequired\"\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\n                        ></label>\n                        <label *ngIf=\"!data.isComplexEditor && !data.textToSearch\" \n                        class=\"propertygrid-editor-displayName\"\n                        [attr.title]=\"data.displayName\"\n                        [attr.for]=\"data.editorInputId\"\n                        [class.dx-field-label-required]=\"data.isRequired\"\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\n                        >{{data.displayName}}</label>                    \n                </div>\n                <div class=\"dx-field-value\" \n                [class.dxd-border-accented]=\"data.isPropertyHighlighted\">\n                    <div data-bind=\"service: { name: 'createEditorAddOn' }\"></div>\n                    <dxa-lazy-template *ngIf=\"data.templateName !== 'dx-emptyHeader'\" [isResolved]=\"isResolved\" [template]=\"data.templateName\" [data]=\"data\"></dxa-lazy-template>\n                    <!-- ko if: templateName !== 'dx-emptyHeader' -->\n                    <!-- ko lazy: { innerBindings: { template: templateName }, isResolved: function(val) { $data.setIsRendered(val) } } -->\n                    <!-- /ko -->\n                    <!-- /ko -->\n                </div>\n            </div>\n        </div>\n        <div *ngIf=\"data.isComplexEditor\" class=\"dx-editor-content dx-accordion-content\" role=\"group\" \n            [attr.aria-labelledby]=\"data.headerId\"\n            [attr.id]=\"data.contentId\"\n            [attr.aria-hidden]=\"!data.alwaysShow && data.collapsed ? 'true' : 'false'\">\n            <dxa-template *ngIf=\"data.editorCreated\" [template]=\"data.contentTemplateName\" [data]=\"data\"></dxa-template>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "directive", type: AccordionDirective, selector: "[dxaAccordion]", inputs: ["dxaAccordion"] }, { kind: "component", type: LazyTemplateComponent, selector: "dxa-lazy-template", inputs: ["resolver", "isResolved"] }] });
+EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: EditorComponent, selector: "dxv-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"dx-editor\" [hidden]=\"!data.visible\">\n    <div class=\"dx-group\" [dxaAccordion]=\"data\">\n        <div class=\"dx-editor-header\" [class.dxrd-empty-header]=\"data.hideEditorHeader\">\n            <div *ngIf=\"!data.hideEditorHeader\" class=\"dx-field\"\n            [attr.role]=\"'treeitem'\"\n            [attr.id]=\"data.isComplexEditor && data.headerId\"\n            [attr.aria-owns]=\"data.isComplexEditor && data.contentId\"\n            [attr.aria-expanded]=\"data.isComplexEditor && (data.alwaysShow || !data.collapsed ? 'true' : 'false')\"\n            [class.dxrd-accessibility-accordion-trigger]=\"data.isComplexEditor\"\n            [class.dx-accessibility-focus-border-accented]=\"data.isComplexEditor\"\n            [class.dxrd-vertical-label]=\"data.editorOptions && data.editorOptions.hasVerticalLabel\"\n            >\n                    <div class=\"dx-field-label dxrd-group-label dx-accordion-header dxd-text-primary\"\n                    [style.padding-left]=\"data.padding['padding-left'] + 'px'\"\n                    [class.dx-accordion-empty]=\"data.templateName === 'dx-emptyHeader'\"\n                    [class.dxd-back-secondary]=\"data.isGroupLabel\"\n                    [class.dx-accordion-hide-collapsing-image]=\"data.alwaysShow\">\n                        <div *ngIf=\"data.isComplexEditor\" [attr.disabled]=\"data.templateName !== 'dx-emptyHeader'\">\n                            <dxa-template *ngIf=\"!data.alwaysShow\" \n                            template=\"dxrd-svg-collapsed\" \n                            class=\"dx-collapsing-image  dxrd-display-inline-block\"\n                            [class.dx-image-expanded]=\"!data.collapsed\"\n                            ></dxa-template>\n                            <div *ngIf=\"!!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\" data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"></div>\n                            <div *ngIf=\"!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\">\n                                {{data.displayName}}\n                            </div>\n                        </div>\n                        <label *ngIf=\"!data.isComplexEditor && !!data.textToSearch\" \n                        class=\"propertygrid-editor-displayName\"\n                        data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"\n                        [attr.title]=\"data.displayName\"\n                        [attr.for]=\"data.editorInputId\"\n                        [class.dx-field-label-required]=\"data.isRequired\"\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\n                        ></label>\n                        <label *ngIf=\"!data.isComplexEditor && !data.textToSearch\" \n                        class=\"propertygrid-editor-displayName\"\n                        [attr.title]=\"data.displayName\"\n                        [attr.for]=\"data.editorInputId\"\n                        [class.dx-field-label-required]=\"data.isRequired\"\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\n                        >{{data.displayName}}</label>                    \n                </div>\n                <div class=\"dx-field-value\" \n                [class.dxd-border-accented]=\"data.isPropertyHighlighted\">\n                    <div data-bind=\"service: { name: 'createEditorAddOn' }\"></div>\n                    <dxa-lazy-template *ngIf=\"data.templateName !== 'dx-emptyHeader'\" [isResolved]=\"isResolved\" [template]=\"data.templateName\" [data]=\"data\"></dxa-lazy-template>\n                    <!-- ko if: templateName !== 'dx-emptyHeader' -->\n                    <!-- ko lazy: { innerBindings: { template: templateName }, isResolved: function(val) { $data.setIsRendered(val) } } -->\n                    <!-- /ko -->\n                    <!-- /ko -->\n                </div>\n            </div>\n        </div>\n        <div *ngIf=\"data.isComplexEditor\" class=\"dx-editor-content dx-accordion-content\" role=\"group\" \n            [attr.aria-labelledby]=\"data.headerId\"\n            [attr.id]=\"data.contentId\"\n            [attr.aria-hidden]=\"!data.alwaysShow && data.collapsed ? 'true' : 'false'\">\n            <dxa-template *ngIf=\"data.editorCreated\" [template]=\"data.contentTemplateName\" [data]=\"data\"></dxa-template>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "directive", type: AccordionDirective, selector: "[dxaAccordion]", inputs: ["dxaAccordion"] }, { kind: "component", type: LazyTemplateComponent, selector: "dxa-lazy-template", inputs: ["resolver", "isResolved"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dxv-editor', template: "<div class=\"dx-editor\" [hidden]=\"!data.visible\">\n    <div class=\"dx-group\" [dxaAccordion]=\"data\">\n        <div class=\"dx-editor-header\" [class.dxrd-empty-header]=\"data.hideEditorHeader\">\n            <div *ngIf=\"!data.hideEditorHeader\" class=\"dx-field\"\n            [attr.role]=\"'treeitem'\"\n            [attr.id]=\"data.isComplexEditor && data.headerId\"\n            [attr.aria-owns]=\"data.isComplexEditor && data.contentId\"\n            [attr.aria-expanded]=\"data.isComplexEditor && (data.alwaysShow || !data.collapsed ? 'true' : 'false')\"\n            [class.dxrd-accessibility-accordion-trigger]=\"data.isComplexEditor\"\n            [class.dx-accessibility-focus-border-accented]=\"data.isComplexEditor\"\n            [class.dxrd-vertical-label]=\"data.editorOptions && data.editorOptions.hasVerticalLabel\"\n            >\n                    <div class=\"dx-field-label dxrd-group-label dx-accordion-header dxd-text-primary\"\n                    [style.padding-left]=\"data.padding['padding-left'] + 'px'\"\n                    [class.dx-accordion-empty]=\"data.templateName === 'dx-emptyHeader'\"\n                    [class.dxd-back-secondary]=\"data.isGroupLabel\"\n                    [class.dx-accordion-hide-collapsing-image]=\"data.alwaysShow\">\n                        <div *ngIf=\"data.isComplexEditor\" [attr.disabled]=\"data.templateName !== 'dx-emptyHeader'\">\n                            <dxa-template *ngIf=\"!data.alwaysShow\" \n                            template=\"dxrd-svg-collapsed\" \n                            class=\"propertygrid-editor-collapsed dx-collapsing-image\"\n                            [class.dx-image-expanded]=\"!data.collapsed\"\n                            ></dxa-template>\n                            <div *ngIf=\"!!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\" data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"></div>\n                            <div *ngIf=\"!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\">\n                                {{data.displayName}}\n                            </div>\n                        </div>\n                        <label *ngIf=\"!data.isComplexEditor && !!data.textToSearch\" \n                        class=\"propertygrid-editor-displayName\"\n                        data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"\n                        [attr.title]=\"data.displayName\"\n                        [attr.for]=\"data.editorInputId\"\n                        [class.dx-field-label-required]=\"data.isRequired\"\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\n                        ></label>\n                        <label *ngIf=\"!data.isComplexEditor && !data.textToSearch\" \n                        class=\"propertygrid-editor-displayName\"\n                        [attr.title]=\"data.displayName\"\n                        [attr.for]=\"data.editorInputId\"\n                        [class.dx-field-label-required]=\"data.isRequired\"\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\n                        >{{data.displayName}}</label>                    \n                </div>\n                <div class=\"dx-field-value\" \n                [class.dxd-border-accented]=\"data.isPropertyHighlighted\">\n                    <div data-bind=\"service: { name: 'createEditorAddOn' }\"></div>\n                    <dxa-lazy-template *ngIf=\"data.templateName !== 'dx-emptyHeader'\" [isResolved]=\"isResolved\" [template]=\"data.templateName\" [data]=\"data\"></dxa-lazy-template>\n                    <!-- ko if: templateName !== 'dx-emptyHeader' -->\n                    <!-- ko lazy: { innerBindings: { template: templateName }, isResolved: function(val) { $data.setIsRendered(val) } } -->\n                    <!-- /ko -->\n                    <!-- /ko -->\n                </div>\n            </div>\n        </div>\n        <div *ngIf=\"data.isComplexEditor\" class=\"dx-editor-content dx-accordion-content\" role=\"group\" \n            [attr.aria-labelledby]=\"data.headerId\"\n            [attr.id]=\"data.contentId\"\n            [attr.aria-hidden]=\"!data.alwaysShow && data.collapsed ? 'true' : 'false'\">\n            <dxa-template *ngIf=\"data.editorCreated\" [template]=\"data.contentTemplateName\" [data]=\"data\"></dxa-template>\n        </div>\n    </div>\n</div>" }]
+            args: [{ selector: 'dxv-editor', template: "<div class=\"dx-editor\" [hidden]=\"!data.visible\">\n    <div class=\"dx-group\" [dxaAccordion]=\"data\">\n        <div class=\"dx-editor-header\" [class.dxrd-empty-header]=\"data.hideEditorHeader\">\n            <div *ngIf=\"!data.hideEditorHeader\" class=\"dx-field\"\n            [attr.role]=\"'treeitem'\"\n            [attr.id]=\"data.isComplexEditor && data.headerId\"\n            [attr.aria-owns]=\"data.isComplexEditor && data.contentId\"\n            [attr.aria-expanded]=\"data.isComplexEditor && (data.alwaysShow || !data.collapsed ? 'true' : 'false')\"\n            [class.dxrd-accessibility-accordion-trigger]=\"data.isComplexEditor\"\n            [class.dx-accessibility-focus-border-accented]=\"data.isComplexEditor\"\n            [class.dxrd-vertical-label]=\"data.editorOptions && data.editorOptions.hasVerticalLabel\"\n            >\n                    <div class=\"dx-field-label dxrd-group-label dx-accordion-header dxd-text-primary\"\n                    [style.padding-left]=\"data.padding['padding-left'] + 'px'\"\n                    [class.dx-accordion-empty]=\"data.templateName === 'dx-emptyHeader'\"\n                    [class.dxd-back-secondary]=\"data.isGroupLabel\"\n                    [class.dx-accordion-hide-collapsing-image]=\"data.alwaysShow\">\n                        <div *ngIf=\"data.isComplexEditor\" [attr.disabled]=\"data.templateName !== 'dx-emptyHeader'\">\n                            <dxa-template *ngIf=\"!data.alwaysShow\" \n                            template=\"dxrd-svg-collapsed\" \n                            class=\"dx-collapsing-image  dxrd-display-inline-block\"\n                            [class.dx-image-expanded]=\"!data.collapsed\"\n                            ></dxa-template>\n                            <div *ngIf=\"!!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\" data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"></div>\n                            <div *ngIf=\"!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\">\n                                {{data.displayName}}\n                            </div>\n                        </div>\n                        <label *ngIf=\"!data.isComplexEditor && !!data.textToSearch\" \n                        class=\"propertygrid-editor-displayName\"\n                        data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"\n                        [attr.title]=\"data.displayName\"\n                        [attr.for]=\"data.editorInputId\"\n                        [class.dx-field-label-required]=\"data.isRequired\"\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\n                        ></label>\n                        <label *ngIf=\"!data.isComplexEditor && !data.textToSearch\" \n                        class=\"propertygrid-editor-displayName\"\n                        [attr.title]=\"data.displayName\"\n                        [attr.for]=\"data.editorInputId\"\n                        [class.dx-field-label-required]=\"data.isRequired\"\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\n                        >{{data.displayName}}</label>                    \n                </div>\n                <div class=\"dx-field-value\" \n                [class.dxd-border-accented]=\"data.isPropertyHighlighted\">\n                    <div data-bind=\"service: { name: 'createEditorAddOn' }\"></div>\n                    <dxa-lazy-template *ngIf=\"data.templateName !== 'dx-emptyHeader'\" [isResolved]=\"isResolved\" [template]=\"data.templateName\" [data]=\"data\"></dxa-lazy-template>\n                    <!-- ko if: templateName !== 'dx-emptyHeader' -->\n                    <!-- ko lazy: { innerBindings: { template: templateName }, isResolved: function(val) { $data.setIsRendered(val) } } -->\n                    <!-- /ko -->\n                    <!-- /ko -->\n                </div>\n            </div>\n        </div>\n        <div *ngIf=\"data.isComplexEditor\" class=\"dx-editor-content dx-accordion-content\" role=\"group\" \n            [attr.aria-labelledby]=\"data.headerId\"\n            [attr.id]=\"data.contentId\"\n            [attr.aria-hidden]=\"!data.alwaysShow && data.collapsed ? 'true' : 'false'\">\n            <dxa-template *ngIf=\"data.editorCreated\" [template]=\"data.contentTemplateName\" [data]=\"data\"></dxa-template>\n        </div>\n    </div>\n</div>" }]
         }] });
 
 class MultiValueComponent extends EditorDropDownComponentBase {
-    constructor(_cd) {
-        super(_cd);
-    }
     getOptions() {
         return this.data.value.getOptions({
             dataSource: this.data.value.dataSource,
@@ -1246,12 +1240,33 @@ class MultiValueComponent extends EditorDropDownComponentBase {
         // this.options = this.data.value.getOptions(this.options);
     }
 }
-MultiValueComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiValueComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MultiValueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MultiValueComponent, selector: "dxv-multivalue", usesInheritance: true, ngImport: i0, template: "<dx-tag-box #target #widget\n    [dataSource]=\"options.dataSource\"\n    [searchEnabled]=\"options.searchEnabled\"\n    [useItemTextAsTitle]=\"options.useItemTextAsTitle\"\n    [searchExpr]=\"options.searchExpr\"\n    [value]=\"options.value\"\n    [displayExpr]=\"options.displayExpr\"\n    [valueExpr]=\"options.valueExpr\"\n    [multiline]=\"options.multiline\"\n    [showSelectionControls]=\"options.showSelectionControls\"\n    (onValueChanged)=\"options.onValueChanged($event)\"\n    [inputAttr]=\"options.inputAttr\"\n    [disabled]=\"options.disabled\"\n    [selectAllText]=\"options.selectAllText\"\n    [placeholder]=\"options.placeholder\"\n    [maxDisplayedTags]=\"options.maxDisplayedTags\"\n    [showMultiTagOnly]=\"options.showMultiTagOnly\"\n    [dropDownOptions]=\"dropDownOptions\"\n    >\n    <dx-validator *ngIf=\"!!data.validationRules\" [validationRules]=\"validatorOptions.validationRules\">\n    </dx-validator>\n</dx-tag-box>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DxTagBoxComponent, selector: "dx-tag-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyValueMode", "buttons", "customItemCreateEvent", "dataSource", "deferRendering", "disabled", "displayExpr", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hideSelectedItems", "hint", "hoverStateEnabled", "inputAttr", "isDirty", "isValid", "items", "itemTemplate", "label", "labelMode", "maxDisplayedTags", "maxFilterQueryLength", "maxLength", "minSearchLength", "multiline", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectAllMode", "selectAllText", "selectedItems", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showMultiTagOnly", "showSelectionControls", "stylingMode", "tabIndex", "tagTemplate", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCustomItemCreating", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onMultiTagPreparing", "onOpened", "onOptionChanged", "onSelectAllValueChanged", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyValueModeChange", "buttonsChange", "customItemCreateEventChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hideSelectedItemsChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isDirtyChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxDisplayedTagsChange", "maxFilterQueryLengthChange", "maxLengthChange", "minSearchLengthChange", "multilineChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectAllModeChange", "selectAllTextChange", "selectedItemsChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showMultiTagOnlyChange", "showSelectionControlsChange", "stylingModeChange", "tabIndexChange", "tagTemplateChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i2.DxValidatorComponent, selector: "dx-validator", inputs: ["adapter", "elementAttr", "height", "name", "validationGroup", "validationRules", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValidated", "adapterChange", "elementAttrChange", "heightChange", "nameChange", "validationGroupChange", "validationRulesChange", "widthChange"] }] });
+MultiValueComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiValueComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+MultiValueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MultiValueComponent, selector: "dxv-multivalue", usesInheritance: true, ngImport: i0, template: "<dx-tag-box #target #widget\n    [dataSource]=\"options.dataSource\"\n    [searchEnabled]=\"options.searchEnabled\"\n    [useItemTextAsTitle]=\"options.useItemTextAsTitle\"\n    [searchExpr]=\"options.searchExpr\"\n    [value]=\"options.value\"\n    [displayExpr]=\"options.displayExpr\"\n    [valueExpr]=\"options.valueExpr\"\n    [multiline]=\"options.multiline\"\n    [showSelectionControls]=\"options.showSelectionControls\"\n    (onValueChanged)=\"options.onValueChanged($event)\"\n    (onMultiTagPreparing)=\"options.onMultiTagPreparing($event)\"\n    [inputAttr]=\"options.inputAttr\"\n    [disabled]=\"options.disabled\"\n    [selectAllText]=\"options.selectAllText\"\n    [placeholder]=\"options.placeholder\"\n    [maxDisplayedTags]=\"options.maxDisplayedTags\"\n    [showMultiTagOnly]=\"options.showMultiTagOnly\"\n    [dropDownOptions]=\"dropDownOptions\"\n    >\n    <dx-validator *ngIf=\"!!data.validationRules\" [validationRules]=\"validatorOptions.validationRules\">\n    </dx-validator>\n</dx-tag-box>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DxTagBoxComponent, selector: "dx-tag-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyValueMode", "buttons", "customItemCreateEvent", "dataSource", "deferRendering", "disabled", "displayExpr", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hideSelectedItems", "hint", "hoverStateEnabled", "inputAttr", "isDirty", "isValid", "items", "itemTemplate", "label", "labelMode", "maxDisplayedTags", "maxFilterQueryLength", "maxLength", "minSearchLength", "multiline", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectAllMode", "selectAllText", "selectedItems", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showMultiTagOnly", "showSelectionControls", "stylingMode", "tabIndex", "tagTemplate", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCustomItemCreating", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onMultiTagPreparing", "onOpened", "onOptionChanged", "onSelectAllValueChanged", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyValueModeChange", "buttonsChange", "customItemCreateEventChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hideSelectedItemsChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isDirtyChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxDisplayedTagsChange", "maxFilterQueryLengthChange", "maxLengthChange", "minSearchLengthChange", "multilineChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectAllModeChange", "selectAllTextChange", "selectedItemsChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showMultiTagOnlyChange", "showSelectionControlsChange", "stylingModeChange", "tabIndexChange", "tagTemplateChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i2.DxValidatorComponent, selector: "dx-validator", inputs: ["adapter", "elementAttr", "height", "name", "validationGroup", "validationRules", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValidated", "adapterChange", "elementAttrChange", "heightChange", "nameChange", "validationGroupChange", "validationRulesChange", "widthChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiValueComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dxv-multivalue', template: "<dx-tag-box #target #widget\n    [dataSource]=\"options.dataSource\"\n    [searchEnabled]=\"options.searchEnabled\"\n    [useItemTextAsTitle]=\"options.useItemTextAsTitle\"\n    [searchExpr]=\"options.searchExpr\"\n    [value]=\"options.value\"\n    [displayExpr]=\"options.displayExpr\"\n    [valueExpr]=\"options.valueExpr\"\n    [multiline]=\"options.multiline\"\n    [showSelectionControls]=\"options.showSelectionControls\"\n    (onValueChanged)=\"options.onValueChanged($event)\"\n    [inputAttr]=\"options.inputAttr\"\n    [disabled]=\"options.disabled\"\n    [selectAllText]=\"options.selectAllText\"\n    [placeholder]=\"options.placeholder\"\n    [maxDisplayedTags]=\"options.maxDisplayedTags\"\n    [showMultiTagOnly]=\"options.showMultiTagOnly\"\n    [dropDownOptions]=\"dropDownOptions\"\n    >\n    <dx-validator *ngIf=\"!!data.validationRules\" [validationRules]=\"validatorOptions.validationRules\">\n    </dx-validator>\n</dx-tag-box>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
+            args: [{ selector: 'dxv-multivalue', template: "<dx-tag-box #target #widget\n    [dataSource]=\"options.dataSource\"\n    [searchEnabled]=\"options.searchEnabled\"\n    [useItemTextAsTitle]=\"options.useItemTextAsTitle\"\n    [searchExpr]=\"options.searchExpr\"\n    [value]=\"options.value\"\n    [displayExpr]=\"options.displayExpr\"\n    [valueExpr]=\"options.valueExpr\"\n    [multiline]=\"options.multiline\"\n    [showSelectionControls]=\"options.showSelectionControls\"\n    (onValueChanged)=\"options.onValueChanged($event)\"\n    (onMultiTagPreparing)=\"options.onMultiTagPreparing($event)\"\n    [inputAttr]=\"options.inputAttr\"\n    [disabled]=\"options.disabled\"\n    [selectAllText]=\"options.selectAllText\"\n    [placeholder]=\"options.placeholder\"\n    [maxDisplayedTags]=\"options.maxDisplayedTags\"\n    [showMultiTagOnly]=\"options.showMultiTagOnly\"\n    [dropDownOptions]=\"dropDownOptions\"\n    >\n    <dx-validator *ngIf=\"!!data.validationRules\" [validationRules]=\"validatorOptions.validationRules\">\n    </dx-validator>\n</dx-tag-box>\n" }]
+        }] });
+
+class PopoverComponent {
+    constructor(_element, _cd) {
+        this._element = _element;
+        this._cd = _cd;
+    }
+    ngAfterViewInit() {
+        const element = this._element.nativeElement;
+        this.container = this.popover.getPopupContainer(element);
+        this._cd.detectChanges();
+    }
+}
+PopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PopoverComponent, selector: "dxa-propertygrid-popoverservice", inputs: { popover: ["data", "popover"] }, ngImport: i0, template: "<dx-popover\n    [container]=\"container\"\n    [target]=\"popover.target\"\n    position=\"bottom\"\n    [showCloseButton]=\"false\"\n    (onHiding)=\"popover.onHiding()\"\n    [hideOnOutsideClick]=\"true\"\n    [hideOnParentScroll]=\"true\"\n    [width]=\"350\"\n    [(visible)]=\"popover.visible\"\n>\n<div class=\"propertygrid-editor-description-popover-content\">\n    <span>{{popover.data}}</span>\n</div>\n</dx-popover>", dependencies: [{ kind: "component", type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "enableBodyScroll", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxa-propertygrid-popoverservice', template: "<dx-popover\n    [container]=\"container\"\n    [target]=\"popover.target\"\n    position=\"bottom\"\n    [showCloseButton]=\"false\"\n    (onHiding)=\"popover.onHiding()\"\n    [hideOnOutsideClick]=\"true\"\n    [hideOnParentScroll]=\"true\"\n    [width]=\"350\"\n    [(visible)]=\"popover.visible\"\n>\n<div class=\"propertygrid-editor-description-popover-content\">\n    <span>{{popover.data}}</span>\n</div>\n</dx-popover>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { popover: [{
+                type: Input,
+                args: ['data']
+            }] } });
 
 class ExportOptionsComponent {
     constructor() {
@@ -1262,19 +1277,16 @@ class ExportOptionsComponent {
     }
 }
 ExportOptionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ExportOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ExportOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ExportOptionsComponent, selector: "dxv-export-options", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"dxrd-preview-export-options-wrapper dxrd-preview-property-wrapper\" [hidden]=\"!(data.active && data.visible)\">\n    <div class=\"dxrd-right-panel-header dxd-text-primary\">\n        <span>{{headerText}}</span>\n    </div>\n    <dx-scroll-view class=\"dxrd-right-panel-body\" \n        showScrollbar=\"onHover\"\n        [useNative]=\"false\"\n        [scrollByThumb]=\"true\"\n        (onInitialized)=\"onScrollViewInitialized($event)\">\n        <div class=\"dx-fieldset\" [dxMutationObserver]=\"data.keyboardHelper\">\n            <div class=\"dxrd-right-panel-content dxrd-export-options-content\" role=\"tree\">\n                <dxa-template template=\"dx-propertieseditor\" [data]=\"data.propertyGrid\"></dxa-template>\n            </div>\n        </div>\n    </dx-scroll-view>\n</div>", dependencies: [{ kind: "component", type: i2.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "directive", type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }] });
+ExportOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ExportOptionsComponent, selector: "dxv-export-options", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"dxrd-preview-export-options-wrapper dxrd-preview-property-wrapper\" [hidden]=\"!(data.active && data.visible)\">\n    <div class=\"dxrd-right-panel-header dxd-text-primary\">\n        <span>{{headerText}}</span>\n    </div>\n    <dx-scroll-view class=\"dxrd-right-panel-body\" \n        showScrollbar=\"onHover\"\n        [useNative]=\"false\"\n        [scrollByThumb]=\"true\"\n        (onInitialized)=\"onScrollViewInitialized($event)\">\n        <div class=\"dx-fieldset\" [dxMutationObserver]=\"data.keyboardHelper\">\n            <div class=\"dxrd-right-panel-content dxrd-export-options-content\" role=\"tree\">\n                <dxa-template template=\"dx-propertieseditor\" [data]=\"data.propertyGrid\"></dxa-template>\n            </div>\n            <dxa-propertygrid-popoverservice [data]=\"data.propertyGrid.popover\"></dxa-propertygrid-popoverservice>\n        </div>\n    </dx-scroll-view>\n</div>", dependencies: [{ kind: "component", type: i2.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { kind: "component", type: PopoverComponent, selector: "dxa-propertygrid-popoverservice", inputs: ["data"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "directive", type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ExportOptionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dxv-export-options', template: "<div class=\"dxrd-preview-export-options-wrapper dxrd-preview-property-wrapper\" [hidden]=\"!(data.active && data.visible)\">\n    <div class=\"dxrd-right-panel-header dxd-text-primary\">\n        <span>{{headerText}}</span>\n    </div>\n    <dx-scroll-view class=\"dxrd-right-panel-body\" \n        showScrollbar=\"onHover\"\n        [useNative]=\"false\"\n        [scrollByThumb]=\"true\"\n        (onInitialized)=\"onScrollViewInitialized($event)\">\n        <div class=\"dx-fieldset\" [dxMutationObserver]=\"data.keyboardHelper\">\n            <div class=\"dxrd-right-panel-content dxrd-export-options-content\" role=\"tree\">\n                <dxa-template template=\"dx-propertieseditor\" [data]=\"data.propertyGrid\"></dxa-template>\n            </div>\n        </div>\n    </dx-scroll-view>\n</div>" }]
+            args: [{ selector: 'dxv-export-options', template: "<div class=\"dxrd-preview-export-options-wrapper dxrd-preview-property-wrapper\" [hidden]=\"!(data.active && data.visible)\">\n    <div class=\"dxrd-right-panel-header dxd-text-primary\">\n        <span>{{headerText}}</span>\n    </div>\n    <dx-scroll-view class=\"dxrd-right-panel-body\" \n        showScrollbar=\"onHover\"\n        [useNative]=\"false\"\n        [scrollByThumb]=\"true\"\n        (onInitialized)=\"onScrollViewInitialized($event)\">\n        <div class=\"dx-fieldset\" [dxMutationObserver]=\"data.keyboardHelper\">\n            <div class=\"dxrd-right-panel-content dxrd-export-options-content\" role=\"tree\">\n                <dxa-template template=\"dx-propertieseditor\" [data]=\"data.propertyGrid\"></dxa-template>\n            </div>\n            <dxa-propertygrid-popoverservice [data]=\"data.propertyGrid.popover\"></dxa-propertygrid-popoverservice>\n        </div>\n    </dx-scroll-view>\n</div>" }]
         }], ctorParameters: function () { return []; }, propDecorators: { data: [{
                 type: Input,
                 args: ['data']
             }] } });
 
 class MultiValueEditableComponent extends EditorComponentBase {
-    constructor(_cd) {
-        super(_cd);
-    }
     getEditorOptions() {
         const editor = this.data.getModel();
         const getOptionsInfoProperty = (propertyName) => !propertyName ? this.data.info
@@ -1299,12 +1311,12 @@ class MultiValueEditableComponent extends EditorComponentBase {
         this._cd.detectChanges();
     }
 }
-MultiValueEditableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiValueEditableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+MultiValueEditableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiValueEditableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
 MultiValueEditableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MultiValueEditableComponent, selector: "dxv-multivalue-editable", viewQueries: [{ propertyName: "properties", first: true, predicate: ["properties"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"data.value\" class=\"dxrd-editor\" [hidden]=\"!data.visible\">\n    <dxa-collectioneditor [data]=\"options.data\" [contentTemplate]=\"options.contentTemplate\"></dxa-collectioneditor>\n    <!-- <dxa-template [data]=\"options\" template=\"dx-collectioneditor\"></dxa-template> -->\n</div>\n\n<ng-template #properties let-data=\"data\">\n    <dxa-template [data]=\"data.getProperties()\" template=\"dx-propertieseditor\"></dxa-template>\n</ng-template>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollectionEditorComponent, selector: "dxa-collectioneditor", inputs: ["data", "contentTemplate"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiValueEditableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dxv-multivalue-editable', template: "<div *ngIf=\"data.value\" class=\"dxrd-editor\" [hidden]=\"!data.visible\">\n    <dxa-collectioneditor [data]=\"options.data\" [contentTemplate]=\"options.contentTemplate\"></dxa-collectioneditor>\n    <!-- <dxa-template [data]=\"options\" template=\"dx-collectioneditor\"></dxa-template> -->\n</div>\n\n<ng-template #properties let-data=\"data\">\n    <dxa-template [data]=\"data.getProperties()\" template=\"dx-propertieseditor\"></dxa-template>\n</ng-template>" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { properties: [{
+        }], propDecorators: { properties: [{
                 type: ViewChild,
                 args: ['properties']
             }] } });
@@ -1375,10 +1387,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 class CalendarComponent {
 }
 CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CalendarComponent, selector: "dxv-daterange-calendar", inputs: { data: "data" }, ngImport: i0, template: "<dx-calendar [tabIndex]=\"0\" class=\"dx-accessibility-calendar-item dx-accessibility-daterange-item\"\n    [value]=\"data.value\"\n    cellTemplate=\"select_cell\" \n    [height]=\"data.height\"\n    [min]=\"data.min\"\n    (onValueChanged)=\"data.onValueChanged($event)\"\n>\n    <div *dxTemplate=\"let item of 'select_cell'\" class=\"dxrv-daterange-cell\">\n        <div class=\"dxrv-daterange-cell-text\">{{item.text}}</div>\n        <div [class.dxd-back-accented]=\"data.inRange(item.date)\"></div>\n    </div>\n</dx-calendar>", dependencies: [{ kind: "directive", type: i2$1.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i2.DxCalendarComponent, selector: "dx-calendar", inputs: ["accessKey", "activeStateEnabled", "cellTemplate", "dateSerializationFormat", "disabled", "disabledDates", "elementAttr", "firstDayOfWeek", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "isDirty", "isValid", "max", "maxZoomLevel", "min", "minZoomLevel", "name", "readOnly", "rtlEnabled", "selectionMode", "selectWeekOnClick", "showTodayButton", "showWeekNumbers", "tabIndex", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "visible", "weekNumberRule", "width", "zoomLevel"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "cellTemplateChange", "dateSerializationFormatChange", "disabledChange", "disabledDatesChange", "elementAttrChange", "firstDayOfWeekChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "isDirtyChange", "isValidChange", "maxChange", "maxZoomLevelChange", "minChange", "minZoomLevelChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "selectionModeChange", "selectWeekOnClickChange", "showTodayButtonChange", "showWeekNumbersChange", "tabIndexChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "visibleChange", "weekNumberRuleChange", "widthChange", "zoomLevelChange", "onBlur"] }] });
+CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CalendarComponent, selector: "dxv-daterange-calendar", inputs: { data: "data" }, ngImport: i0, template: "<dx-calendar [tabIndex]=\"0\" class=\"dx-accessibility-calendar-item dx-accessibility-daterange-item\"\n    [min]=\"data.min\"\n    [value]=\"data.value\"\n    cellTemplate=\"select_cell\" \n    [height]=\"data.height\"\n    (onValueChanged)=\"data.onValueChanged($event)\"\n>\n    <div *dxTemplate=\"let item of 'select_cell'\" class=\"dxrv-daterange-cell\">\n        <div class=\"dxrv-daterange-cell-text\">{{item.text}}</div>\n        <div [class.dxd-back-accented]=\"data.inRange(item.date)\"></div>\n    </div>\n</dx-calendar>", dependencies: [{ kind: "directive", type: i2$1.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i2.DxCalendarComponent, selector: "dx-calendar", inputs: ["accessKey", "activeStateEnabled", "cellTemplate", "dateSerializationFormat", "disabled", "disabledDates", "elementAttr", "firstDayOfWeek", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "isDirty", "isValid", "max", "maxZoomLevel", "min", "minZoomLevel", "name", "readOnly", "rtlEnabled", "selectionMode", "selectWeekOnClick", "showTodayButton", "showWeekNumbers", "tabIndex", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "visible", "weekNumberRule", "width", "zoomLevel"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "cellTemplateChange", "dateSerializationFormatChange", "disabledChange", "disabledDatesChange", "elementAttrChange", "firstDayOfWeekChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "isDirtyChange", "isValidChange", "maxChange", "maxZoomLevelChange", "minChange", "minZoomLevelChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "selectionModeChange", "selectWeekOnClickChange", "showTodayButtonChange", "showWeekNumbersChange", "tabIndexChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "visibleChange", "weekNumberRuleChange", "widthChange", "zoomLevelChange", "onBlur"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dxv-daterange-calendar', template: "<dx-calendar [tabIndex]=\"0\" class=\"dx-accessibility-calendar-item dx-accessibility-daterange-item\"\n    [value]=\"data.value\"\n    cellTemplate=\"select_cell\" \n    [height]=\"data.height\"\n    [min]=\"data.min\"\n    (onValueChanged)=\"data.onValueChanged($event)\"\n>\n    <div *dxTemplate=\"let item of 'select_cell'\" class=\"dxrv-daterange-cell\">\n        <div class=\"dxrv-daterange-cell-text\">{{item.text}}</div>\n        <div [class.dxd-back-accented]=\"data.inRange(item.date)\"></div>\n    </div>\n</dx-calendar>" }]
+            args: [{ selector: 'dxv-daterange-calendar', template: "<dx-calendar [tabIndex]=\"0\" class=\"dx-accessibility-calendar-item dx-accessibility-daterange-item\"\n    [min]=\"data.min\"\n    [value]=\"data.value\"\n    cellTemplate=\"select_cell\" \n    [height]=\"data.height\"\n    (onValueChanged)=\"data.onValueChanged($event)\"\n>\n    <div *dxTemplate=\"let item of 'select_cell'\" class=\"dxrv-daterange-cell\">\n        <div class=\"dxrv-daterange-cell-text\">{{item.text}}</div>\n        <div [class.dxd-back-accented]=\"data.inRange(item.date)\"></div>\n    </div>\n</dx-calendar>" }]
         }], propDecorators: { data: [{
                 type: Input,
                 args: ['data']
@@ -2265,10 +2277,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 class MobileParametersPopupComponent extends ComponentWithParentContainer {
 }
 MobileParametersPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MobileParametersPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MobileParametersPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MobileParametersPopupComponent, selector: "dxv-mobile-parameters-popup", inputs: { data: "data" }, usesInheritance: true, ngImport: i0, template: "<dx-popup [wrapperAttr]=\"{ class: 'dxrd-menu-parameters-popup' }\" [showTitle]=\"false\" (onHidden)=\"data.onHidden($event)\" width=\"100vw\" height=\"100vh\" [visible]=\"data.visible\" [container]=\"parentContainer\">\n    <dxa-template template=\"dxrv-preview-parameters-mobile\" [data]=\"data\"></dxa-template>\n</dx-popup>", dependencies: [{ kind: "component", type: i2.DxPopupComponent, selector: "dx-popup", inputs: ["accessKey", "animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "dragAndResizeArea", "dragEnabled", "dragOutsideBoundary", "elementAttr", "enableBodyScroll", "focusStateEnabled", "fullScreen", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "resizeEnabled", "restorePosition", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showTitle", "tabIndex", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onResize", "onResizeEnd", "onResizeStart", "onShowing", "onShown", "onTitleRendered", "accessKeyChange", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "dragAndResizeAreaChange", "dragEnabledChange", "dragOutsideBoundaryChange", "elementAttrChange", "enableBodyScrollChange", "focusStateEnabledChange", "fullScreenChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "resizeEnabledChange", "restorePositionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showTitleChange", "tabIndexChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }] });
+MobileParametersPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MobileParametersPopupComponent, selector: "dxv-mobile-parameters-popup", inputs: { data: "data" }, usesInheritance: true, ngImport: i0, template: "<dx-popup [wrapperAttr]=\"{ class: 'dxrd-menu-parameters-popup' }\" [showTitle]=\"false\" (onHidden)=\"data.onHidden($event)\" width=\"100vw\" height=\"100vh\" [visible]=\"data.visible\" [container]=\"parentContainer\">\n    <dxa-template *ngIf=\"data.visible\" template=\"dxrv-preview-parameters-mobile\" [data]=\"data\"></dxa-template>\n</dx-popup>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DxPopupComponent, selector: "dx-popup", inputs: ["accessKey", "animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "dragAndResizeArea", "dragEnabled", "dragOutsideBoundary", "elementAttr", "enableBodyScroll", "focusStateEnabled", "fullScreen", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "resizeEnabled", "restorePosition", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showTitle", "tabIndex", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onResize", "onResizeEnd", "onResizeStart", "onShowing", "onShown", "onTitleRendered", "accessKeyChange", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "dragAndResizeAreaChange", "dragEnabledChange", "dragOutsideBoundaryChange", "elementAttrChange", "enableBodyScrollChange", "focusStateEnabledChange", "fullScreenChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "resizeEnabledChange", "restorePositionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showTitleChange", "tabIndexChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MobileParametersPopupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dxv-mobile-parameters-popup', template: "<dx-popup [wrapperAttr]=\"{ class: 'dxrd-menu-parameters-popup' }\" [showTitle]=\"false\" (onHidden)=\"data.onHidden($event)\" width=\"100vw\" height=\"100vh\" [visible]=\"data.visible\" [container]=\"parentContainer\">\n    <dxa-template template=\"dxrv-preview-parameters-mobile\" [data]=\"data\"></dxa-template>\n</dx-popup>" }]
+            args: [{ selector: 'dxv-mobile-parameters-popup', template: "<dx-popup [wrapperAttr]=\"{ class: 'dxrd-menu-parameters-popup' }\" [showTitle]=\"false\" (onHidden)=\"data.onHidden($event)\" width=\"100vw\" height=\"100vh\" [visible]=\"data.visible\" [container]=\"parentContainer\">\n    <dxa-template *ngIf=\"data.visible\" template=\"dxrv-preview-parameters-mobile\" [data]=\"data\"></dxa-template>\n</dx-popup>" }]
         }], propDecorators: { data: [{
                 type: Input,
                 args: ['data']
@@ -2765,6 +2777,7 @@ DxReportViewerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ve
         DxReportViewerTabPanelSettingsComponent,
         DxReportViewerSearchSettingsComponent,
         TabpanelComponent,
+        PopoverComponent,
         PropertygridComponent,
         TreelistComponent,
         TreeListGroupComponent,
@@ -2942,6 +2955,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         DxReportViewerTabPanelSettingsComponent,
                         DxReportViewerSearchSettingsComponent,
                         TabpanelComponent,
+                        PopoverComponent,
                         PropertygridComponent,
                         TreelistComponent,
                         TreeListGroupComponent,