devexpress-reporting-angular 23.2.5 → 24.1.1-alpha-2485-0223

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Output, Input, Injectable, ViewChild, Directive, HostListener, ElementRef, PLATFORM_ID, Inject, ContentChild, NgModule } from '@angular/core';
+import { EventEmitter, Component, Output, Input, Injectable, PLATFORM_ID, Inject, ViewChild, Directive, HostListener, ElementRef, ContentChild, NgModule } from '@angular/core';
 import { __decorate } from 'tslib';
 import { _inputConverter, _booleanConverter, DxReportingComponent } from 'devexpress-reporting-angular/core';
 import '@devexpress/analytics-core/dx-analytics-core-svg-templates';
@@ -38,46 +38,29 @@ import { HighlightEngine } from '@devexpress/analytics-core/widgets/_searchHighl
 import * as i1$1 from '@angular/platform-browser';
 import { initializeSlideBinding, initializeMobileZoomBinding, initializeMobileSearchBinding, initializeMobilePaginatorBinding } from 'devexpress-reporting/viewer/mobile/internal/_mobileBindings';
 import { dxGalleryExtender } from 'devexpress-reporting/viewer/mobile/internal/gallery/_galleryComponent';
+import { JSReportParametersPanelBinding } from 'devexpress-reporting/viewer/binding/jsReportParametersPanelBinding';
 
-class DxReportViewerCallbacksComponent {
+class DxReportViewerCallbacksBaseComponent {
     constructor() {
-        this.CustomizeElements = new EventEmitter();
-        this.PreviewClick = new EventEmitter();
-        this.EditingFieldChanged = new EventEmitter();
-        this.DocumentReady = new EventEmitter();
-        this.CustomizeExportOptions = new EventEmitter();
         this.CustomizeParameterEditors = new EventEmitter();
         this.CustomizeParameterLookUpSource = new EventEmitter();
         this.ParametersReset = new EventEmitter();
         this.ParametersSubmitted = new EventEmitter();
         this.ParametersInitialized = new EventEmitter();
-        this.CustomizeMenuActions = new EventEmitter();
         this.CustomizeLocalization = new EventEmitter();
         this.OnInitializing = new EventEmitter();
         this.BeforeRender = new EventEmitter();
         this.OnServerError = new EventEmitter();
-        this.OnExport = new EventEmitter();
     }
 }
-DxReportViewerCallbacksComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DxReportViewerCallbacksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DxReportViewerCallbacksComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DxReportViewerCallbacksComponent, selector: "dxrv-callbacks", outputs: { CustomizeElements: "CustomizeElements", PreviewClick: "PreviewClick", EditingFieldChanged: "EditingFieldChanged", DocumentReady: "DocumentReady", CustomizeExportOptions: "CustomizeExportOptions", CustomizeParameterEditors: "CustomizeParameterEditors", CustomizeParameterLookUpSource: "CustomizeParameterLookUpSource", ParametersReset: "ParametersReset", ParametersSubmitted: "ParametersSubmitted", ParametersInitialized: "ParametersInitialized", CustomizeMenuActions: "CustomizeMenuActions", CustomizeLocalization: "CustomizeLocalization", OnInitializing: "OnInitializing", BeforeRender: "BeforeRender", OnServerError: "OnServerError", OnExport: "OnExport" }, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DxReportViewerCallbacksComponent, decorators: [{
+DxReportViewerCallbacksBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DxReportViewerCallbacksBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DxReportViewerCallbacksBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DxReportViewerCallbacksBaseComponent, selector: "ng-component", outputs: { CustomizeParameterEditors: "CustomizeParameterEditors", CustomizeParameterLookUpSource: "CustomizeParameterLookUpSource", ParametersReset: "ParametersReset", ParametersSubmitted: "ParametersSubmitted", ParametersInitialized: "ParametersInitialized", CustomizeLocalization: "CustomizeLocalization", OnInitializing: "OnInitializing", BeforeRender: "BeforeRender", OnServerError: "OnServerError" }, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DxReportViewerCallbacksBaseComponent, decorators: [{
             type: Component,
             args: [{
-                    template: '',
-                    selector: 'dxrv-callbacks'
+                    template: ''
                 }]
-        }], propDecorators: { CustomizeElements: [{
-                type: Output
-            }], PreviewClick: [{
-                type: Output
-            }], EditingFieldChanged: [{
-                type: Output
-            }], DocumentReady: [{
-                type: Output
-            }], CustomizeExportOptions: [{
-                type: Output
-            }], CustomizeParameterEditors: [{
+        }], propDecorators: { CustomizeParameterEditors: [{
                 type: Output
             }], CustomizeParameterLookUpSource: [{
                 type: Output
@@ -87,8 +70,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }], ParametersInitialized: [{
                 type: Output
-            }], CustomizeMenuActions: [{
-                type: Output
             }], CustomizeLocalization: [{
                 type: Output
             }], OnInitializing: [{
@@ -97,22 +78,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }], OnServerError: [{
                 type: Output
+            }] } });
+
+class DxReportViewerCallbacksComponent extends DxReportViewerCallbacksBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.CustomizeElements = new EventEmitter();
+        this.PreviewClick = new EventEmitter();
+        this.EditingFieldChanged = new EventEmitter();
+        this.DocumentReady = new EventEmitter();
+        this.CustomizeExportOptions = new EventEmitter();
+        this.CustomizeMenuActions = new EventEmitter();
+        this.OnExport = new EventEmitter();
+    }
+}
+DxReportViewerCallbacksComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DxReportViewerCallbacksComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DxReportViewerCallbacksComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DxReportViewerCallbacksComponent, selector: "dxrv-callbacks", outputs: { CustomizeElements: "CustomizeElements", PreviewClick: "PreviewClick", EditingFieldChanged: "EditingFieldChanged", DocumentReady: "DocumentReady", CustomizeExportOptions: "CustomizeExportOptions", CustomizeMenuActions: "CustomizeMenuActions", OnExport: "OnExport" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DxReportViewerCallbacksComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                    selector: 'dxrv-callbacks'
+                }]
+        }], propDecorators: { CustomizeElements: [{
+                type: Output
+            }], PreviewClick: [{
+                type: Output
+            }], EditingFieldChanged: [{
+                type: Output
+            }], DocumentReady: [{
+                type: Output
+            }], CustomizeExportOptions: [{
+                type: Output
+            }], CustomizeMenuActions: [{
+                type: Output
             }], OnExport: [{
                 type: Output
             }] } });
 
-class DxReportViewerRequestOptionsComponent {
+class DxRequestOptionsBaseComponent {
     constructor() {
         this.invokeAction = '/DXXRDV';
     }
 }
-DxReportViewerRequestOptionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DxReportViewerRequestOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DxReportViewerRequestOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DxReportViewerRequestOptionsComponent, selector: "dxrv-request-options", inputs: { invokeAction: "invokeAction", getLocalizationAction: "getLocalizationAction", host: "host" }, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DxReportViewerRequestOptionsComponent, decorators: [{
+DxRequestOptionsBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DxRequestOptionsBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DxRequestOptionsBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DxRequestOptionsBaseComponent, selector: "ng-component", inputs: { invokeAction: "invokeAction", getLocalizationAction: "getLocalizationAction", host: "host" }, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DxRequestOptionsBaseComponent, decorators: [{
             type: Component,
             args: [{
-                    template: '',
-                    selector: 'dxrv-request-options'
+                    template: ''
                 }]
         }], propDecorators: { invokeAction: [{
                 type: Input
@@ -122,6 +136,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }] } });
 
+class DxReportViewerRequestOptionsComponent extends DxRequestOptionsBaseComponent {
+}
+DxReportViewerRequestOptionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DxReportViewerRequestOptionsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DxReportViewerRequestOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DxReportViewerRequestOptionsComponent, selector: "dxrv-request-options", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DxReportViewerRequestOptionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                    selector: 'dxrv-request-options'
+                }]
+        }] });
+
 class DxReportViewerExportSettingsComponent {
     getSerializableSettings() {
         return {
@@ -277,6 +303,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }] });
 
+class DxReportViewerBaseComponent extends DxReportingComponent {
+    constructor(renderer, platformId, _viewer, _cd, _accessibilitySettings) {
+        super(renderer, platformId);
+        this._viewer = _viewer;
+        this._cd = _cd;
+        this._accessibilitySettings = _accessibilitySettings;
+        this._reportUrl = '';
+    }
+    getControlOptions() {
+        return {
+            rtl: this.rtl,
+            accessibilityCompliant: this.accessibilityCompliant,
+            reportUrl: this._reportUrl,
+            keepReportOnComponentDisposal: this.keepReportOnComponentDisposal,
+            callbacks: {}
+        };
+    }
+    ngAfterViewInit() {
+        var _a;
+        super.ngAfterViewInit();
+        this.model = this._binding.sender;
+        this.viewModel = (_a = this.model.GetPreviewModel()) === null || _a === void 0 ? void 0 : _a.getViewModel();
+        this._disposeViewModelChangedSubscription = this._subscribeToViewModelChanged(this.viewModel);
+        this._disposableCallback = this.model.events.on('propertyChanged', (args) => {
+            if (args.propertyName === 'previewModel') {
+                this.viewModel = this.model.GetPreviewModel().getViewModel();
+                this._disposeViewModelChangedSubscription && this._disposeViewModelChangedSubscription();
+                this._disposeViewModelChangedSubscription = this._subscribeToViewModelChanged(this.viewModel);
+            }
+        });
+        this._cd.detectChanges();
+    }
+    ngOnDestroy() {
+        this._disposableCallback && this._disposableCallback();
+        this._disposeViewModelChangedSubscription && this._disposeViewModelChangedSubscription();
+        this._binding.dispose();
+        super.ngOnDestroy();
+    }
+    _subscribeToViewModelChanged(viewModel) {
+        var _a;
+        const eventHolder = viewModel;
+        return (_a = eventHolder === null || eventHolder === void 0 ? void 0 : eventHolder._viewModelEvents) === null || _a === void 0 ? void 0 : _a.on(ViewModelChangedEvent, () => this._cd.markForCheck());
+    }
+    get accessibilityCompliant() {
+        return this._accessibilitySettings.accessibilityCompliant;
+    }
+    set accessibilityCompliant(value) {
+        this._accessibilitySettings.accessibilityCompliant = value;
+    }
+    get reportUrl() {
+        return this._reportUrl;
+    }
+    set reportUrl(reportUrl) {
+        this._reportUrl = reportUrl;
+        if (this.bindingSender)
+            this.bindingSender.OpenReport(reportUrl);
+    }
+}
+DxReportViewerBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DxReportViewerBaseComponent, deps: [{ token: i0.Renderer2 }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AccessibilitySettings }], target: i0.ɵɵFactoryTarget.Component });
+DxReportViewerBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DxReportViewerBaseComponent, selector: "ng-component", inputs: { accessibilityCompliant: "accessibilityCompliant", keepReportOnComponentDisposal: "keepReportOnComponentDisposal", rtl: "rtl", reportUrl: "reportUrl" }, providers: [AccessibilitySettings], usesInheritance: true, ngImport: i0, template: '', isInline: true });
+__decorate([
+    _inputConverter(_booleanConverter)
+], DxReportViewerBaseComponent.prototype, "accessibilityCompliant", null);
+__decorate([
+    _inputConverter(_booleanConverter)
+], DxReportViewerBaseComponent.prototype, "keepReportOnComponentDisposal", void 0);
+__decorate([
+    _inputConverter(_booleanConverter)
+], DxReportViewerBaseComponent.prototype, "rtl", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DxReportViewerBaseComponent, decorators: [{
+            type: Component,
+            args: [{ template: '', providers: [AccessibilitySettings] }]
+        }], ctorParameters: function () {
+        return [{ type: i0.Renderer2 }, { type: Object, decorators: [{
+                        type: Inject,
+                        args: [PLATFORM_ID]
+                    }] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AccessibilitySettings }];
+    }, propDecorators: { accessibilityCompliant: [{
+                type: Input
+            }], keepReportOnComponentDisposal: [{
+                type: Input
+            }], rtl: [{
+                type: Input
+            }], reportUrl: [{
+                type: Input
+            }] } });
+
 class TemplateEngine {
     constructor() {
         this.templates = [];
@@ -1107,10 +1220,10 @@ class ParameterspanelComponent {
     }
 }
 ParameterspanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ParameterspanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ParameterspanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ParameterspanelComponent, selector: "dxv-parameters", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"dxrd-preview-parameters-wrapper dxrd-preview-property-wrapper\" [hidden]=\"!(data.active && data.visible)\">\n    <div class=\"dxrd-right-panel-header dxd-text-primary\">\n        {{data.model.headerText}}\n    </div>\n    <div *ngIf=\"!data.model || data.model.isEmpty\" class=\"dxrd-group-header-parameters-empty dxd-text-primary\">\n        {{data.model.emptyText}}\n    </div>\n    <dx-scroll-view *ngIf=\"data.model || data.model.isEmpty()\" class=\"dxrd-right-panel-body\" id=\"propertiesPanel\"\n        [showScrollbar]=\"'onHover'\"\n        [useNative]=\"false\"\n        [scrollByThumb]=\"true\"\n        (onInitialized)=\"onScrollViewInitialized($event)\"\n        [dxMutationObserver]=\"data.keyboardHelper\"\n        >\n        <div role=\"tree\" class=\"dx-fieldset dxrd-right-panel-content\">\n            <dxa-template template=\"dx-propertieseditor\" [data]=\"data.propertyGrid\"></dxa-template>\n        </div>\n        <div class=\"dxrd-preview-parameter-actions-container\">\n            <dx-load-indicator class=\"dxrd-preview-parameter-action dxrd-preview-loading\"\n                [visible]=\"data.model.parametersLoading\"></dx-load-indicator>\n            <dx-button class=\"dxrd-preview-parameter-action dxrdp-parameters-reset dx-accessibility-focus-border-accented\"\n                [text]=\"data.model.resetButton.text\"\n                (onClick)=\"data.model.resetButton.onClick($event)\">\n            </dx-button>\n            <dx-button class=\"dxrd-preview-parameter-action dxrdp-parameters-submit dx-accessibility-focus-border-accented\"\n                [text]=\"data.model.submitButton.text\"\n                (onClick)=\"data.model.submitButton.onClick($event)\">\n            </dx-button>\n        </div>\n    </dx-scroll-view>\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: i2.DxLoadIndicatorComponent, selector: "dx-load-indicator", inputs: ["elementAttr", "height", "hint", "indicatorSrc", "rtlEnabled", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "elementAttrChange", "heightChange", "hintChange", "indicatorSrcChange", "rtlEnabledChange", "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: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }] });
+ParameterspanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ParameterspanelComponent, selector: "dxv-parameters", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"dxrd-preview-parameters-wrapper dxrd-preview-property-wrapper\" [hidden]=\"!(data.active && data.visible)\">\n    <div class=\"dxrd-right-panel-header dxd-text-primary\" [hidden]=\"!data.model.showHeader\">\n        {{data.model.headerText}}\n    </div>\n    <div *ngIf=\"!data.model || data.model.isEmpty\" class=\"dxrd-group-header-parameters-empty dxd-text-primary\">\n        {{data.model.emptyText}}\n    </div>\n    <dx-scroll-view *ngIf=\"data.model || data.model.isEmpty()\" class=\"dxrd-right-panel-body\" id=\"propertiesPanel\"\n        [showScrollbar]=\"'onHover'\"\n        [useNative]=\"false\"\n        [scrollByThumb]=\"true\"\n        (onInitialized)=\"onScrollViewInitialized($event)\"\n        [dxMutationObserver]=\"data.keyboardHelper\"\n        >\n        <div role=\"tree\" class=\"dx-fieldset dxrd-right-panel-content\">\n            <dxa-template template=\"dx-propertieseditor\" [data]=\"data.propertyGrid\"></dxa-template>\n        </div>\n        <div class=\"dxrd-preview-parameter-actions-container\" [hidden]=\"!data.model.showButtons\">\n            <dx-load-indicator class=\"dxrd-preview-parameter-action dxrd-preview-loading\"\n                [visible]=\"data.model.parametersLoading\"></dx-load-indicator>\n            <dx-button *ngFor=\"let button of data.model.buttons\" class=\"dxrd-preview-parameter-action dxrdp-parameters-reset dx-accessibility-focus-border-accented\"\n                [text]=\"button.text\"\n                (onClick)=\"button.onClick($event)\">\n            </dx-button>\n        </div>\n    </dx-scroll-view>\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: "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.DxLoadIndicatorComponent, selector: "dx-load-indicator", inputs: ["elementAttr", "height", "hint", "indicatorSrc", "rtlEnabled", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "elementAttrChange", "heightChange", "hintChange", "indicatorSrcChange", "rtlEnabledChange", "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: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ParameterspanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dxv-parameters', template: "<div class=\"dxrd-preview-parameters-wrapper dxrd-preview-property-wrapper\" [hidden]=\"!(data.active && data.visible)\">\n    <div class=\"dxrd-right-panel-header dxd-text-primary\">\n        {{data.model.headerText}}\n    </div>\n    <div *ngIf=\"!data.model || data.model.isEmpty\" class=\"dxrd-group-header-parameters-empty dxd-text-primary\">\n        {{data.model.emptyText}}\n    </div>\n    <dx-scroll-view *ngIf=\"data.model || data.model.isEmpty()\" class=\"dxrd-right-panel-body\" id=\"propertiesPanel\"\n        [showScrollbar]=\"'onHover'\"\n        [useNative]=\"false\"\n        [scrollByThumb]=\"true\"\n        (onInitialized)=\"onScrollViewInitialized($event)\"\n        [dxMutationObserver]=\"data.keyboardHelper\"\n        >\n        <div role=\"tree\" class=\"dx-fieldset dxrd-right-panel-content\">\n            <dxa-template template=\"dx-propertieseditor\" [data]=\"data.propertyGrid\"></dxa-template>\n        </div>\n        <div class=\"dxrd-preview-parameter-actions-container\">\n            <dx-load-indicator class=\"dxrd-preview-parameter-action dxrd-preview-loading\"\n                [visible]=\"data.model.parametersLoading\"></dx-load-indicator>\n            <dx-button class=\"dxrd-preview-parameter-action dxrdp-parameters-reset dx-accessibility-focus-border-accented\"\n                [text]=\"data.model.resetButton.text\"\n                (onClick)=\"data.model.resetButton.onClick($event)\">\n            </dx-button>\n            <dx-button class=\"dxrd-preview-parameter-action dxrdp-parameters-submit dx-accessibility-focus-border-accented\"\n                [text]=\"data.model.submitButton.text\"\n                (onClick)=\"data.model.submitButton.onClick($event)\">\n            </dx-button>\n        </div>\n    </dx-scroll-view>\n</div>" }]
+            args: [{ selector: 'dxv-parameters', template: "<div class=\"dxrd-preview-parameters-wrapper dxrd-preview-property-wrapper\" [hidden]=\"!(data.active && data.visible)\">\n    <div class=\"dxrd-right-panel-header dxd-text-primary\" [hidden]=\"!data.model.showHeader\">\n        {{data.model.headerText}}\n    </div>\n    <div *ngIf=\"!data.model || data.model.isEmpty\" class=\"dxrd-group-header-parameters-empty dxd-text-primary\">\n        {{data.model.emptyText}}\n    </div>\n    <dx-scroll-view *ngIf=\"data.model || data.model.isEmpty()\" class=\"dxrd-right-panel-body\" id=\"propertiesPanel\"\n        [showScrollbar]=\"'onHover'\"\n        [useNative]=\"false\"\n        [scrollByThumb]=\"true\"\n        (onInitialized)=\"onScrollViewInitialized($event)\"\n        [dxMutationObserver]=\"data.keyboardHelper\"\n        >\n        <div role=\"tree\" class=\"dx-fieldset dxrd-right-panel-content\">\n            <dxa-template template=\"dx-propertieseditor\" [data]=\"data.propertyGrid\"></dxa-template>\n        </div>\n        <div class=\"dxrd-preview-parameter-actions-container\" [hidden]=\"!data.model.showButtons\">\n            <dx-load-indicator class=\"dxrd-preview-parameter-action dxrd-preview-loading\"\n                [visible]=\"data.model.parametersLoading\"></dx-load-indicator>\n            <dx-button *ngFor=\"let button of data.model.buttons\" class=\"dxrd-preview-parameter-action dxrdp-parameters-reset dx-accessibility-focus-border-accented\"\n                [text]=\"button.text\"\n                (onClick)=\"button.onClick($event)\">\n            </dx-button>\n        </div>\n    </dx-scroll-view>\n</div>" }]
         }], propDecorators: { data: [{
                 type: Input,
                 args: ['data']
@@ -1269,10 +1382,10 @@ class MultiValueComponent extends EditorDropDownComponentBase {
     }
 }
 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"] }] });
+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    [selectAllMode]=\"options.selectAllMode\"\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    (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" }]
+            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    [selectAllMode]=\"options.selectAllMode\"\n    >\n    <dx-validator *ngIf=\"!!data.validationRules\" [validationRules]=\"validatorOptions.validationRules\">\n    </dx-validator>\n</dx-tag-box>\n" }]
         }] });
 
 class PopoverComponent {
@@ -1287,7 +1400,7 @@ class PopoverComponent {
     }
 }
 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"] }] });
+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", "deferRendering", "disabled", "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", "deferRenderingChange", "disabledChange", "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>" }]
@@ -1388,6 +1501,9 @@ class DateRangeComponent {
         this._editor.dispose();
     }
     ngOnInit() {
+        this.options.visibilityChanged = (newValue) => {
+            this._changeDetectorRef.markForCheck();
+        };
         this._editor = createDateRangeEditor(this.options, this._currentElement.nativeElement, this.options);
         this.data = this._editor.getViewModel();
         this._vmSubscription = this.data._viewModelEvents.on(ViewModelChangedEvent, () => {
@@ -1417,7 +1533,7 @@ class PopupContainerComponent {
     }
 }
 PopupContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopupContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PopupContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PopupContainerComponent, selector: "dxv-daterange-popup", inputs: { data: "data" }, ngImport: i0, template: "<dx-popup role=\"dialog\" aria-modal=\"true\" \n[width]=\"popupOptions.width\"\n[height]=\"popupOptions.height\"\n[wrapperAttr]=\"popupOptions.wrapperAttr\"\n[position]=\"popupOptions.position\"\n[container]=\"popupOptions.container\"\n[showTitle]=\"popupOptions.showTitle\"\n[showCloseButton]=\"popupOptions.showCloseButton\"\n[hideOnOutsideClick]=\"popupOptions.hideOnOutsideClick\"\n(onHidden)=\"popupOptions.onHidden($event)\"\n[animation]=\"popupOptions.animation\"\n[shading]=\"popupOptions.shading\"\n[visible]=\"popupOptions.visible\"\n>\n    <dx-scroll-view \n    [showScrollbar]=\"data.scrollViewOptions.showScrollbar\"\n    [direction]=\"data.scrollViewOptions.direction\"\n    [useNative]=\"data.scrollViewOptions.useNative\"\n    (onInitialized)=\"data.scrollViewOptions.onInitialized($event)\"\n    >\n        <div class=\"dxrv-daterange-editor-popup-container\" [dxMutationObserver]=\"data.dialogKeyboardHelper\">\n            <dx-scroll-view role=\"listbox\" class=\"dxrv-daterange-editor-list dxrv-daterange-editor-item dxd-border-primary dx-accessibility-daterange-item\" \n            [showScrollbar]=\"data.predefinedRanges.scrollViewOptions.showScrollbar\"\n            [scrollByContent]=\"data.predefinedRanges.scrollViewOptions.scrollByContent\"\n            [bounceEnabled]=\"data.predefinedRanges.scrollViewOptions.bounceEnabled\"\n            [useNative]=\"data.predefinedRanges.scrollViewOptions.useNative\"\n            [scrollByThumb]=\"data.predefinedRanges.scrollViewOptions.scrollByThumb\"\n            (onInitialized)=\"data.predefinedRanges.scrollViewOptions.onInitialized($event)\"\n            [dxMutationObserver]=\"data.predefinedRanges.accessibilityKeyboardHelper\"\n            >\n                <div class=\"dx-accessibility-container-background dxd-back-accented\"></div>\n                <div *ngFor=\"let item of data.predefinedRanges.items\" role=\"option\" class=\"dxrv-daterange-editor-list-item dxd-state-normal dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented\"\n                [attr.aria-selected]=\"item.selected\"\n                [class.dxd-state-selected]=\"item.selected\" [dxAction]=\"item.click\">\n                    <div class=\"dx-accessibility-field-background dxd-back-accented\"></div>\n                    {{item.displayName}}\n                </div>\n            </dx-scroll-view>\n            <div class=\"dxrv-daterange-editor-item\">\n                <div class=\"dx-accessibility-container-background dxd-back-accented\"></div>\n                <dxa-template template=\"dxrv-daterange-calendar\" [data]=\"data.startRange\"></dxa-template>\n            </div>\n            <div class=\"dxrv-daterange-editor-item\">\n                <div class=\"dx-accessibility-container-background dxd-back-accented\"></div>\n                <dxa-template template=\"dxrv-daterange-calendar\" [data]=\"data.endRange\"></dxa-template>\n            </div>\n        </div>\n    </dx-scroll-view>\n</dx-popup>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: 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"] }, { kind: "directive", type: DxActionDirective, selector: "[dxAction]", inputs: ["dxActionModel", "dxAction"] }, { kind: "directive", type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }] });
+PopupContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PopupContainerComponent, selector: "dxv-daterange-popup", inputs: { data: "data" }, ngImport: i0, template: "<dx-popup role=\"dialog\" aria-modal=\"true\" \n[width]=\"popupOptions.width\"\n[height]=\"popupOptions.height\"\n[wrapperAttr]=\"popupOptions.wrapperAttr\"\n[position]=\"popupOptions.position\"\n[container]=\"popupOptions.container\"\n[showTitle]=\"popupOptions.showTitle\"\n[showCloseButton]=\"popupOptions.showCloseButton\"\n[hideOnOutsideClick]=\"popupOptions.hideOnOutsideClick\"\n(onHidden)=\"popupOptions.onHidden($event)\"\n[animation]=\"popupOptions.animation\"\n[shading]=\"popupOptions.shading\"\n[visible]=\"popupOptions.visible\"\n>\n    <dx-scroll-view \n    [showScrollbar]=\"data.scrollViewOptions.showScrollbar\"\n    [direction]=\"data.scrollViewOptions.direction\"\n    [useNative]=\"data.scrollViewOptions.useNative\"\n    (onInitialized)=\"data.scrollViewOptions.onInitialized($event)\"\n    >\n        <div class=\"dxrv-daterange-editor-popup-container\" [dxMutationObserver]=\"data.dialogKeyboardHelper\">\n            <dx-scroll-view role=\"listbox\" class=\"dxrv-daterange-editor-list dxrv-daterange-editor-item dxd-border-primary dx-accessibility-daterange-item\" \n            [showScrollbar]=\"data.predefinedRanges.scrollViewOptions.showScrollbar\"\n            [scrollByContent]=\"data.predefinedRanges.scrollViewOptions.scrollByContent\"\n            [bounceEnabled]=\"data.predefinedRanges.scrollViewOptions.bounceEnabled\"\n            [useNative]=\"data.predefinedRanges.scrollViewOptions.useNative\"\n            [scrollByThumb]=\"data.predefinedRanges.scrollViewOptions.scrollByThumb\"\n            (onInitialized)=\"data.predefinedRanges.scrollViewOptions.onInitialized($event)\"\n            [dxMutationObserver]=\"data.predefinedRanges.accessibilityKeyboardHelper\"\n            >\n                <div class=\"dx-accessibility-container-background dxd-back-accented\"></div>\n                <div *ngFor=\"let item of data.predefinedRanges.items\" role=\"option\" class=\"dxrv-daterange-editor-list-item dxd-state-normal dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented\"\n                [attr.aria-selected]=\"item.selected\"\n                [class.dxd-state-selected]=\"item.selected\" [dxAction]=\"item.click\">\n                    <div class=\"dx-accessibility-field-background dxd-back-accented\"></div>\n                    {{item.displayName}}\n                </div>\n            </dx-scroll-view>\n            <div class=\"dxrv-daterange-editor-item\">\n                <div class=\"dx-accessibility-container-background dxd-back-accented\"></div>\n                <dxa-template template=\"dxrv-daterange-calendar\" [data]=\"data.startRange\"></dxa-template>\n            </div>\n            <div class=\"dxrv-daterange-editor-item\">\n                <div class=\"dx-accessibility-container-background dxd-back-accented\"></div>\n                <dxa-template template=\"dxrv-daterange-calendar\" [data]=\"data.endRange\"></dxa-template>\n            </div>\n        </div>\n    </dx-scroll-view>\n</dx-popup>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: i2.DxPopupComponent, selector: "dx-popup", inputs: ["accessKey", "animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "dragAndResizeArea", "dragEnabled", "dragOutsideBoundary", "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", "deferRenderingChange", "disabledChange", "dragAndResizeAreaChange", "dragEnabledChange", "dragOutsideBoundaryChange", "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"] }, { kind: "directive", type: DxActionDirective, selector: "[dxAction]", inputs: ["dxActionModel", "dxAction"] }, { kind: "directive", type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopupContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dxv-daterange-popup', template: "<dx-popup role=\"dialog\" aria-modal=\"true\" \n[width]=\"popupOptions.width\"\n[height]=\"popupOptions.height\"\n[wrapperAttr]=\"popupOptions.wrapperAttr\"\n[position]=\"popupOptions.position\"\n[container]=\"popupOptions.container\"\n[showTitle]=\"popupOptions.showTitle\"\n[showCloseButton]=\"popupOptions.showCloseButton\"\n[hideOnOutsideClick]=\"popupOptions.hideOnOutsideClick\"\n(onHidden)=\"popupOptions.onHidden($event)\"\n[animation]=\"popupOptions.animation\"\n[shading]=\"popupOptions.shading\"\n[visible]=\"popupOptions.visible\"\n>\n    <dx-scroll-view \n    [showScrollbar]=\"data.scrollViewOptions.showScrollbar\"\n    [direction]=\"data.scrollViewOptions.direction\"\n    [useNative]=\"data.scrollViewOptions.useNative\"\n    (onInitialized)=\"data.scrollViewOptions.onInitialized($event)\"\n    >\n        <div class=\"dxrv-daterange-editor-popup-container\" [dxMutationObserver]=\"data.dialogKeyboardHelper\">\n            <dx-scroll-view role=\"listbox\" class=\"dxrv-daterange-editor-list dxrv-daterange-editor-item dxd-border-primary dx-accessibility-daterange-item\" \n            [showScrollbar]=\"data.predefinedRanges.scrollViewOptions.showScrollbar\"\n            [scrollByContent]=\"data.predefinedRanges.scrollViewOptions.scrollByContent\"\n            [bounceEnabled]=\"data.predefinedRanges.scrollViewOptions.bounceEnabled\"\n            [useNative]=\"data.predefinedRanges.scrollViewOptions.useNative\"\n            [scrollByThumb]=\"data.predefinedRanges.scrollViewOptions.scrollByThumb\"\n            (onInitialized)=\"data.predefinedRanges.scrollViewOptions.onInitialized($event)\"\n            [dxMutationObserver]=\"data.predefinedRanges.accessibilityKeyboardHelper\"\n            >\n                <div class=\"dx-accessibility-container-background dxd-back-accented\"></div>\n                <div *ngFor=\"let item of data.predefinedRanges.items\" role=\"option\" class=\"dxrv-daterange-editor-list-item dxd-state-normal dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented\"\n                [attr.aria-selected]=\"item.selected\"\n                [class.dxd-state-selected]=\"item.selected\" [dxAction]=\"item.click\">\n                    <div class=\"dx-accessibility-field-background dxd-back-accented\"></div>\n                    {{item.displayName}}\n                </div>\n            </dx-scroll-view>\n            <div class=\"dxrv-daterange-editor-item\">\n                <div class=\"dx-accessibility-container-background dxd-back-accented\"></div>\n                <dxa-template template=\"dxrv-daterange-calendar\" [data]=\"data.startRange\"></dxa-template>\n            </div>\n            <div class=\"dxrv-daterange-editor-item\">\n                <div class=\"dx-accessibility-container-background dxd-back-accented\"></div>\n                <dxa-template template=\"dxrv-daterange-calendar\" [data]=\"data.endRange\"></dxa-template>\n            </div>\n        </div>\n    </dx-scroll-view>\n</dx-popup>" }]
@@ -1429,10 +1545,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    [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"] }] });
+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    [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>" }]
+            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']
@@ -1841,7 +1957,7 @@ class PictureEditorComponent {
     }
 }
 PictureEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PictureEditorComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PictureEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PictureEditorComponent, selector: "dxv-picture-editor", inputs: { viewModel: ["options", "viewModel"] }, viewQueries: [{ propertyName: "element", first: true, predicate: ["pictureEditing"], descendants: true }], ngImport: i0, template: "<div #pictureEditing class=\"dx-picture-editing\">\n    <canvas [dxaZoom]=\"data?.painter.scale\"></canvas>\n    <dx-popup *ngIf=\"!!popupOptions\" class=\"dx-picture-editing-active\"\n        width=\"48px\"\n        height=\"auto\"\n        [wrapperAttr]=\"{ class: 'dx-picture-editing-active' }\"\n        [position]=\"popupOptions.position\"\n        [container]=\"popupOptions.container\"\n        [showTitle]=\"false\"\n        [animation]=\"{}\"\n        [shading]=\"false\"\n        [visible]=\"true\">\n\n        <div class=\"dx-picture-editing-toolbar\" *dxTemplate=\"let contentData of 'content'\">\n            <div *ngFor=\"let action of data.actions\">\n                <div class=\"dx-picture-editing-toolbar-item\" (click)=\"action.action(action, $event)\" [attr.title]=\"action.title\">\n                    <dxa-template class=\"dx-picture-editing-toolbar-item-icon\" [template]=\"action.icon\"></dxa-template>\n                </div>\n                <dxa-template *ngIf=\"!!action.template\" [template]=\"action.template\" [data]=\"action.templateOptions\"></dxa-template>\n            </div>\n        </div>\n    </dx-popup>\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: i2$1.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { 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"] }, { kind: "directive", type: ZoomDirective, selector: "[dxaZoom]", inputs: ["dxaZoom"] }] });
+PictureEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PictureEditorComponent, selector: "dxv-picture-editor", inputs: { viewModel: ["options", "viewModel"] }, viewQueries: [{ propertyName: "element", first: true, predicate: ["pictureEditing"], descendants: true }], ngImport: i0, template: "<div #pictureEditing class=\"dx-picture-editing\">\n    <canvas [dxaZoom]=\"data?.painter.scale\"></canvas>\n    <dx-popup *ngIf=\"!!popupOptions\" class=\"dx-picture-editing-active\"\n        width=\"48px\"\n        height=\"auto\"\n        [wrapperAttr]=\"{ class: 'dx-picture-editing-active' }\"\n        [position]=\"popupOptions.position\"\n        [container]=\"popupOptions.container\"\n        [showTitle]=\"false\"\n        [animation]=\"{}\"\n        [shading]=\"false\"\n        [visible]=\"true\">\n\n        <div class=\"dx-picture-editing-toolbar\" *dxTemplate=\"let contentData of 'content'\">\n            <div *ngFor=\"let action of data.actions\">\n                <div class=\"dx-picture-editing-toolbar-item\" (click)=\"action.action(action, $event)\" [attr.title]=\"action.title\">\n                    <dxa-template class=\"dx-picture-editing-toolbar-item-icon\" [template]=\"action.icon\"></dxa-template>\n                </div>\n                <dxa-template *ngIf=\"!!action.template\" [template]=\"action.template\" [data]=\"action.templateOptions\"></dxa-template>\n            </div>\n        </div>\n    </dx-popup>\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: i2$1.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i2.DxPopupComponent, selector: "dx-popup", inputs: ["accessKey", "animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "dragAndResizeArea", "dragEnabled", "dragOutsideBoundary", "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", "deferRenderingChange", "disabledChange", "dragAndResizeAreaChange", "dragEnabledChange", "dragOutsideBoundaryChange", "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"] }, { kind: "directive", type: ZoomDirective, selector: "[dxaZoom]", inputs: ["dxaZoom"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PictureEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dxv-picture-editor', template: "<div #pictureEditing class=\"dx-picture-editing\">\n    <canvas [dxaZoom]=\"data?.painter.scale\"></canvas>\n    <dx-popup *ngIf=\"!!popupOptions\" class=\"dx-picture-editing-active\"\n        width=\"48px\"\n        height=\"auto\"\n        [wrapperAttr]=\"{ class: 'dx-picture-editing-active' }\"\n        [position]=\"popupOptions.position\"\n        [container]=\"popupOptions.container\"\n        [showTitle]=\"false\"\n        [animation]=\"{}\"\n        [shading]=\"false\"\n        [visible]=\"true\">\n\n        <div class=\"dx-picture-editing-toolbar\" *dxTemplate=\"let contentData of 'content'\">\n            <div *ngFor=\"let action of data.actions\">\n                <div class=\"dx-picture-editing-toolbar-item\" (click)=\"action.action(action, $event)\" [attr.title]=\"action.title\">\n                    <dxa-template class=\"dx-picture-editing-toolbar-item-icon\" [template]=\"action.icon\"></dxa-template>\n                </div>\n                <dxa-template *ngIf=\"!!action.template\" [template]=\"action.template\" [data]=\"action.templateOptions\"></dxa-template>\n            </div>\n        </div>\n    </dx-popup>\n</div>" }]
@@ -1922,7 +2038,7 @@ class PopupImageEditingFieldComponent {
     }
 }
 PopupImageEditingFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopupImageEditingFieldComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PopupImageEditingFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PopupImageEditingFieldComponent, selector: "dxv-popup-image-editing-field", inputs: { data: "data" }, viewQueries: [{ propertyName: "popupContainer", first: true, predicate: ["popupContainer"], descendants: true }], ngImport: i0, template: "<div class=\"dxrp-editing-field-container\" [style]=\"data.containerStyle\">\n    <div #popupContainer [class]=\"'dx-picture-edit-popup-content dx-picture-edit-popup-content-fullscreen ' + data.parentPopupClass\" (click)=\"data.activateEditor(data, $event)\">\n        <dxv-painter class=\"dxrp-editing-field-popup-container-cloned\" [options]=\"data.getPainterOptions()\"></dxv-painter>\n        <dx-popup *ngIf=\"!!popupOptions\" class=\"dx-picture-edit-popup-content dx-picture-edit-popup-content-fullscreen\"\n            [width]=\"data.containerStyle.width\"\n            [height]=\"data.containerStyle.height\"\n            [position]=\"popupOptions.position\"\n            [container]=\"popupOptions.container\"\n            [showTitle]=\"false\"\n            [deferRendering]=\"false\"\n            [hideOnOutsideClick]=\"true\"\n            [showCloseButton]=\"false\"\n            (onContentReady)=\"data.popupData.onContentReady($event)\"\n            (onHiding)=\"data.popupData.onHiding($event)\"\n            (onShown)=\"data.popupData.onShown($event)\"\n            [shading]=\"data.popupData.shading\"\n            [wrapperAttr]=\"{ class: 'dx-picture-edit-popup-content dx-picture-edit-popup-content-fullscreen' }\"\n            [animation]=\"{ \n                show: { type: 'slide', duration: 0, to: { opacity: 1 }, from: { opacity: 0 } },\n                hide: { type: 'fade', duration: 100, to: { opacity: 0 }, from: { opacity: 1 } }\n            }\"\n            [visible]=\"data.popupData.visible\"\n        >\n            <dxa-template *ngIf=\"data.popupData.showContent\" [template]=\"data.popupData.contentTemplate\" [data]=\"data\"></dxa-template>\n    </dx-popup>\n    </div>\n</div>", 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"] }, { kind: "component", type: PainterComponent, selector: "dxv-painter", inputs: ["options"] }] });
+PopupImageEditingFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PopupImageEditingFieldComponent, selector: "dxv-popup-image-editing-field", inputs: { data: "data" }, viewQueries: [{ propertyName: "popupContainer", first: true, predicate: ["popupContainer"], descendants: true }], ngImport: i0, template: "<div class=\"dxrp-editing-field-container\" [style]=\"data.containerStyle\">\n    <div #popupContainer [class]=\"'dx-picture-edit-popup-content dx-picture-edit-popup-content-fullscreen ' + data.parentPopupClass\" (click)=\"data.activateEditor(data, $event)\">\n        <dxv-painter class=\"dxrp-editing-field-popup-container-cloned\" [options]=\"data.getPainterOptions()\"></dxv-painter>\n        <dx-popup *ngIf=\"!!popupOptions\" class=\"dx-picture-edit-popup-content dx-picture-edit-popup-content-fullscreen\"\n            [width]=\"data.containerStyle.width\"\n            [height]=\"data.containerStyle.height\"\n            [position]=\"popupOptions.position\"\n            [container]=\"popupOptions.container\"\n            [showTitle]=\"false\"\n            [deferRendering]=\"false\"\n            [hideOnOutsideClick]=\"true\"\n            [showCloseButton]=\"false\"\n            (onContentReady)=\"data.popupData.onContentReady($event)\"\n            (onHiding)=\"data.popupData.onHiding($event)\"\n            (onShown)=\"data.popupData.onShown($event)\"\n            [shading]=\"data.popupData.shading\"\n            [wrapperAttr]=\"{ class: 'dx-picture-edit-popup-content dx-picture-edit-popup-content-fullscreen' }\"\n            [animation]=\"{ \n                show: { type: 'slide', duration: 0, to: { opacity: 1 }, from: { opacity: 0 } },\n                hide: { type: 'fade', duration: 100, to: { opacity: 0 }, from: { opacity: 1 } }\n            }\"\n            [visible]=\"data.popupData.visible\"\n        >\n            <dxa-template *ngIf=\"data.popupData.showContent\" [template]=\"data.popupData.contentTemplate\" [data]=\"data\"></dxa-template>\n    </dx-popup>\n    </div>\n</div>", 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", "deferRendering", "disabled", "dragAndResizeArea", "dragEnabled", "dragOutsideBoundary", "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", "deferRenderingChange", "disabledChange", "dragAndResizeAreaChange", "dragEnabledChange", "dragOutsideBoundaryChange", "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"] }, { kind: "component", type: PainterComponent, selector: "dxv-painter", inputs: ["options"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopupImageEditingFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dxv-popup-image-editing-field', template: "<div class=\"dxrp-editing-field-container\" [style]=\"data.containerStyle\">\n    <div #popupContainer [class]=\"'dx-picture-edit-popup-content dx-picture-edit-popup-content-fullscreen ' + data.parentPopupClass\" (click)=\"data.activateEditor(data, $event)\">\n        <dxv-painter class=\"dxrp-editing-field-popup-container-cloned\" [options]=\"data.getPainterOptions()\"></dxv-painter>\n        <dx-popup *ngIf=\"!!popupOptions\" class=\"dx-picture-edit-popup-content dx-picture-edit-popup-content-fullscreen\"\n            [width]=\"data.containerStyle.width\"\n            [height]=\"data.containerStyle.height\"\n            [position]=\"popupOptions.position\"\n            [container]=\"popupOptions.container\"\n            [showTitle]=\"false\"\n            [deferRendering]=\"false\"\n            [hideOnOutsideClick]=\"true\"\n            [showCloseButton]=\"false\"\n            (onContentReady)=\"data.popupData.onContentReady($event)\"\n            (onHiding)=\"data.popupData.onHiding($event)\"\n            (onShown)=\"data.popupData.onShown($event)\"\n            [shading]=\"data.popupData.shading\"\n            [wrapperAttr]=\"{ class: 'dx-picture-edit-popup-content dx-picture-edit-popup-content-fullscreen' }\"\n            [animation]=\"{ \n                show: { type: 'slide', duration: 0, to: { opacity: 1 }, from: { opacity: 0 } },\n                hide: { type: 'fade', duration: 100, to: { opacity: 0 }, from: { opacity: 1 } }\n            }\"\n            [visible]=\"data.popupData.visible\"\n        >\n            <dxa-template *ngIf=\"data.popupData.showContent\" [template]=\"data.popupData.contentTemplate\" [data]=\"data\"></dxa-template>\n    </dx-popup>\n    </div>\n</div>" }]
@@ -1968,7 +2084,7 @@ class PictureEditorToolBarPopupComponent {
     }
 }
 PictureEditorToolBarPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PictureEditorToolBarPopupComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PictureEditorToolBarPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PictureEditorToolBarPopupComponent, selector: "dxv-picture-editor-toolbar-popup", inputs: { data: "data" }, ngImport: i0, template: "<dx-popover *ngIf=\"!!popupOptions\" class=\"dx-picture-edit-popup-content\"\n    [width]=\"data.width\"\n    [height]=\"data.height\"\n    [wrapperAttr]=\"{ class: 'dx-picture-edit-popup-content' }\"\n    [hideOnOutsideClick]=\"data.hideOnOutsideClick\"\n    (onShown)=\"data.onShown($event)\"\n    (onHidden)=\"data.onHidden($event)\"\n    (onContentReady)=\"data.onContentReady($event)\"\n    [position]=\"popupOptions.position\"\n    [container]=\"popupOptions.container\"\n    [showTitle]=\"false\"\n    [showCloseButton]=\"false\"\n    [shading]=\"false\"\n    [animation]=\"{}\"\n    [visible]=\"data.visible\">\n    <dxa-template [template]=\"data.contentTemplate\" [data]=\"data.contentData\"></dxa-template>\n</dx-popover>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }] });
+PictureEditorToolBarPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PictureEditorToolBarPopupComponent, selector: "dxv-picture-editor-toolbar-popup", inputs: { data: "data" }, ngImport: i0, template: "<dx-popover *ngIf=\"!!popupOptions\" class=\"dx-picture-edit-popup-content\"\n    [width]=\"data.width\"\n    [height]=\"data.height\"\n    [wrapperAttr]=\"{ class: 'dx-picture-edit-popup-content' }\"\n    [hideOnOutsideClick]=\"data.hideOnOutsideClick\"\n    (onShown)=\"data.onShown($event)\"\n    (onHidden)=\"data.onHidden($event)\"\n    (onContentReady)=\"data.onContentReady($event)\"\n    [position]=\"popupOptions.position\"\n    [container]=\"popupOptions.container\"\n    [showTitle]=\"false\"\n    [showCloseButton]=\"false\"\n    [shading]=\"false\"\n    [animation]=\"{}\"\n    [visible]=\"data.visible\">\n    <dxa-template [template]=\"data.contentTemplate\" [data]=\"data.contentData\"></dxa-template>\n</dx-popover>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "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", "deferRenderingChange", "disabledChange", "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"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PictureEditorToolBarPopupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dxv-picture-editor-toolbar-popup', template: "<dx-popover *ngIf=\"!!popupOptions\" class=\"dx-picture-edit-popup-content\"\n    [width]=\"data.width\"\n    [height]=\"data.height\"\n    [wrapperAttr]=\"{ class: 'dx-picture-edit-popup-content' }\"\n    [hideOnOutsideClick]=\"data.hideOnOutsideClick\"\n    (onShown)=\"data.onShown($event)\"\n    (onHidden)=\"data.onHidden($event)\"\n    (onContentReady)=\"data.onContentReady($event)\"\n    [position]=\"popupOptions.position\"\n    [container]=\"popupOptions.container\"\n    [showTitle]=\"false\"\n    [showCloseButton]=\"false\"\n    [shading]=\"false\"\n    [animation]=\"{}\"\n    [visible]=\"data.visible\">\n    <dxa-template [template]=\"data.contentTemplate\" [data]=\"data.contentData\"></dxa-template>\n</dx-popover>" }]
@@ -1980,10 +2096,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 class PictureEditorBrushOptionsComponent {
 }
 PictureEditorBrushOptionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PictureEditorBrushOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PictureEditorBrushOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PictureEditorBrushOptionsComponent, selector: "dxv-picture-editing-brush-options", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"dx-picture-editing-brush-options\">\n    <div class=\"dx-picture-editing-line-width\">\n        <div class=\"dx-picture-editing-text\">{{data.brushWidthText}}</div>\n        <dx-slider class=\"dx-picture-editing-line-width-slider\"\n            [min]=\"1\"\n            [max]=\"9\"\n            [value]=\"data.lineWidth\"\n            [label]=\"{ visible: true }\"\n            [tooltip]=\"{ enabled: true, showMode: 'always', position: 'bottom' }\"\n            (onValueChanged)=\"data.onLineWidthChanged($event)\">\n        </dx-slider>\n    </div>\n    <div class=\"dx-picture-editing-line-color\">\n        <div class=\"dx-picture-editing-text\">{{data.brushColorText}}</div>\n        <div class=\"dx-picture-editing-brush-options-colors\">\n            <div class=\"dx-picture-editing-brush-options-color\" *ngFor=\"let color of data.colors\" [class.selected]=\"color.isSelected\">\n                <div class=\"dx-picture-editing-brush-options-color-cell\" [style.background]=\"color.value\" (click)=\"color.action()\"></div>\n            </div>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.DxSliderComponent, selector: "dx-slider", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "isDirty", "isValid", "keyStep", "label", "max", "min", "name", "readOnly", "rtlEnabled", "showRange", "step", "tabIndex", "tooltip", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeMode", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "isDirtyChange", "isValidChange", "keyStepChange", "labelChange", "maxChange", "minChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "showRangeChange", "stepChange", "tabIndexChange", "tooltipChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeModeChange", "visibleChange", "widthChange", "onBlur"] }] });
+PictureEditorBrushOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PictureEditorBrushOptionsComponent, selector: "dxv-picture-editing-brush-options", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"dx-picture-editing-brush-options\">\n    <div class=\"dx-picture-editing-line-width\">\n        <div class=\"dx-picture-editing-text\">{{data.brushWidthText}}</div>\n        <dx-slider class=\"dx-picture-editing-line-width-slider\"\n            [min]=\"1\"\n            [max]=\"9\"\n            [value]=\"data.lineWidth\"\n            [label]=\"{ visible: true }\"\n            [tooltip]=\"{ enabled: true, showMode: 'always', position: 'bottom' }\"\n            (onValueChanged)=\"this.data.onLineWidthChanged($event)\">\n        </dx-slider>\n    </div>\n    <div class=\"dx-picture-editing-line-color\">\n        <div class=\"dx-picture-editing-text\">{{data.brushColorText}}</div>\n        <div class=\"dx-picture-editing-brush-options-colors\">\n            <div class=\"dx-picture-editing-brush-options-color\" *ngFor=\"let color of data.colors\" [class.selected]=\"color.isSelected\">\n                <div class=\"dx-picture-editing-brush-options-color-cell\" [style.background]=\"color.value\" (click)=\"color.action()\"></div>\n            </div>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.DxSliderComponent, selector: "dx-slider", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "isDirty", "isValid", "keyStep", "label", "max", "min", "name", "readOnly", "rtlEnabled", "showRange", "step", "tabIndex", "tooltip", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeMode", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "isDirtyChange", "isValidChange", "keyStepChange", "labelChange", "maxChange", "minChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "showRangeChange", "stepChange", "tabIndexChange", "tooltipChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeModeChange", "visibleChange", "widthChange", "onBlur"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PictureEditorBrushOptionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dxv-picture-editing-brush-options', template: "<div class=\"dx-picture-editing-brush-options\">\n    <div class=\"dx-picture-editing-line-width\">\n        <div class=\"dx-picture-editing-text\">{{data.brushWidthText}}</div>\n        <dx-slider class=\"dx-picture-editing-line-width-slider\"\n            [min]=\"1\"\n            [max]=\"9\"\n            [value]=\"data.lineWidth\"\n            [label]=\"{ visible: true }\"\n            [tooltip]=\"{ enabled: true, showMode: 'always', position: 'bottom' }\"\n            (onValueChanged)=\"data.onLineWidthChanged($event)\">\n        </dx-slider>\n    </div>\n    <div class=\"dx-picture-editing-line-color\">\n        <div class=\"dx-picture-editing-text\">{{data.brushColorText}}</div>\n        <div class=\"dx-picture-editing-brush-options-colors\">\n            <div class=\"dx-picture-editing-brush-options-color\" *ngFor=\"let color of data.colors\" [class.selected]=\"color.isSelected\">\n                <div class=\"dx-picture-editing-brush-options-color-cell\" [style.background]=\"color.value\" (click)=\"color.action()\"></div>\n            </div>\n        </div>\n    </div>\n</div>" }]
+            args: [{ selector: 'dxv-picture-editing-brush-options', template: "<div class=\"dx-picture-editing-brush-options\">\n    <div class=\"dx-picture-editing-line-width\">\n        <div class=\"dx-picture-editing-text\">{{data.brushWidthText}}</div>\n        <dx-slider class=\"dx-picture-editing-line-width-slider\"\n            [min]=\"1\"\n            [max]=\"9\"\n            [value]=\"data.lineWidth\"\n            [label]=\"{ visible: true }\"\n            [tooltip]=\"{ enabled: true, showMode: 'always', position: 'bottom' }\"\n            (onValueChanged)=\"this.data.onLineWidthChanged($event)\">\n        </dx-slider>\n    </div>\n    <div class=\"dx-picture-editing-line-color\">\n        <div class=\"dx-picture-editing-text\">{{data.brushColorText}}</div>\n        <div class=\"dx-picture-editing-brush-options-colors\">\n            <div class=\"dx-picture-editing-brush-options-color\" *ngFor=\"let color of data.colors\" [class.selected]=\"color.isSelected\">\n                <div class=\"dx-picture-editing-brush-options-color-cell\" [style.background]=\"color.value\" (click)=\"color.action()\"></div>\n            </div>\n        </div>\n    </div>\n</div>" }]
         }], propDecorators: { data: [{
                 type: Input,
                 args: ['data']
@@ -2143,7 +2259,7 @@ class ExportToolComponent {
     }
 }
 ExportToolComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ExportToolComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ExportToolComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ExportToolComponent, selector: "dxv-export-tool", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"dxrd-visually-hidden\">\n    <form [attr.action]=\"data.exportActionUri\" method=\"post\">\n        <input *ngFor=\"let input of data.exportFormData\" [attr.name]=\"input.name\" [attr.value]=\"input.value\"/>\n    </form>\n</div>\n<dx-popup\n    [width]=\"data.popupOptions.width\"\n    [height]=\"data.popupOptions.height\"\n    [title]=\"data.popupOptions.title\"\n    [visible]=\"data.popupOptions.visible\"\n    [showCloseButton]=\"true\"\n    (onHidden)=\"data.popupOptions.onHidden()\"\n    [toolbarItems]=\"data.popupOptions.toolbarItems\"\n    [wrapperAttr]=\"data.popupOptions.wrapperAttr\"\n    [container]=\"popupOptions?.container\"\n    [position]=\"popupOptions?.position\">\n        <div class=\"dxrd-print-dialog-content\">\n            <div>{{data.printingTexts.caption}}</div>\n            <p></p>\n            <div *ngIf=\"!!data.printingTexts.prefix\" class=\"dxrdp-print-text-prefix\">{{data.printingTexts.prefix}}\n            </div>&nbsp;<a href=\"\" class=\"dxrd-preview-printing-link\" (click)=\"data.printingLinkCallback(data, $event)\">{{data.printingTexts.link}}</a>\n            <div *ngIf=\"!!data.printingTexts.postfix\" class=\"dxrdp-print-text-postfix\">{{data.printingTexts.postfix}}</div>\n        </div>\n</dx-popup>", 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: "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"] }] });
+ExportToolComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ExportToolComponent, selector: "dxv-export-tool", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"dxrd-visually-hidden\">\n    <form [attr.action]=\"data.exportActionUri\" method=\"post\">\n        <input *ngFor=\"let input of data.exportFormData\" [attr.name]=\"input.name\" [attr.value]=\"input.value\"/>\n    </form>\n</div>\n<dx-popup\n    [width]=\"data.popupOptions.width\"\n    [height]=\"data.popupOptions.height\"\n    [title]=\"data.popupOptions.title\"\n    [visible]=\"data.popupOptions.visible\"\n    [showCloseButton]=\"true\"\n    (onHidden)=\"data.popupOptions.onHidden()\"\n    [toolbarItems]=\"data.popupOptions.toolbarItems\"\n    [wrapperAttr]=\"data.popupOptions.wrapperAttr\"\n    [container]=\"popupOptions?.container\"\n    [position]=\"popupOptions?.position\">\n        <div class=\"dxrd-print-dialog-content\">\n            <div>{{data.printingTexts.caption}}</div>\n            <p></p>\n            <div *ngIf=\"!!data.printingTexts.prefix\" class=\"dxrdp-print-text-prefix\">{{data.printingTexts.prefix}}\n            </div>&nbsp;<a href=\"\" class=\"dxrd-preview-printing-link\" (click)=\"data.printingLinkCallback(data, $event)\">{{data.printingTexts.link}}</a>\n            <div *ngIf=\"!!data.printingTexts.postfix\" class=\"dxrdp-print-text-postfix\">{{data.printingTexts.postfix}}</div>\n        </div>\n</dx-popup>", 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: "component", type: i2.DxPopupComponent, selector: "dx-popup", inputs: ["accessKey", "animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "dragAndResizeArea", "dragEnabled", "dragOutsideBoundary", "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", "deferRenderingChange", "disabledChange", "dragAndResizeAreaChange", "dragEnabledChange", "dragOutsideBoundaryChange", "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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ExportToolComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dxv-export-tool', template: "<div class=\"dxrd-visually-hidden\">\n    <form [attr.action]=\"data.exportActionUri\" method=\"post\">\n        <input *ngFor=\"let input of data.exportFormData\" [attr.name]=\"input.name\" [attr.value]=\"input.value\"/>\n    </form>\n</div>\n<dx-popup\n    [width]=\"data.popupOptions.width\"\n    [height]=\"data.popupOptions.height\"\n    [title]=\"data.popupOptions.title\"\n    [visible]=\"data.popupOptions.visible\"\n    [showCloseButton]=\"true\"\n    (onHidden)=\"data.popupOptions.onHidden()\"\n    [toolbarItems]=\"data.popupOptions.toolbarItems\"\n    [wrapperAttr]=\"data.popupOptions.wrapperAttr\"\n    [container]=\"popupOptions?.container\"\n    [position]=\"popupOptions?.position\">\n        <div class=\"dxrd-print-dialog-content\">\n            <div>{{data.printingTexts.caption}}</div>\n            <p></p>\n            <div *ngIf=\"!!data.printingTexts.prefix\" class=\"dxrdp-print-text-prefix\">{{data.printingTexts.prefix}}\n            </div>&nbsp;<a href=\"\" class=\"dxrd-preview-printing-link\" (click)=\"data.printingLinkCallback(data, $event)\">{{data.printingTexts.link}}</a>\n            <div *ngIf=\"!!data.printingTexts.postfix\" class=\"dxrdp-print-text-postfix\">{{data.printingTexts.postfix}}</div>\n        </div>\n</dx-popup>" }]
@@ -2319,7 +2435,7 @@ 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 *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"] }] });
+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", "deferRendering", "disabled", "dragAndResizeArea", "dragEnabled", "dragOutsideBoundary", "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", "deferRenderingChange", "disabledChange", "dragAndResizeAreaChange", "dragEnabledChange", "dragOutsideBoundaryChange", "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 *ngIf=\"data.visible\" template=\"dxrv-preview-parameters-mobile\" [data]=\"data\"></dxa-template>\n</dx-popup>" }]
@@ -2367,7 +2483,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 class MobileActionsExportComponent extends ComponentWithParentContainer {
 }
 MobileActionsExportComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MobileActionsExportComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MobileActionsExportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MobileActionsExportComponent, selector: "dxv-mobile-actions-export", inputs: { data: "data" }, usesInheritance: true, ngImport: i0, template: "<dx-popover class=\"dxrd-menu-export-popover\"\n    [wrapperAttr]=\"{ class: 'dxrd-menu-export-popover' }\"\n    width=\"266px\"\n    height=\"266px\"\n    [visible]=\"data.visible\"\n    target=\".dxrdp-mobile-action.dxrd-image-export-to\"\n    [container]=\"parentContainer\">\n    <div *dxTemplate=\"let contentData of 'content'\">\n        <div *ngFor=\"let item of data.items\" class=\"dxrd-menu-export-item\" (click)=\"item.action()\">{{item.text}}</div>\n    </div>\n</dx-popover>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { 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"] }] });
+MobileActionsExportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MobileActionsExportComponent, selector: "dxv-mobile-actions-export", inputs: { data: "data" }, usesInheritance: true, ngImport: i0, template: "<dx-popover class=\"dxrd-menu-export-popover\"\n    [wrapperAttr]=\"{ class: 'dxrd-menu-export-popover' }\"\n    width=\"266px\"\n    height=\"266px\"\n    [visible]=\"data.visible\"\n    target=\".dxrdp-mobile-action.dxrd-image-export-to\"\n    [container]=\"parentContainer\">\n    <div *dxTemplate=\"let contentData of 'content'\">\n        <div *ngFor=\"let item of data.items\" class=\"dxrd-menu-export-item\" (click)=\"item.action()\">{{item.text}}</div>\n    </div>\n</dx-popover>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "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", "deferRenderingChange", "disabledChange", "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: MobileActionsExportComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dxv-mobile-actions-export', template: "<dx-popover class=\"dxrd-menu-export-popover\"\n    [wrapperAttr]=\"{ class: 'dxrd-menu-export-popover' }\"\n    width=\"266px\"\n    height=\"266px\"\n    [visible]=\"data.visible\"\n    target=\".dxrdp-mobile-action.dxrd-image-export-to\"\n    [container]=\"parentContainer\">\n    <div *dxTemplate=\"let contentData of 'content'\">\n        <div *ngFor=\"let item of data.items\" class=\"dxrd-menu-export-item\" (click)=\"item.action()\">{{item.text}}</div>\n    </div>\n</dx-popover>" }]
@@ -2681,13 +2797,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 args: ['mobilepaginator']
             }] } });
 
-class DxReportViewerComponent extends DxReportingComponent {
-    constructor(renderer, platformId, _viewer, _cd, _accessibilitySettings) {
-        super(renderer, platformId);
-        this._viewer = _viewer;
-        this._cd = _cd;
-        this._accessibilitySettings = _accessibilitySettings;
-        this._reportUrl = '';
+class DxReportViewerComponent extends DxReportViewerBaseComponent {
+    constructor(renderer, platformId, viewer, cd, accessibilitySettings) {
+        super(renderer, platformId, viewer, cd, accessibilitySettings);
     }
     getKoBinding(options) {
         return new JSReportViewerBinding(options, this.getEventRaiser(), false);
@@ -2696,81 +2808,18 @@ class DxReportViewerComponent extends DxReportingComponent {
         return this.callbacksComponent;
     }
     getControlOptions() {
-        return {
-            rtl: this.rtl,
-            developmentMode: this.developmentMode,
-            isMobile: this.isMobile,
-            accessibilityCompliant: this.accessibilityCompliant,
-            reportUrl: this._reportUrl,
-            requestOptions: this.requestOptionsComponent,
-            mobileModeSettings: this.mobileModeSettingsComponent,
-            remoteSettings: this.remoteSettingsComponent,
-            tabPanelSettings: this.tabPanelSettingsComponent,
-            progressBarSettings: this.progressBarSettingsComponent,
-            exportSettings: this.exportSettingsComponent,
-            keepReportOnComponentDisposal: this.keepReportOnComponentDisposal,
-            searchSettings: this.searchSettingsComponent,
-            callbacks: {}
-        };
+        const baseOptions = super.getControlOptions();
+        return Object.assign(Object.assign({}, baseOptions), { developmentMode: this.developmentMode, isMobile: this.isMobile, requestOptions: this.requestOptionsComponent, mobileModeSettings: this.mobileModeSettingsComponent, remoteSettings: this.remoteSettingsComponent, tabPanelSettings: this.tabPanelSettingsComponent, progressBarSettings: this.progressBarSettingsComponent, exportSettings: this.exportSettingsComponent, searchSettings: this.searchSettingsComponent });
     }
     GetPreviewModel() {
         return this.bindingSender.GetPreviewModel();
     }
-    ngAfterViewInit() {
-        var _a;
-        super.ngAfterViewInit();
-        this.model = this._binding.sender;
-        this.viewModel = (_a = this.model.GetPreviewModel()) === null || _a === void 0 ? void 0 : _a.getViewModel();
-        this._disposeViewModelChangedSubscription = this._subscribeToViewModelChanged(this.viewModel);
-        this._disposableCallback = this.model.events.on('propertyChanged', (args) => {
-            if (args.propertyName === 'previewModel') {
-                this.viewModel = this.model.GetPreviewModel().getViewModel();
-                this._disposeViewModelChangedSubscription && this._disposeViewModelChangedSubscription();
-                this._disposeViewModelChangedSubscription = this._subscribeToViewModelChanged(this.viewModel);
-            }
-        });
-        this._cd.detectChanges();
-    }
-    ngOnDestroy() {
-        this._disposableCallback && this._disposableCallback();
-        this._disposeViewModelChangedSubscription && this._disposeViewModelChangedSubscription();
-        this._binding.dispose();
-        super.ngOnDestroy();
-    }
-    _subscribeToViewModelChanged(viewModel) {
-        var _a;
-        const eventHolder = viewModel;
-        return (_a = eventHolder === null || eventHolder === void 0 ? void 0 : eventHolder._viewModelEvents) === null || _a === void 0 ? void 0 : _a.on(ViewModelChangedEvent, () => this._cd.markForCheck());
-    }
-    get accessibilityCompliant() {
-        return this._accessibilitySettings.accessibilityCompliant;
-    }
-    set accessibilityCompliant(value) {
-        this._accessibilitySettings.accessibilityCompliant = value;
-    }
-    get reportUrl() {
-        return this._reportUrl;
-    }
-    set reportUrl(reportUrl) {
-        this._reportUrl = reportUrl;
-        if (this.bindingSender)
-            this.bindingSender.OpenReport(reportUrl);
-    }
 }
 DxReportViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DxReportViewerComponent, deps: [{ token: i0.Renderer2 }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AccessibilitySettings }], target: i0.ɵɵFactoryTarget.Component });
-DxReportViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DxReportViewerComponent, selector: "dx-report-viewer", inputs: { isMobile: "isMobile", accessibilityCompliant: "accessibilityCompliant", keepReportOnComponentDisposal: "keepReportOnComponentDisposal", rtl: "rtl", reportUrl: "reportUrl" }, providers: [AccessibilitySettings], queries: [{ propertyName: "requestOptionsComponent", first: true, predicate: DxReportViewerRequestOptionsComponent, descendants: true }, { propertyName: "callbacksComponent", first: true, predicate: DxReportViewerCallbacksComponent, descendants: true }, { propertyName: "mobileModeSettingsComponent", first: true, predicate: DxReportViewerMobileModeSettingsComponent, descendants: true }, { propertyName: "remoteSettingsComponent", first: true, predicate: DxReportViewerRemoteSettingsComponent, descendants: true }, { propertyName: "tabPanelSettingsComponent", first: true, predicate: DxReportViewerTabPanelSettingsComponent, descendants: true }, { propertyName: "progressBarSettingsComponent", first: true, predicate: DxReportViewerProgressBarSettingsComponent, descendants: true }, { propertyName: "exportSettingsComponent", first: true, predicate: DxReportViewerExportSettingsComponent, descendants: true }, { propertyName: "searchSettingsComponent", first: true, predicate: DxReportViewerSearchSettingsComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #control [ngClass]=\"cssClass\" [ngStyle]=\"{'width': width, 'height': height }\">\n  <dxa-templates></dxa-templates>\n  <dxv-templates></dxv-templates>\n  <div class=\"dx-designer\">\n      <dxa-template *ngIf=\"!!viewModel\" template=\"dx-designer\" [data]=\"viewModel\"></dxa-template>\n  </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TemplatesComponent, selector: "dxa-templates" }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "component", type: ViewerTemplatesComponent, selector: "dxv-templates" }] });
+DxReportViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DxReportViewerComponent, selector: "dx-report-viewer", inputs: { isMobile: "isMobile" }, providers: [AccessibilitySettings], queries: [{ propertyName: "requestOptionsComponent", first: true, predicate: DxReportViewerRequestOptionsComponent, descendants: true }, { propertyName: "callbacksComponent", first: true, predicate: DxReportViewerCallbacksComponent, descendants: true }, { propertyName: "mobileModeSettingsComponent", first: true, predicate: DxReportViewerMobileModeSettingsComponent, descendants: true }, { propertyName: "remoteSettingsComponent", first: true, predicate: DxReportViewerRemoteSettingsComponent, descendants: true }, { propertyName: "tabPanelSettingsComponent", first: true, predicate: DxReportViewerTabPanelSettingsComponent, descendants: true }, { propertyName: "progressBarSettingsComponent", first: true, predicate: DxReportViewerProgressBarSettingsComponent, descendants: true }, { propertyName: "exportSettingsComponent", first: true, predicate: DxReportViewerExportSettingsComponent, descendants: true }, { propertyName: "searchSettingsComponent", first: true, predicate: DxReportViewerSearchSettingsComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #control [ngClass]=\"cssClass\" [ngStyle]=\"{'width': width, 'height': height }\">\n  <dxa-templates></dxa-templates>\n  <dxv-templates></dxv-templates>\n  <div class=\"dx-designer\">\n      <dxa-template *ngIf=\"!!viewModel\" template=\"dx-designer\" [data]=\"viewModel\"></dxa-template>\n  </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TemplatesComponent, selector: "dxa-templates" }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "component", type: ViewerTemplatesComponent, selector: "dxv-templates" }] });
 __decorate([
     _inputConverter(_booleanConverter)
 ], DxReportViewerComponent.prototype, "isMobile", void 0);
-__decorate([
-    _inputConverter(_booleanConverter)
-], DxReportViewerComponent.prototype, "accessibilityCompliant", null);
-__decorate([
-    _inputConverter(_booleanConverter)
-], DxReportViewerComponent.prototype, "keepReportOnComponentDisposal", void 0);
-__decorate([
-    _inputConverter(_booleanConverter)
-], DxReportViewerComponent.prototype, "rtl", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DxReportViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dx-report-viewer', providers: [AccessibilitySettings], template: "<div #control [ngClass]=\"cssClass\" [ngStyle]=\"{'width': width, 'height': height }\">\n  <dxa-templates></dxa-templates>\n  <dxv-templates></dxv-templates>\n  <div class=\"dx-designer\">\n      <dxa-template *ngIf=\"!!viewModel\" template=\"dx-designer\" [data]=\"viewModel\"></dxa-template>\n  </div>\n</div>" }]
@@ -2805,14 +2854,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 args: [DxReportViewerSearchSettingsComponent]
             }], isMobile: [{
                 type: Input
-            }], accessibilityCompliant: [{
-                type: Input
-            }], keepReportOnComponentDisposal: [{
-                type: Input
-            }], rtl: [{
-                type: Input
-            }], reportUrl: [{
-                type: Input
+            }] } });
+
+class DxReportParametersPanelCallbacksComponent extends DxReportViewerCallbacksBaseComponent {
+}
+DxReportParametersPanelCallbacksComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DxReportParametersPanelCallbacksComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DxReportParametersPanelCallbacksComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DxReportParametersPanelCallbacksComponent, selector: "dxrpp-callbacks", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DxReportParametersPanelCallbacksComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                    selector: 'dxrpp-callbacks'
+                }]
+        }] });
+
+class DxReportParametersPanelRequestOptionsComponent extends DxRequestOptionsBaseComponent {
+}
+DxReportParametersPanelRequestOptionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DxReportParametersPanelRequestOptionsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DxReportParametersPanelRequestOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DxReportParametersPanelRequestOptionsComponent, selector: "dxrpp-request-options", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DxReportParametersPanelRequestOptionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                    selector: 'dxrpp-request-options'
+                }]
+        }] });
+
+class DxReportParametersPanelComponent extends DxReportViewerBaseComponent {
+    getKoBinding(options) {
+        return new JSReportParametersPanelBinding(options, this.getEventRaiser(), false);
+    }
+    getCallbacks() {
+        return this.callbacksComponent;
+    }
+    getControlOptions() {
+        const baseOptions = super.getControlOptions();
+        return Object.assign(Object.assign({}, baseOptions), { requestOptions: this.requestOptionsComponent });
+    }
+}
+DxReportParametersPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DxReportParametersPanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DxReportParametersPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DxReportParametersPanelComponent, selector: "dx-report-parameters-panel", providers: [AccessibilitySettings], queries: [{ propertyName: "requestOptionsComponent", first: true, predicate: DxReportParametersPanelRequestOptionsComponent, descendants: true }, { propertyName: "callbacksComponent", first: true, predicate: DxReportParametersPanelCallbacksComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #control [ngClass]=\"cssClass\" [ngStyle]=\"{'width': width, 'height': height }\">\n  <dxa-templates></dxa-templates>\n  <dxv-templates></dxv-templates>\n  <div class=\"dx-designer\">\n      <dxa-template *ngIf=\"!!viewModel\" template=\"dx-designer\" [data]=\"viewModel\"></dxa-template>\n  </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TemplatesComponent, selector: "dxa-templates" }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "component", type: ViewerTemplatesComponent, selector: "dxv-templates" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DxReportParametersPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dx-report-parameters-panel', providers: [AccessibilitySettings], template: "<div #control [ngClass]=\"cssClass\" [ngStyle]=\"{'width': width, 'height': height }\">\n  <dxa-templates></dxa-templates>\n  <dxv-templates></dxv-templates>\n  <div class=\"dx-designer\">\n      <dxa-template *ngIf=\"!!viewModel\" template=\"dx-designer\" [data]=\"viewModel\"></dxa-template>\n  </div>\n</div>" }]
+        }], propDecorators: { requestOptionsComponent: [{
+                type: ContentChild,
+                args: [DxReportParametersPanelRequestOptionsComponent]
+            }], callbacksComponent: [{
+                type: ContentChild,
+                args: [DxReportParametersPanelCallbacksComponent]
             }] } });
 
 class DxReportViewerModule {
@@ -2926,7 +3016,10 @@ DxReportViewerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ve
         MobileAutofitDirective,
         MobilePaginatorComponent,
         KeyDownActionsDirective,
-        BreadcrumbsComponent], imports: [CommonModule,
+        BreadcrumbsComponent,
+        DxReportParametersPanelComponent,
+        DxReportParametersPanelCallbacksComponent,
+        DxReportParametersPanelRequestOptionsComponent], imports: [CommonModule,
         DxButtonModule,
         DxLoadIndicatorModule,
         DxScrollViewModule,
@@ -2952,7 +3045,10 @@ DxReportViewerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ve
         DxReportViewerProgressBarSettingsComponent,
         DxReportViewerExportSettingsComponent,
         DxReportViewerTabPanelSettingsComponent,
-        DxReportViewerSearchSettingsComponent], id: 'DxReportViewerModule' });
+        DxReportViewerSearchSettingsComponent,
+        DxReportParametersPanelComponent,
+        DxReportParametersPanelCallbacksComponent,
+        DxReportParametersPanelRequestOptionsComponent], id: 'DxReportViewerModule' });
 DxReportViewerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DxReportViewerModule, providers: [TemplateEngine], imports: [CommonModule,
         DxButtonModule,
         DxLoadIndicatorModule,
@@ -3106,7 +3202,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         MobileAutofitDirective,
                         MobilePaginatorComponent,
                         KeyDownActionsDirective,
-                        BreadcrumbsComponent
+                        BreadcrumbsComponent,
+                        DxReportParametersPanelComponent,
+                        DxReportParametersPanelCallbacksComponent,
+                        DxReportParametersPanelRequestOptionsComponent
                     ],
                     exports: [
                         DxReportViewerComponent,
@@ -3117,7 +3216,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         DxReportViewerProgressBarSettingsComponent,
                         DxReportViewerExportSettingsComponent,
                         DxReportViewerTabPanelSettingsComponent,
-                        DxReportViewerSearchSettingsComponent
+                        DxReportViewerSearchSettingsComponent,
+                        DxReportParametersPanelComponent,
+                        DxReportParametersPanelCallbacksComponent,
+                        DxReportParametersPanelRequestOptionsComponent
                     ],
                     providers: [TemplateEngine]
                 }]
@@ -3131,5 +3233,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DxReportViewerCallbacksComponent, DxReportViewerComponent, DxReportViewerExportSettingsComponent, DxReportViewerMobileModeSettingsComponent, DxReportViewerModule, DxReportViewerProgressBarSettingsComponent, DxReportViewerRemoteSettingsComponent, DxReportViewerRequestOptionsComponent, DxReportViewerSearchSettingsComponent, DxReportViewerTabPanelSettingsComponent, TemplateEngine };
+export { DxReportParametersPanelCallbacksComponent, DxReportParametersPanelComponent, DxReportParametersPanelRequestOptionsComponent, DxReportViewerCallbacksComponent, DxReportViewerComponent, DxReportViewerExportSettingsComponent, DxReportViewerMobileModeSettingsComponent, DxReportViewerModule, DxReportViewerProgressBarSettingsComponent, DxReportViewerRemoteSettingsComponent, DxReportViewerRequestOptionsComponent, DxReportViewerSearchSettingsComponent, DxReportViewerTabPanelSettingsComponent, TemplateEngine };
 //# sourceMappingURL=devexpress-reporting-angular-dx-report-viewer.mjs.map