devexpress-reporting-angular 23.1.5 → 23.2.1-alpha-23254-1700

package/bundles/devexpress-reporting-angular-dx-report-viewer.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('devexpress-reporting/dx-webdocumentviewer'), require('knockout'), require('devexpress-reporting-angular/core'), require('@angular/common')) :
-    typeof define === 'function' && define.amd ? define('devexpress-reporting-angular/dx-report-viewer', ['exports', '@angular/core', 'devexpress-reporting/dx-webdocumentviewer', 'knockout', 'devexpress-reporting-angular/core', '@angular/common'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["devexpress-reporting-angular"] = global["devexpress-reporting-angular"] || {}, global["devexpress-reporting-angular"]["dx-report-viewer"] = {}), global.ng.core, global.dxWebdocumentviewer, global.ko, global["devexpress-reporting-angular"].core, global.ng.common));
-})(this, (function (exports, i0, dxWebdocumentviewer, ko, core, i1) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('devexpress-reporting-angular/core'), require('@devexpress/analytics-core/dx-analytics-core-svg-templates'), require('devexpress-reporting/dx-reporting-svg-templates'), require('devexpress-reporting/viewer/binding/jsReportViewerBinding'), require('@devexpress/analytics-core/property-grid/widgets/internal/_svgTemplateEngine'), require('@devexpress/analytics-core/property-grid/widgets/templateUtils'), require('@angular/common'), require('@devexpress/analytics-core/accessibility/_dxMutationObserver'), require('@devexpress/analytics-core/property-grid/widgets/internal/_utils'), require('@devexpress/analytics-core/core/internal/_resizable'), require('@devexpress/analytics-core/property-grid/internal/_codeResolver'), require('@devexpress/analytics-core/property-grid/bindings.accordion'), require('devextreme-angular'), require('@devexpress/analytics-core/widgets/_utils'), require('@devexpress/analytics-core/property-grid/localization/_localization'), require('@devexpress/analytics-core/property-grid/widgets/collectioneditor/_editor'), require('devextreme-angular/core'), require('@devexpress/analytics-core/core/_updateZoomBinding'), require('devexpress-reporting/viewer/internal/_bindings'), require('devexpress-reporting/viewer/widgets/pictureEditor/_pictureEditorModel'), require('devexpress-reporting/viewer/widgets/pictureEditor/_painter'), require('@devexpress/analytics-core/widgets/_searchHighlighting'), require('@devexpress/analytics-core/widgets/treelist/_binding'), require('devexpress-reporting/viewer/widgets/dateRange/dateRangeEditor'), require('@devexpress/analytics-core/core/widgets/_generateIconTemplate'), require('devextreme-angular/ui/nested'), require('@devexpress/analytics-core/accessibility/_internal'), require('@devexpress/analytics-core/property-grid/localization/localization_utils'), require('devexpress-reporting/viewer/internal/_previewSelection'), require('devexpress-reporting/viewer/mobile/internal/gallery/_galleryComponent'), require('devexpress-reporting/viewer/mobile/internal/_mobileBindings')) :
+    typeof define === 'function' && define.amd ? define('devexpress-reporting-angular/dx-report-viewer', ['exports', '@angular/core', 'devexpress-reporting-angular/core', '@devexpress/analytics-core/dx-analytics-core-svg-templates', 'devexpress-reporting/dx-reporting-svg-templates', 'devexpress-reporting/viewer/binding/jsReportViewerBinding', '@devexpress/analytics-core/property-grid/widgets/internal/_svgTemplateEngine', '@devexpress/analytics-core/property-grid/widgets/templateUtils', '@angular/common', '@devexpress/analytics-core/accessibility/_dxMutationObserver', '@devexpress/analytics-core/property-grid/widgets/internal/_utils', '@devexpress/analytics-core/core/internal/_resizable', '@devexpress/analytics-core/property-grid/internal/_codeResolver', '@devexpress/analytics-core/property-grid/bindings.accordion', 'devextreme-angular', '@devexpress/analytics-core/widgets/_utils', '@devexpress/analytics-core/property-grid/localization/_localization', '@devexpress/analytics-core/property-grid/widgets/collectioneditor/_editor', 'devextreme-angular/core', '@devexpress/analytics-core/core/_updateZoomBinding', 'devexpress-reporting/viewer/internal/_bindings', 'devexpress-reporting/viewer/widgets/pictureEditor/_pictureEditorModel', 'devexpress-reporting/viewer/widgets/pictureEditor/_painter', '@devexpress/analytics-core/widgets/_searchHighlighting', '@devexpress/analytics-core/widgets/treelist/_binding', 'devexpress-reporting/viewer/widgets/dateRange/dateRangeEditor', '@devexpress/analytics-core/core/widgets/_generateIconTemplate', 'devextreme-angular/ui/nested', '@devexpress/analytics-core/accessibility/_internal', '@devexpress/analytics-core/property-grid/localization/localization_utils', 'devexpress-reporting/viewer/internal/_previewSelection', 'devexpress-reporting/viewer/mobile/internal/gallery/_galleryComponent', 'devexpress-reporting/viewer/mobile/internal/_mobileBindings'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["devexpress-reporting-angular"] = global["devexpress-reporting-angular"] || {}, global["devexpress-reporting-angular"]["dx-report-viewer"] = {}), global.ng.core, global["devexpress-reporting-angular"].core, null, null, global.jsReportViewerBinding, global._svgTemplateEngine, global.templateUtils, global.ng.common, global._dxMutationObserver, global._utils, global._resizable, global._codeResolver, global.bindings_accordion, global.i1, global._utils$1, global._localization, global._editor, global.i4, global._updateZoomBinding, global._bindings, global._pictureEditorModel, global._painter, global._searchHighlighting, global._binding, global.dateRangeEditor, global._generateIconTemplate, global.i2$1, global._internal, global.localization_utils, global._previewSelection, global._galleryComponent, global._mobileBindings));
+})(this, (function (exports, i0, core, dxAnalyticsCoreSvgTemplates, dxReportingSvgTemplates, jsReportViewerBinding, _svgTemplateEngine, templateUtils, i2, _dxMutationObserver, _utils, _resizable, _codeResolver, bindings_accordion, i1, _utils$1, _localization, _editor, i4, _updateZoomBinding, _bindings, _pictureEditorModel, _painter, _searchHighlighting, _binding, dateRangeEditor, _generateIconTemplate, i2$1, _internal, localization_utils, _previewSelection, _galleryComponent, _mobileBindings) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -23,8 +23,10 @@
     }
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-    var ko__namespace = /*#__PURE__*/_interopNamespace(ko);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
+    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
 
     var DxReportViewerCallbacksComponent = /** @class */ (function () {
         function DxReportViewerCallbacksComponent() {
@@ -734,15 +736,2872 @@
                     type: i0.Input
                 }] } });
 
+    var AccessibilitySettings = /** @class */ (function () {
+        function AccessibilitySettings() {
+            this.accessibilityCompliant = false;
+        }
+        return AccessibilitySettings;
+    }());
+    AccessibilitySettings.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AccessibilitySettings, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    AccessibilitySettings.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AccessibilitySettings, providedIn: null });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AccessibilitySettings, decorators: [{
+                type: i0.Injectable,
+                args: [{
+                        providedIn: null
+                    }]
+            }] });
+
+    var TemplateEngine = /** @class */ (function () {
+        function TemplateEngine() {
+            this.templates = [];
+        }
+        TemplateEngine.prototype.register = function (id, ref) {
+            this.templates.push({ ref: ref, id: id });
+        };
+        TemplateEngine.prototype.hasTemplate = function (id) {
+            var template = this.templates.find(function (template) { return template.id === id; });
+            return !!template;
+        };
+        TemplateEngine.prototype.getTemplateRef = function (templateId) {
+            var template = this.templates.find(function (template) { return template.id === templateId; });
+            return template ? template.ref : null;
+        };
+        return TemplateEngine;
+    }());
+    TemplateEngine.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TemplateEngine, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    TemplateEngine.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TemplateEngine, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TemplateEngine, decorators: [{
+                type: i0.Injectable,
+                args: [{
+                        providedIn: 'root'
+                    }]
+            }], ctorParameters: function () { return []; } });
+
+    var ImageTemplateComponent = /** @class */ (function () {
+        function ImageTemplateComponent() {
+        }
+        ImageTemplateComponent.prototype._updateImage = function () {
+            var template = templateUtils.getTemplate(this._template);
+            if (!template)
+                console.log("Image with " + this._template + " is not found");
+            this.image.nativeElement.innerHTML = template;
+        };
+        Object.defineProperty(ImageTemplateComponent.prototype, "template", {
+            set: function (newVal) {
+                this._template = newVal;
+                if (this.image)
+                    this._updateImage();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ImageTemplateComponent.prototype.ngAfterViewInit = function () {
+            this._updateImage();
+        };
+        return ImageTemplateComponent;
+    }());
+    ImageTemplateComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImageTemplateComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ImageTemplateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ImageTemplateComponent, selector: "dxa-image-template", inputs: { template: "template" }, viewQueries: [{ propertyName: "image", first: true, predicate: ["image"], descendants: true }], ngImport: i0__namespace, template: '<div #image></div>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImageTemplateComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxa-image-template',
+                        template: '<div #image></div>'
+                    }]
+            }], propDecorators: { template: [{
+                    type: i0.Input,
+                    args: ['template']
+                }], image: [{
+                    type: i0.ViewChild,
+                    args: ['image']
+                }] } });
+
+    var TemplateComponent = /** @class */ (function () {
+        function TemplateComponent(_templateEngine, _cd) {
+            this._templateEngine = _templateEngine;
+            this._cd = _cd;
+            this.isImage = false;
+        }
+        TemplateComponent.prototype.ngAfterViewInit = function () {
+            var template = this._templateEngine.getTemplateRef(this.template);
+            if (!!template) {
+                this.isImage = false;
+                this.templateRef = template;
+            }
+            else if (!!_svgTemplateEngine.SvgTemplatesEngine.getExistingTemplate(this.template)) {
+                this.isImage = true;
+            }
+            else {
+                console.log(this.template + " is not found");
+                return;
+            }
+            this._cd.detectChanges();
+        };
+        return TemplateComponent;
+    }());
+    TemplateComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TemplateComponent, deps: [{ token: TemplateEngine }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TemplateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TemplateComponent, selector: "dxa-template", inputs: { data: "data", template: "template" }, ngImport: i0__namespace, template: "<ng-container *ngIf=\"!isImage\" [ngTemplateOutlet]=\"templateRef\" [ngTemplateOutletContext]=\"{ data: data }\"></ng-container>\r\n<dxa-image-template *ngIf=\"isImage\" [template]=\"template\"></dxa-image-template> ", components: [{ type: ImageTemplateComponent, selector: "dxa-image-template", inputs: ["template"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TemplateComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxa-template',
+                        templateUrl: './template.component.html'
+                    }]
+            }], ctorParameters: function () { return [{ type: TemplateEngine }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }], template: [{
+                    type: i0.Input,
+                    args: ['template']
+                }] } });
+
+    var BaseDisposableDirective = /** @class */ (function () {
+        function BaseDisposableDirective(_element) {
+            this._element = _element;
+            this.eventName = 'onInit';
+            this._disposeFunc = function () { return void 0; };
+        }
+        Object.defineProperty(BaseDisposableDirective.prototype, "element", {
+            get: function () {
+                return this._element.nativeElement;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        BaseDisposableDirective.prototype.ngOnInit = function () {
+            if (this.eventName === 'onInit') {
+                this._disposeFunc();
+                this._disposeFunc = this.InitAndReturnDisposeFunc(this._element.nativeElement);
+            }
+        };
+        BaseDisposableDirective.prototype.ngAfterViewInit = function () {
+            if (this.eventName === 'afterViewInit') {
+                this._disposeFunc();
+                this._disposeFunc = this.InitAndReturnDisposeFunc(this._element.nativeElement);
+            }
+        };
+        BaseDisposableDirective.prototype.ngOnDestroy = function () {
+            this._disposeFunc();
+            this._disposeFunc = undefined;
+        };
+        return BaseDisposableDirective;
+    }());
+    BaseDisposableDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BaseDisposableDirective, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    BaseDisposableDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: BaseDisposableDirective, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BaseDisposableDirective, decorators: [{
+                type: i0.Directive
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; } });
+
+    var DxMutationObserverDirective = /** @class */ (function (_super) {
+        __extends(DxMutationObserverDirective, _super);
+        function DxMutationObserverDirective(el, _accessibilitySettings) {
+            var _this = _super.call(this, el) || this;
+            _this._accessibilitySettings = _accessibilitySettings;
+            _this.eventName = 'afterViewInit';
+            return _this;
+        }
+        DxMutationObserverDirective.prototype.InitAndReturnDisposeFunc = function (element) {
+            if (this.mutationObserverArgs)
+                return _dxMutationObserver.initializeMutationObserver(element, this.mutationObserverArgs, this._accessibilitySettings.accessibilityCompliant);
+            return function () { return void 0; };
+        };
+        return DxMutationObserverDirective;
+    }(BaseDisposableDirective));
+    DxMutationObserverDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DxMutationObserverDirective, deps: [{ token: i0__namespace.ElementRef }, { token: AccessibilitySettings }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    DxMutationObserverDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: { mutationObserverArgs: ["dxMutationObserver", "mutationObserverArgs"] }, usesInheritance: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DxMutationObserverDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[dxMutationObserver]'
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: AccessibilitySettings }]; }, propDecorators: { mutationObserverArgs: [{
+                    type: i0.Input,
+                    args: ['dxMutationObserver']
+                }] } });
+
+    var DxActionDirective = /** @class */ (function () {
+        function DxActionDirective() {
+        }
+        DxActionDirective.prototype.OnClick = function (e) {
+            this.action.call(this.model, this.model, e);
+        };
+        DxActionDirective.prototype.OnKeyDown = function (e) {
+            if (e.key == _utils.KeyboardEnum.Enter || e.key == _utils.KeyboardEnum.Space) {
+                this.action.call(this.model, this.model, e);
+            }
+        };
+        return DxActionDirective;
+    }());
+    DxActionDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DxActionDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    DxActionDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: DxActionDirective, selector: "[dxAction]", inputs: { model: ["dxActionModel", "model"], action: ["dxAction", "action"] }, host: { listeners: { "click": "OnClick($event)", "keydown": "OnKeyDown($event)" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DxActionDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[dxAction]'
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { model: [{
+                    type: i0.Input,
+                    args: ['dxActionModel']
+                }], action: [{
+                    type: i0.Input,
+                    args: ['dxAction']
+                }], OnClick: [{
+                    type: i0.HostListener,
+                    args: ['click', ['$event']]
+                }], OnKeyDown: [{
+                    type: i0.HostListener,
+                    args: ['keydown', ['$event']]
+                }] } });
+
+    var ResizableDirective = /** @class */ (function () {
+        function ResizableDirective(_element) {
+            this._element = _element;
+        }
+        Object.defineProperty(ResizableDirective.prototype, "options", {
+            set: function (newVal) {
+                if (!this._disposeFunc && newVal) {
+                    this._disposeFunc = _resizable.initializeResize(this._element.nativeElement, _resizable.initializeBaseResizableOptions(newVal));
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ResizableDirective.prototype.ngOnDestroy = function () {
+            this._disposeFunc && this._disposeFunc();
+            this._disposeFunc = undefined;
+        };
+        return ResizableDirective;
+    }());
+    ResizableDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ResizableDirective, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    ResizableDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: ResizableDirective, selector: "[dxaResizable]", inputs: { options: ["dxaResizable", "options"] }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ResizableDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[dxaResizable]'
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; }, propDecorators: { options: [{
+                    type: i0.Input,
+                    args: ['dxaResizable']
+                }] } });
+
+    var TabpanelComponent = /** @class */ (function () {
+        function TabpanelComponent(_cd) {
+            this._cd = _cd;
+        }
+        TabpanelComponent.prototype.ngAfterViewInit = function () {
+            this.resizableOptions = this.tabPanel.getResizableOptions(this.rightPanel.nativeElement, 50, 396);
+            this._cd.detectChanges();
+        };
+        return TabpanelComponent;
+    }());
+    TabpanelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TabpanelComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TabpanelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TabpanelComponent, selector: "dxa-tabpanel", inputs: { tabPanel: ["data", "tabPanel"] }, viewQueries: [{ propertyName: "rightPanel", first: true, predicate: ["rightPanel"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<div *ngIf=\"!!tabPanel\" class=\"dx-shadow dx-shadow-right dxd-border-secondary dxrd-tab-panel-wrapper\"\n    [style.width]=\"tabPanel.width + 'px'\" [class]=\"tabPanel.class\" [dxMutationObserver]=\"tabPanel.keyboardHelper\">\n    <div class=\"dxrd-right-tabs dxd-side-panel-tabs-back-color dxd-back-contrast\" [class]=\"tabPanel.tabsElement.class\">\n        <div *ngFor=\"let tab of tabPanel.tabs\" role=\"button\"\n            class=\"dxrd-tab-item dx-accessibility-rightpanel-button dxd-side-panel-tab-back-color dxd-back-highlighted dx-accessibility-focus-border-accented\"\n            [dxAction]=\"tab.click\" [class]=\"tab.css.class\" [attr.title]=\"tab.text\" [attr.ariaLabel]=\"tab.text\"\n            [attr.ariaExpanded]=\"tab.active\" [hidden]=\"!tab.visible\">\n            <div class=\"dxrd-image-padding\" [class]=\"tab.image.class\">\n                <dxa-template [template]=\"tab.image.templateName\"></dxa-template>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"dxrd-right-panel dxd-property-grid-group-header-back-color dxd-back-primary2\"\n        [style.width]=\"tabPanel.contentElement.width + 'px'\" [class]=\"tabPanel.contentElement.class\" #rightPanel [dxaResizable]=\"resizableOptions\">\n        <dxa-template *ngFor=\"let tab of tabPanel.tabs\" [template]=\"tab.template\" [data]=\"tab\"></dxa-template>\n    </div>\n</div>", components: [{ type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DxActionDirective, selector: "[dxAction]", inputs: ["dxActionModel", "dxAction"] }, { type: ResizableDirective, selector: "[dxaResizable]", inputs: ["dxaResizable"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TabpanelComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxa-tabpanel',
+                        templateUrl: './tabpanel.component.html'
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { tabPanel: [{
+                    type: i0.Input,
+                    args: ['data']
+                }], rightPanel: [{
+                    type: i0.ViewChild,
+                    args: ['rightPanel', { read: i0.ElementRef }]
+                }] } });
+
+    var ActionsComponent = /** @class */ (function () {
+        function ActionsComponent() {
+        }
+        return ActionsComponent;
+    }());
+    ActionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ActionsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ActionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ActionsComponent, selector: "dxa-actions", inputs: { data: "data" }, ngImport: i0__namespace, template: "<div *ngFor=\"let action of data\" style=\"display: inline-block; vertical-align: top;\">\n    <dxa-template *ngIf=\"action.templateName\" [template]=\"action.templateName\"\n        [data]=\"action['contentData'] || action\"></dxa-template>\n    <div *ngIf=\"!action.templateName && action.visible\" class=\"dxrd-toolbar-item\" [class]=\"action.actionClass\">\n        <div role=\"button\" class=\"dx-accessibility-toolbar-item dx-accessibility-focus-border-accented\"\n            [attr.ariaLabel]=\"action.block.attr['aria-label']\" [attr.ariaDisabled]=\"action.block.attr['aria-disabled']\"\n            [attr.ariaPressed]=\"action.block.attr['aria-pressed']\">\n            <div [attr.class]=\"action.image.class\" [attr.title]=\"action.displayText\" (click)=\"action.click($event)\">\n                <dxa-template [template]=\"action.image.templateName\"></dxa-template>\n            </div>\n            <div class=\"dxrd-toolbar-item-separator dxd-toolbar-separator-color dxd-border-secondary\"\n                [hidden]=\"!action.hasSeparator\"></div>\n        </div>\n    </div>\n</div>", components: [{ type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }], directives: [{ type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ActionsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxa-actions',
+                        templateUrl: './actions.component.html'
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var PropertygridComponent = /** @class */ (function () {
+        function PropertygridComponent() {
+        }
+        PropertygridComponent.prototype.trackByFn = function (_, item) {
+            return item.editorInputId;
+        };
+        return PropertygridComponent;
+    }());
+    PropertygridComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PropertygridComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    PropertygridComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PropertygridComponent, selector: "dxa-propertygrid", inputs: { data: "data" }, ngImport: i0__namespace, template: "<div [class.dx-rtl]=\"data.rtl\">\n    <div class=\"dx-editors\">\n        <div class=\"dx-fieldset\">\n            <dxa-template *ngFor=\"let editor of data.editors; trackBy: trackByFn\" [template]=\"editor.editorTemplate\" [data]=\"editor\"></dxa-template>\n        </div>\n    </div>\n</div>", components: [{ type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }], directives: [{ type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PropertygridComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxa-propertygrid',
+                        templateUrl: './propertygrid.component.html'
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var TreeListItemComponent = /** @class */ (function () {
+        function TreeListItemComponent() {
+        }
+        return TreeListItemComponent;
+    }());
+    TreeListItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TreeListItemComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TreeListItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TreeListItemComponent, selector: "dxa-treelist-item", inputs: { data: "data" }, ngImport: i0__namespace, template: "    <div *ngIf=\"data.visible\">\n        <dxa-template *ngIf=\"data.hasContent\" [template]=\"data.templates.accordionItem\" [data]=\"data\" ></dxa-template>\n        <dxa-template *ngIf=\"!data.hasContent\" [template]=\"data.templates.headerItem\" [data]=\"data\" ></dxa-template>\n    </div>", components: [{ type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TreeListItemComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxa-treelist-item',
+                        templateUrl: './treelist-item.component.html',
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var TreeListHeaderItemComponent = /** @class */ (function () {
+        function TreeListHeaderItemComponent() {
+        }
+        return TreeListHeaderItemComponent;
+    }());
+    TreeListHeaderItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TreeListHeaderItemComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TreeListHeaderItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TreeListHeaderItemComponent, selector: "dxa-treelist-header-item", inputs: { data: "data" }, ngImport: i0__namespace, template: "<div role=\"treeitem\" class=\"dx-treelist-item dxd-list-item-back-color dxd-back-highlighted dx-accessibility-treelist-item dx-accessibility-focus-border-accented\"\n    [attr.aria-expanded]=\"data.attr['aria-expanded']\"\n    [attr.aria-selected]=\"data.attr['aria-selected']\"\n    [attr.aria-level]=\"data.attr['aria-level']\"\n    [attr.aria-label]=\"data.attr['aria-label']\"\n    [attr.aria-setsize]=\"data.attr['aria-setsize']\"\n    [attr.aria-posinset]=\"data.attr['aria-posinset']\"\n    [attr.id]=\"data.attr['id']\"\n    [class.dxd-state-selected]=\"data.isSelected || data.isMultiSelected\"\n    [class.dx-treelist-item-selected]=\"data.isSelected || data.isMultiSelected\"\n    [style.padding-left]=\"data.padding['padding-left'] + 'px'\"\n    [style.padding-right]=\"data.padding['padding-right'] + 'px'\"\n    (dblclick)=\"data.events.dblclick()\"\n    (mouseenter)=\"data.events.mouseenter()\"\n    (mouseleave)=\"data.events.mouseleave()\"\n    >\n        <div *ngIf=\"data.hasItems\">\n            <dxa-template\n                template=\"dxrd-svg-collapsed\"\n                class=\"dx-treelist-collapsedbutton\"\n                [class.dx-collapsing-image]=\"data.hasItems\"\n                [class.dx-image-leaf-node]=\"!data.hasItems\"\n                [class.dx-image-expanded]=\"data.hasItems && !data.collapsed\"\n                (click)=\"data.toggleCollapsed()\">\n            </dxa-template>\n        </div>\n        <div class=\"dx-treelist-caption\" [style.padding-left]=\"data.hasItems ? '0px': '18px'\">\n            <div *ngIf=\"data.actions && data.actions.length > 0\">\n                <dxa-template [template]=\"data.templates.actionsContainer\" [data]=\"data\"></dxa-template>\n            </div>\n            <div *ngIf=\"data.isDraggable\">\n                <div class=\"dx-treelist-selectedcontent\" (click)=\"data.toggleSelected()\" data-bind=\"event: $root.ContextMenuDisabled && $root.ContextMenuDisabled() ? null : { contextmenu: toggleSelected }, draggable: dragDropHandler\">\n                    <dxa-template [template]=\"data.templates.headerItemContent\" [data]=\"data\"></dxa-template>\n                </div>\n            </div>\n            <div *ngIf=\"!data.isDraggable\">\n                <div class=\"dx-treelist-selectedcontent\" (click)=\"data.toggleSelected()\" data-bind=\"event: $root.ContextMenuDisabled && $root.ContextMenuDisabled() ? null : { contextmenu: toggleSelected }\">\n                    <dxa-template [template]=\"data.templates.headerItemContent\" [data]=\"data\"></dxa-template>\n                </div>\n            </div>\n        </div>\n</div>", components: [{ type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TreeListHeaderItemComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxa-treelist-header-item',
+                        templateUrl: './treelist-header-item.component.html',
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var TreeListItemTextComponent = /** @class */ (function () {
+        function TreeListItemTextComponent() {
+        }
+        return TreeListItemTextComponent;
+    }());
+    TreeListItemTextComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TreeListItemTextComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TreeListItemTextComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TreeListItemTextComponent, selector: "dxa-treelist-item-text-content", inputs: { data: "data" }, ngImport: i0__namespace, template: "<div class=\"dx-treelist-text-wrapper\">\n    <div *ngIf=\"data.searchModel.searchEnabled\">\n        <div class=\"dx-treelist-text dx-highlighted-search-text\" data-bind=\"searchHighlighting: { text: text, textToSearch: searchModel.textToSearch, searchOptions: searchModel.searchOptions }, attr: { title: text }\"></div>\n    </div>\n    <div *ngIf=\"!data.searchModel.searchEnabled\">\n        <div class=\"dx-treelist-text\" [attr.title]=\"data.text\">\n            {{data.text}}\n        </div>\n    </div>\n</div>", directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TreeListItemTextComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxa-treelist-item-text-content',
+                        templateUrl: './treelist-item-text-content.component.html',
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var TreeListHeaderItemCaptionContentComponent = /** @class */ (function () {
+        function TreeListHeaderItemCaptionContentComponent() {
+        }
+        return TreeListHeaderItemCaptionContentComponent;
+    }());
+    TreeListHeaderItemCaptionContentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TreeListHeaderItemCaptionContentComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TreeListHeaderItemCaptionContentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TreeListHeaderItemCaptionContentComponent, selector: "dxa-treelist-header-item-caption-content", inputs: { data: "data" }, ngImport: i0__namespace, template: "<dxa-template *ngIf=\"!!data.imageTemplateName\" class=\"dx-treelist-image\"\n    [attr.title]=\"data.text\"\n    [template]=\"data.imageTemplateName\"\n    [class]=\"'dx-treelist-image ' + data.imageClassName\">\n</dxa-template>\n<dxa-template [template]=\"data.templates.itemTextContent\" [data]=\"data\"></dxa-template>", components: [{ type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TreeListHeaderItemCaptionContentComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxa-treelist-header-item-caption-content',
+                        templateUrl: './treelist-header-item-caption-content.component.html'
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var LazyTemplateComponent = /** @class */ (function (_super) {
+        __extends(LazyTemplateComponent, _super);
+        function LazyTemplateComponent() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this._isDisposed = false;
+            _this.isReady = false;
+            return _this;
+        }
+        LazyTemplateComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            _super.prototype.ngAfterViewInit.call(this);
+            var resolver = this.resolver || _codeResolver.globalResolver;
+            this.task = resolver.execute(function () {
+                if (!_this._isDisposed) {
+                    _this.isResolved && _this.isResolved(true);
+                    _this.isReady = true;
+                    _this._cd.detectChanges();
+                }
+            });
+        };
+        LazyTemplateComponent.prototype.ngOnDestroy = function () {
+            this.task.dispose();
+            this._isDisposed = true;
+        };
+        return LazyTemplateComponent;
+    }(TemplateComponent));
+    LazyTemplateComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LazyTemplateComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    LazyTemplateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LazyTemplateComponent, selector: "dxa-lazy-template", inputs: { resolver: "resolver", isResolved: "isResolved" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"isReady && !isImage\" [ngTemplateOutlet]=\"templateRef\" [ngTemplateOutletContext]=\"{ data: data }\"></ng-container>\n<dxa-image-template *ngIf=\"isReady && isImage\" [template]=\"template\"></dxa-image-template> ", components: [{ type: ImageTemplateComponent, selector: "dxa-image-template", inputs: ["template"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LazyTemplateComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxa-lazy-template',
+                        templateUrl: './lazy.template.component.html',
+                    }]
+            }], propDecorators: { resolver: [{
+                    type: i0.Input,
+                    args: ['resolver']
+                }], isResolved: [{
+                    type: i0.Input,
+                    args: ['isResolved']
+                }] } });
+
+    var AccordionDirective = /** @class */ (function (_super) {
+        __extends(AccordionDirective, _super);
+        function AccordionDirective() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.eventName = 'afterViewInit';
+            return _this;
+        }
+        AccordionDirective.prototype.InitAndReturnDisposeFunc = function (element) {
+            return bindings_accordion.InitAccordion(element, this.options);
+        };
+        return AccordionDirective;
+    }(BaseDisposableDirective));
+    AccordionDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AccordionDirective, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
+    AccordionDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: AccordionDirective, selector: "[dxaAccordion]", inputs: { options: ["dxaAccordion", "options"] }, usesInheritance: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AccordionDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[dxaAccordion]'
+                    }]
+            }], propDecorators: { options: [{
+                    type: i0.Input,
+                    args: ['dxaAccordion']
+                }] } });
+
+    var EditorComponentBase = /** @class */ (function () {
+        function EditorComponentBase(_cd) {
+            this._cd = _cd;
+        }
+        EditorComponentBase.prototype.getEditorOptions = function () {
+            return {};
+        };
+        EditorComponentBase.prototype.getOptions = function () {
+            return this.data.getOptions(this.getEditorOptions());
+        };
+        EditorComponentBase.prototype.onPropertyChanged = function () {
+            var currentOptions = this.getOptions();
+            for (var name in currentOptions) {
+                if (typeof currentOptions[name] !== 'function' && currentOptions[name] !== this.options[name]) {
+                    if (Array.isArray(currentOptions[name])) {
+                        if (JSON.stringify(this.options[name]) !== JSON.stringify(currentOptions[name]))
+                            this.options[name] = currentOptions[name];
+                    }
+                    else {
+                        this.options[name] = currentOptions[name];
+                    }
+                }
+            }
+        };
+        EditorComponentBase.prototype.ngAfterViewInit = function () {
+            if (!this.widget || !this.data.extendedOptions)
+                return;
+            var dxWidget = this.widget.instance;
+            var options = this.data.extendedOptions;
+            Object.keys(this.data.extendedOptions).forEach(function (x) { return dxWidget.option(x, options[x]); });
+            this._cd.detectChanges();
+        };
+        EditorComponentBase.prototype.ngOnInit = function () {
+            var _this = this;
+            this.options = this.getOptions();
+            var model = this.data.getModel();
+            model.events.on('propertyChanged', function (args) {
+                _this.onPropertyChanged();
+            });
+            this.validatorOptions = this.data.getValidatorOptions(this.data.validatorOptions || { validationRules: this.data.validationRules || [] });
+        };
+        EditorComponentBase.prototype.isResolved = function (newVal) {
+            this.data.setIsRendered(newVal);
+        };
+        return EditorComponentBase;
+    }());
+    EditorComponentBase.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EditorComponentBase, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    EditorComponentBase.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EditorComponentBase, selector: "dxa-editor", inputs: { data: "data" }, viewQueries: [{ propertyName: "widget", first: true, predicate: ["widget"], descendants: true }], ngImport: i0__namespace, template: "<div class=\"dx-editor\" [hidden]=\"!data.visible\">\r\n    <div class=\"dx-group\" [dxaAccordion]=\"data\">\r\n        <div class=\"dx-editor-header\">\r\n            <div class=\"dx-field\" \r\n                role=\"treeitem\"\r\n                [attr.id]=\"data.isComplexEditor ? data.headerId : undefined\"\r\n                [attr.aria-owns]=\"data.isComplexEditor ? data.contentId : undefined\"\r\n                [attr.aria-expanded]=\"data.isComplexEditor && (data.alwaysShow || !data.collapsed ? 'true' : 'false')\"\r\n                [class.dxrd-accessibility-accordion-trigger]=\"data.isComplexEditor\"\r\n                [class.dx-accessibility-focus-border-accented]=\"data.isComplexEditor\">\r\n                    <div class=\"dx-field-label dx-accordion-header dxd-text-primary\" \r\n                    [style.padding-left]=\"data.padding['padding-left'] + 'px'\"\r\n                    [class.dx-accordion-empty]=\"data.templateName === 'dx-emptyHeader'\">\r\n                        <div *ngIf=\"data.isComplexEditor\" [attr.disabled]=\"data.templateName !== 'dx-emptyHeader'\">\r\n                            <dxa-template class=\"propertygrid-editor-collapsed dx-collapsing-image\" template=\"dxrd-svg-collapsed\" \r\n                             [class.dx-image-expanded]=\"!data.collapsed\"></dxa-template>\r\n                             <div *ngIf=\"!!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\" data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"></div>\r\n                             <div *ngIf=\"!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\">\r\n                                 {{data.displayName}}\r\n                             </div>\r\n                        </div>\r\n                        <label *ngIf=\"!data.isComplexEditor && !!data.textToSearch\" \r\n                        class=\"propertygrid-editor-displayName\"\r\n                        data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"\r\n                        [attr.title]=\"data.displayName\"\r\n                        [attr.for]=\"data.editorInputId\"\r\n                        [class.dx-field-label-required]=\"data.isRequired\"\r\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\r\n                        ></label>\r\n                        <label *ngIf=\"!data.isComplexEditor && !data.textToSearch\" \r\n                        class=\"propertygrid-editor-displayName\"\r\n                        [attr.title]=\"data.displayName\"\r\n                        [attr.for]=\"data.editorInputId\"\r\n                        [class.dx-field-label-required]=\"data.isRequired\"\r\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\r\n                        >{{data.displayName}}</label>                             \r\n                </div>\r\n                <div class=\"dx-field-value\" \r\n                [class.dxd-border-accented]=\"data.isPropertyHighlighted\">\r\n                    <div data-bind=\"service: { name: 'createEditorAddOn' }\"></div>\r\n                    <dxa-lazy-template *ngIf=\"data.templateName !== 'dx-emptyHeader'\" [isResolved]=\"isResolved\" [template]=\"data.templateName\" [data]=\"data\"></dxa-lazy-template>\r\n                    <!-- ko if: templateName !== 'dx-emptyHeader' -->\r\n                    <!-- ko lazy: { innerBindings: { template: templateName }, isResolved: function(val) { $data.setIsRendered(val) } } -->\r\n                    <!-- /ko -->\r\n                    <!-- /ko -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"data.isComplexEditor\" class=\"dx-editor-content dx-accordion-content\" role=\"group\" \r\n        [attr.aria-labelledby]=\"data.headerId\"\r\n        [attr.id]=\"data.contentId\"\r\n        [attr.aria-hidden]=\"!data.alwaysShow && data.collapsed ? 'true' : 'false'\">\r\n        <dxa-template *ngIf=\"data.editorCreated\" [template]=\"data.contentTemplateName\" [data]=\"data\"></dxa-template>\r\n        </div>\r\n    </div>\r\n</div>", components: [{ type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { type: LazyTemplateComponent, selector: "dxa-lazy-template", inputs: ["resolver", "isResolved"] }], directives: [{ type: AccordionDirective, selector: "[dxaAccordion]", inputs: ["dxaAccordion"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EditorComponentBase, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxa-editor',
+                        templateUrl: './editor.html'
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }], widget: [{
+                    type: i0.ViewChild,
+                    args: ['widget']
+                }] } });
+
+    var TextBoxEditorComponent = /** @class */ (function (_super) {
+        __extends(TextBoxEditorComponent, _super);
+        function TextBoxEditorComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        TextBoxEditorComponent.prototype.getEditorOptions = function () {
+            return {
+                value: this.data.value,
+                disabled: this.data.disabled,
+                inputAttr: {
+                    'aria-label': this.data.displayName,
+                    'id': this.data.editorInputId
+                }
+            };
+        };
+        return TextBoxEditorComponent;
+    }(EditorComponentBase));
+    TextBoxEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TextBoxEditorComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    TextBoxEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TextBoxEditorComponent, selector: "dxa-text", usesInheritance: true, ngImport: i0__namespace, template: "<dx-text-box #widget\r\n[value]=\"options.value\"\r\n[disabled]=\"options.disabled\"\r\n[inputAttr]=\"options.inputAttr\"\r\n(onValueChanged)=\"options.onValueChanged($event)\"\r\n(onFocusIn)=\"options.onFocusIn && options.onFocusIn($event)\"\r\n(onKeyDown)=\"options.onKeyDown && options.onKeyDown($event)\"\r\n(onPaste)=\"options.onPaste && options.onPaste($event)\"\r\n[placeholder]=\"options.placeholder\"\r\n[showClearButton]=\"options.showClearButton\"\r\n>\r\n    <dx-validator *ngIf=\"!!data.validationRules\" [validationRules]=\"validatorOptions.validationRules\">\r\n    </dx-validator>\r\n</dx-text-box>", components: [{ type: i1__namespace.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isDirty", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isDirtyChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { type: i1__namespace.DxValidatorComponent, selector: "dx-validator", inputs: ["adapter", "elementAttr", "height", "name", "validationGroup", "validationRules", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValidated", "adapterChange", "elementAttrChange", "heightChange", "nameChange", "validationGroupChange", "validationRulesChange", "widthChange"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TextBoxEditorComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxa-text',
+                        templateUrl: './editor.textbox.html'
+                    }]
+            }] });
+
+    var EditorDropDownComponentBase = /** @class */ (function (_super) {
+        __extends(EditorDropDownComponentBase, _super);
+        function EditorDropDownComponentBase(_cd) {
+            return _super.call(this, _cd) || this;
+        }
+        EditorDropDownComponentBase.prototype.beforeDetectChanges = function () {
+        };
+        EditorDropDownComponentBase.prototype.ngAfterViewInit = function () {
+            this.container = _utils$1.getParentContainer(this.target.nativeElement);
+            this.currentElement = this.target.nativeElement;
+            this.beforeDetectChanges();
+            this._cd.detectChanges();
+        };
+        return EditorDropDownComponentBase;
+    }(EditorComponentBase));
+    EditorDropDownComponentBase.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EditorDropDownComponentBase, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    EditorDropDownComponentBase.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EditorDropDownComponentBase, selector: "ng-component", viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EditorDropDownComponentBase, decorators: [{
+                type: i0.Component,
+                args: [{
+                        template: ''
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { target: [{
+                    type: i0.ViewChild,
+                    args: ['target', { read: i0.ElementRef }]
+                }] } });
+
+    var DateEditorComponent = /** @class */ (function (_super) {
+        __extends(DateEditorComponent, _super);
+        function DateEditorComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        DateEditorComponent.prototype.getEditorOptions = function () {
+            return {
+                value: this.data.value,
+                type: 'datetime',
+                disabled: this.data.disabled,
+                inputAttr: { 'aria-label': this.data.displayName, id: this.data.editorInputId },
+            };
+        };
+        DateEditorComponent.prototype.beforeDetectChanges = function () {
+            this.dropDownOptions = {
+                container: this.container,
+                position: {
+                    at: 'left bottom',
+                    collision: 'flipfit flip',
+                    my: 'left top',
+                    boundary: this.container,
+                    of: this.currentElement
+                }
+            };
+        };
+        return DateEditorComponent;
+    }(EditorDropDownComponentBase));
+    DateEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DateEditorComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    DateEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DateEditorComponent, selector: "dxa-date", usesInheritance: true, ngImport: i0__namespace, template: "<div class=\"dx-datebox-container\">\r\n    <dx-date-box #target #widget\r\n        [value]=\"options.value\"\r\n        [type]=\"options.type\"\r\n        [disabled]=\"options.disabled\"\r\n        (onValueChanged)=\"options.onValueChanged($event)\"\r\n        [inputAttr]=\"options.inputAttr\"\r\n        [placeholder]=\"options.placeholder\"\r\n        [showClearButton]=\"options.showClearButton\"\r\n        [dropDownOptions]=\"dropDownOptions\">\r\n        <dx-validator [validationRules]=\"validatorOptions.validationRules\">\r\n        </dx-validator>\r\n    </dx-date-box>\r\n</div>", components: [{ type: i1__namespace.DxDateBoxComponent, selector: "dx-date-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "adaptivityEnabled", "applyButtonText", "applyValueMode", "buttons", "calendarOptions", "cancelButtonText", "dateOutOfRangeMessage", "dateSerializationFormat", "deferRendering", "disabled", "disabledDates", "displayFormat", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "interval", "invalidDateMessage", "isDirty", "isValid", "label", "labelMode", "max", "maxLength", "min", "name", "opened", "openOnFieldClick", "pickerType", "placeholder", "readOnly", "rtlEnabled", "showAnalogClock", "showClearButton", "showDropDownButton", "spellcheck", "stylingMode", "tabIndex", "text", "todayButtonText", "type", "useMaskBehavior", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "adaptivityEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "calendarOptionsChange", "cancelButtonTextChange", "dateOutOfRangeMessageChange", "dateSerializationFormatChange", "deferRenderingChange", "disabledChange", "disabledDatesChange", "displayFormatChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "intervalChange", "invalidDateMessageChange", "isDirtyChange", "isValidChange", "labelChange", "labelModeChange", "maxChange", "maxLengthChange", "minChange", "nameChange", "openedChange", "openOnFieldClickChange", "pickerTypeChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showAnalogClockChange", "showClearButtonChange", "showDropDownButtonChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "todayButtonTextChange", "typeChange", "useMaskBehaviorChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { type: i1__namespace.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__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DateEditorComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxa-date',
+                        templateUrl: './editor.date.html'
+                    }]
+            }] });
+
+    var SelectBoxComponent = /** @class */ (function (_super) {
+        __extends(SelectBoxComponent, _super);
+        function SelectBoxComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        // popupPosition: Properties['popupPosition']
+        SelectBoxComponent.prototype.getEditorOptions = function () {
+            return {
+                dataSource: this.data.values,
+                value: this.data.value,
+                valueExpr: 'value',
+                displayExpr: 'displayValue',
+                // displayCustomValue: true,
+                disabled: this.data.disabled,
+                useItemTextAsTitle: true,
+                noDataText: _localization.noDataText(),
+                // encodeNoDataText: true,
+                inputAttr: { 'aria-label': this.data.displayName, id: this.data.editorInputId }
+            };
+        };
+        SelectBoxComponent.prototype.beforeDetectChanges = function () {
+            this.dropDownOptions = {
+                container: this.container,
+            };
+            // this.popupPosition = {
+            //     boundary: this.container
+            // };
+        };
+        return SelectBoxComponent;
+    }(EditorDropDownComponentBase));
+    SelectBoxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SelectBoxComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    SelectBoxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SelectBoxComponent, selector: "dxa-selectbox", usesInheritance: true, ngImport: i0__namespace, template: "<dx-select-box #target #widget [dataSource]=\"options.dataSource\" [value]=\"options.value\" [valueExpr]=\"options.valueExpr\"\r\n    [displayExpr]=\"options.displayExpr\" [disabled]=\"options.disabled\"\r\n    (onValueChanged)=\"options.onValueChanged($event)\"\r\n    [useItemTextAsTitle]=\"options.useItemTextAsTitle\" [noDataText]=\"options.noDataText\"\r\n    [dropDownOptions]=\"dropDownOptions\"\r\n    [inputAttr]=\"options.inputAttr\"\r\n    [placeholder]=\"options.placeholder\"\r\n    [showClearButton]=\"options.showClearButton\"\r\n    [searchEnabled]=\"options.searchEnabled\">\r\n    <dx-validator *ngIf=\"!!data.validationRules\" [validationRules]=\"validatorOptions.validationRules\">\r\n    </dx-validator>\r\n</dx-select-box>", components: [{ type: i1__namespace.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "customItemCreateEvent", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isDirty", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "customItemCreateEventChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isDirtyChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { type: i1__namespace.DxValidatorComponent, selector: "dx-validator", inputs: ["adapter", "elementAttr", "height", "name", "validationGroup", "validationRules", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValidated", "adapterChange", "elementAttrChange", "heightChange", "nameChange", "validationGroupChange", "validationRulesChange", "widthChange"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SelectBoxComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxa-selectbox',
+                        templateUrl: './editor.selectbox.html'
+                    }]
+            }] });
+
+    var BoolSelectComponent = /** @class */ (function (_super) {
+        __extends(BoolSelectComponent, _super);
+        function BoolSelectComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        BoolSelectComponent.prototype.getEditorOptions = function () {
+            var selectBoxOptions = _super.prototype.getEditorOptions.call(this);
+            return {
+                dataSource: [{
+                        val: true,
+                        text: _localization.getLocalization('Yes', 'AnalyticsCoreStringId.ParametersPanel_True')
+                    }, {
+                        val: false, text: _localization.getLocalization('No', 'AnalyticsCoreStringId.ParametersPanel_False')
+                    }],
+                inputAttr: selectBoxOptions.inputAttr,
+                valueExpr: 'val',
+                displayExpr: 'text',
+                value: selectBoxOptions.value,
+                disabled: selectBoxOptions.disabled
+            };
+        };
+        return BoolSelectComponent;
+    }(SelectBoxComponent));
+    BoolSelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BoolSelectComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    BoolSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BoolSelectComponent, selector: "dxa-boolselect", usesInheritance: true, ngImport: i0__namespace, template: "<dx-select-box #target #widget [dataSource]=\"options.dataSource\" [value]=\"options.value\" [valueExpr]=\"options.valueExpr\"\r\n    [displayExpr]=\"options.displayExpr\" [disabled]=\"options.disabled\"\r\n    (onValueChanged)=\"options.onValueChanged($event)\"\r\n    [useItemTextAsTitle]=\"options.useItemTextAsTitle\" [noDataText]=\"options.noDataText\"\r\n    [dropDownOptions]=\"dropDownOptions\"\r\n    [inputAttr]=\"options.inputAttr\"\r\n    [placeholder]=\"options.placeholder\"\r\n    [showClearButton]=\"options.showClearButton\"\r\n    [searchEnabled]=\"options.searchEnabled\">\r\n    <dx-validator *ngIf=\"!!data.validationRules\" [validationRules]=\"validatorOptions.validationRules\">\r\n    </dx-validator>\r\n</dx-select-box>", components: [{ type: i1__namespace.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "customItemCreateEvent", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isDirty", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "customItemCreateEventChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isDirtyChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { type: i1__namespace.DxValidatorComponent, selector: "dx-validator", inputs: ["adapter", "elementAttr", "height", "name", "validationGroup", "validationRules", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValidated", "adapterChange", "elementAttrChange", "heightChange", "nameChange", "validationGroupChange", "validationRulesChange", "widthChange"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BoolSelectComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxa-boolselect',
+                        templateUrl: './editor.selectbox.html'
+                    }]
+            }] });
+
+    var ObjectEditorComponent = /** @class */ (function () {
+        function ObjectEditorComponent() {
+        }
+        return ObjectEditorComponent;
+    }());
+    ObjectEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ObjectEditorComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ObjectEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ObjectEditorComponent, selector: "dxa-object-editor-content", inputs: { data: "data" }, ngImport: i0__namespace, template: "<dxa-template *ngIf=\"data.visible\" template=\"dx-propertieseditor\" [data]=\"data.viewmodel\"></dxa-template>", components: [{ type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ObjectEditorComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxa-object-editor-content',
+                        templateUrl: './object-editor.component.html'
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var BooleanEditorComponent = /** @class */ (function (_super) {
+        __extends(BooleanEditorComponent, _super);
+        function BooleanEditorComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        BooleanEditorComponent.prototype.getEditorOptions = function () {
+            return {
+                value: this.data.value,
+                disabled: this.data.disabled,
+                elementAttr: { 'aria-label': this.data.displayName }
+            };
+        };
+        return BooleanEditorComponent;
+    }(EditorComponentBase));
+    BooleanEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BooleanEditorComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    BooleanEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanEditorComponent, selector: "dxa-boolean", usesInheritance: true, ngImport: i0__namespace, template: "<dx-check-box #widget class=\"propertygrid-editor-checkbox\" [value]=\"options.value\" [disabled]=\"options.disabled\"\r\n    [elementAttr]=\"options.elementAttr\" (onValueChanged)=\"options.onValueChanged($event)\"\r\n    (onInitialized)=\"options.onInitialized($event)\">\r\n    <dx-validator *ngIf=\"!!data.validationRules\" [validationRules]=\"validatorOptions.validationRules\">\r\n    </dx-validator>\r\n</dx-check-box>", components: [{ type: i1__namespace.DxCheckBoxComponent, selector: "dx-check-box", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "enableThreeStateBehavior", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "iconSize", "isDirty", "isValid", "name", "readOnly", "rtlEnabled", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "enableThreeStateBehaviorChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconSizeChange", "isDirtyChange", "isValidChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { type: i1__namespace.DxValidatorComponent, selector: "dx-validator", inputs: ["adapter", "elementAttr", "height", "name", "validationGroup", "validationRules", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValidated", "adapterChange", "elementAttrChange", "heightChange", "nameChange", "validationGroupChange", "validationRulesChange", "widthChange"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BooleanEditorComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxa-boolean',
+                        templateUrl: './editor.boolean.html'
+                    }]
+            }] });
+
+    var LocalizedSelectBoxComponent = /** @class */ (function (_super) {
+        __extends(LocalizedSelectBoxComponent, _super);
+        function LocalizedSelectBoxComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        LocalizedSelectBoxComponent.prototype.getEditorOptions = function () {
+            return {
+                dataSource: this.data.values.map(function (x) { return ({
+                    value: x.value,
+                    displayValue: _localization.getLocalization(x.displayValue, x.localizationId)
+                }); }),
+                value: this.data.value,
+                valueExpr: 'value',
+                displayExpr: 'displayValue',
+                disabled: this.data.disabled
+            };
+        };
+        return LocalizedSelectBoxComponent;
+    }(SelectBoxComponent));
+    LocalizedSelectBoxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LocalizedSelectBoxComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    LocalizedSelectBoxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LocalizedSelectBoxComponent, selector: "dxa-selectbox-localized", usesInheritance: true, ngImport: i0__namespace, template: "<dx-select-box #target #widget [dataSource]=\"options.dataSource\" [value]=\"options.value\" [valueExpr]=\"options.valueExpr\"\r\n    [displayExpr]=\"options.displayExpr\" [disabled]=\"options.disabled\"\r\n    (onValueChanged)=\"options.onValueChanged($event)\"\r\n    [useItemTextAsTitle]=\"options.useItemTextAsTitle\" [noDataText]=\"options.noDataText\"\r\n    [dropDownOptions]=\"dropDownOptions\"\r\n    [inputAttr]=\"options.inputAttr\"\r\n    [placeholder]=\"options.placeholder\"\r\n    [showClearButton]=\"options.showClearButton\"\r\n    [searchEnabled]=\"options.searchEnabled\">\r\n    <dx-validator *ngIf=\"!!data.validationRules\" [validationRules]=\"validatorOptions.validationRules\">\r\n    </dx-validator>\r\n</dx-select-box>", components: [{ type: i1__namespace.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "customItemCreateEvent", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isDirty", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "customItemCreateEventChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isDirtyChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { type: i1__namespace.DxValidatorComponent, selector: "dx-validator", inputs: ["adapter", "elementAttr", "height", "name", "validationGroup", "validationRules", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValidated", "adapterChange", "elementAttrChange", "heightChange", "nameChange", "validationGroupChange", "validationRulesChange", "widthChange"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LocalizedSelectBoxComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxa-selectbox-localized',
+                        templateUrl: './editor.selectbox.html'
+                    }]
+            }] });
+
+    var NumericEditorComponent = /** @class */ (function (_super) {
+        __extends(NumericEditorComponent, _super);
+        function NumericEditorComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        NumericEditorComponent.prototype.getEditorOptions = function () {
+            return {
+                value: this.data.value,
+                showSpinButtons: true,
+                disabled: this.data.disabled,
+                inputAttr: { 'aria-label': this.data.displayName, id: this.data.editorInputId }
+            };
+        };
+        return NumericEditorComponent;
+    }(EditorComponentBase));
+    NumericEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NumericEditorComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    NumericEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NumericEditorComponent, selector: "dxa-numeric", usesInheritance: true, ngImport: i0__namespace, template: "<dx-number-box #widget\r\n    [value]=\"options.value\"\r\n    [showSpinButtons]=\"options.showSpinButtons\"\r\n    [inputAttr]=\"options.inputAttr\"\r\n    [disabled]=\"options.disabled\"\r\n    (onValueChanged)=\"options.onValueChanged($event)\">\r\n    <dx-validator *ngIf=\"!!data.validationRules\" [validationRules]=\"validatorOptions.validationRules\">\r\n    </dx-validator>\r\n</dx-number-box>", components: [{ type: i1__namespace.DxNumberBoxComponent, selector: "dx-number-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "format", "height", "hint", "hoverStateEnabled", "inputAttr", "invalidValueMessage", "isDirty", "isValid", "label", "labelMode", "max", "min", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showSpinButtons", "step", "stylingMode", "tabIndex", "text", "useLargeSpinButtons", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "formatChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "invalidValueMessageChange", "isDirtyChange", "isValidChange", "labelChange", "labelModeChange", "maxChange", "minChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showSpinButtonsChange", "stepChange", "stylingModeChange", "tabIndexChange", "textChange", "useLargeSpinButtonsChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { type: i1__namespace.DxValidatorComponent, selector: "dx-validator", inputs: ["adapter", "elementAttr", "height", "name", "validationGroup", "validationRules", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValidated", "adapterChange", "elementAttrChange", "heightChange", "nameChange", "validationGroupChange", "validationRulesChange", "widthChange"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NumericEditorComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxa-numeric',
+                        templateUrl: './editor.numeric.html'
+                    }]
+            }] });
+
+    var ColorPickerComponent = /** @class */ (function (_super) {
+        __extends(ColorPickerComponent, _super);
+        function ColorPickerComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        ColorPickerComponent.prototype.getEditorOptions = function () {
+            return {
+                value: this.data.displayValue,
+                placeholder: _localization.getLocalization('(Not set)', 'ReportStringId.UD_PropertyGrid_NotSetText'),
+                editAlphaChannel: true,
+                disabled: this.data.disabled,
+                inputAttr: { 'aria-label': this.data.displayName, id: this.data.editorInputId }
+            };
+        };
+        ColorPickerComponent.prototype.beforeDetectChanges = function () {
+            _super.prototype.beforeDetectChanges.call(this);
+            this.dropDownOptions = {
+                container: this.container,
+                position: {
+                    at: 'left bottom',
+                    collision: 'flipfit flipfit',
+                    my: 'left top',
+                    boundary: this.container,
+                    of: this.currentElement
+                }
+            };
+        };
+        return ColorPickerComponent;
+    }(EditorDropDownComponentBase));
+    ColorPickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ColorPickerComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    ColorPickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ColorPickerComponent, selector: "dxa-colorpicker", usesInheritance: true, ngImport: i0__namespace, template: "<dx-color-box #target #widget\r\n    [value]=\"options.value\"\r\n    (onValueChanged)=\"options.onValueChanged($event)\"\r\n    [placeholder]=\"options.placeholder\"\r\n    [editAlphaChannel]=\"options.editAlphaChannel\"\r\n    [disabled]=\"options.disabled\"\r\n    [dropDownOptions]=\"dropDownOptions\"\r\n    [inputAttr]=\"options.inputAttr\"></dx-color-box>", components: [{ type: i1__namespace.DxColorBoxComponent, selector: "dx-color-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyButtonText", "applyValueMode", "buttons", "cancelButtonText", "deferRendering", "disabled", "dropDownButtonTemplate", "dropDownOptions", "editAlphaChannel", "elementAttr", "fieldTemplate", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isDirty", "isValid", "keyStep", "label", "labelMode", "name", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showDropDownButton", "stylingMode", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "visible", "width"], outputs: ["onChange", "onClosed", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "cancelButtonTextChange", "deferRenderingChange", "disabledChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "editAlphaChannelChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isDirtyChange", "isValidChange", "keyStepChange", "labelChange", "labelModeChange", "nameChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showDropDownButtonChange", "stylingModeChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ColorPickerComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxa-colorpicker',
+                        templateUrl: './editor.colorpicker.html'
+                    }]
+            }] });
+
+    var CollectionEditorComponent = /** @class */ (function () {
+        function CollectionEditorComponent() {
+        }
+        CollectionEditorComponent.prototype.ngOnDestroy = function () {
+            this._model.dispose();
+        };
+        CollectionEditorComponent.prototype.ngOnInit = function () {
+            this._model = new _editor.CollectionEditorViewModel(this.options);
+            this.data = this._model.getViewModel();
+        };
+        CollectionEditorComponent.prototype.onScrollViewInitialized = function (args) {
+            args.component.option('useKeyboard', false);
+        };
+        return CollectionEditorComponent;
+    }());
+    CollectionEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CollectionEditorComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    CollectionEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CollectionEditorComponent, selector: "dxa-collectioneditor", inputs: { options: ["data", "options"], contentTemplate: "contentTemplate" }, ngImport: i0__namespace, template: "<div class=\"dx-collectioneditor\">\n    <div [dxaAccordion]=\"data\" [dxMutationObserver]=\"data.keyboardHelper\">\n        <div class=\"dx-collectioneditor-header dx-accordion-header\">\n            <div class=\"dx-editor-header\">\n                <div role=\"treeitem\"\n                    class=\"dx-field dx-accessibility-focus-border-accented dxrd-accessibility-accordion-trigger\"\n                    [attr.aria-expanded]=\"data.alwaysShow || !data.collapsed ? 'true' : 'false'\"\n                    [attr.aria-owns]=\"data.contentId\" [attr.id]=\"data.headerId\">\n                    <div *ngIf=\"data.showButtons\" class=\"dx-collectioneditor-actions-wrapper\">\n                        <dx-button *ngIf=\"data.buttons.up.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.up.action($event)\" [disabled]=\"data.buttons.up.disabled\"\n                            icon=\"dxrd-svg-operations-moveup\" iconClass=\"dx-image-moveup\"\n                            [template]=\"data.buttons.up.template\"\n                            [attr.title]=\"data.buttons.up.text\"></dx-button>\n                        <dx-button *ngIf=\"data.buttons.down.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.down.action($event)\" [disabled]=\"data.buttons.down.disabled\"\n                            icon=\"dxrd-svg-operations-movedown\" iconClass=\"dx-image-movedown\"\n                            [template]=\"data.buttons.down.template\"\n                            [attr.title]=\"data.buttons.down.text\"></dx-button>\n                        <div class=\"dx-collectioneditor-action-separator\"></div>\n                        <dx-button *ngIf=\"data.buttons.add.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.add.action($event)\" [disabled]=\"data.buttons.add.disabled\"\n                            [template]=\"data.buttons.add.template\"\n                            icon=\"dxrd-svg-operations-add\" iconClass=\"dx-image-add\"\n                            [attr.title]=\"data.buttons.add.text\"></dx-button>\n                        <dx-button *ngIf=\"data.buttons.delete.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.delete.action($event)\" [disabled]=\"data.buttons.delete.disabled\"\n                            [template]=\"data.buttons.delete.template\"\n                            icon=\"dxrd-svg-operations-remove\" iconClass=\"dx-image-remove\"\n                            [attr.title]=\"data.buttons.delete.text\"></dx-button>\n                    </div>\n                    <div *ngIf=\"!!data.displayName\" class=\"dx-collectioneditor-header-text dxd-text-primary\"\n                        [style.padding-left]=\"data.padding + 'px'\">\n                        <dxa-template class=\"propertygrid-editor-collapsed dx-collapsing-image\"\n                            template=\"dxrd-svg-collapsed\"\n                            [class.dx-image-expanded]=\"!data.collapsed \"></dxa-template>\n                        <div class=\"dx-group-header-font dxd-text-primary\" [attr.title]=\"data.displayName\">\n                            {{data.displayName}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div role=\"group\" class=\"dx-accordion-content\"\n            [attr.aria-hidden]=\"!data.alwaysShow && data.collapsed ? 'true' : 'false'\"\n            [attr.aria-labelledby]=\"data.headerId\" [attr.id]=\"data.contentId\">\n            <dx-scroll-view [hidden]=\"data.disabled\" showScrollbar=\"onHover\" [disabled]=\"!data.showScroll\"\n                [useNative]=\"false\" [scrollByThumb]=\"true\" (onInitialized)=\"onScrollViewInitialized($event)\">\n                <div *ngIf=\"data.values.length === 0\"\n                    class=\"dx-collectioneditor-empty dxd-empty-area-placeholder-text-color dxd-text-info\">\n                    <span class=\"dx-collectioneditor-empty-text\">{{data.emptyAreaText}}</span>\n                </div>\n                <div *ngIf=\"data.values.length !== 0\" class=\"dx-collectioneditor-items\">\n                    <div *ngFor=\"let value of data.values\"\n                        class=\"dx-collectioneditor-item-container dxd-button-back-color dxd-state-normal dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented\"\n                        [attr.aria-selected]=\"value.selected\" [dxActionModel]=\"value\" [dxAction]=\"value.select\"\n                        [class.dxd-state-selected]=\"value.selected\">\n                        <div class=\"dx-collection-item\">\n                            <ng-container *ngTemplateOutlet=\"contentTemplate, context: { data: value }\"></ng-container>\n                        </div>\n                    </div>\n                </div>\n            </dx-scroll-view>\n        </div>\n    </div>\n</div>", components: [{ type: i1__namespace.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"] }, { type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { type: i1__namespace.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"] }], directives: [{ type: AccordionDirective, selector: "[dxaAccordion]", inputs: ["dxaAccordion"] }, { type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DxActionDirective, selector: "[dxAction]", inputs: ["dxActionModel", "dxAction"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CollectionEditorComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxa-collectioneditor',
+                        templateUrl: './collectioneditor.component.html'
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { options: [{
+                    type: i0.Input,
+                    args: ['data']
+                }], contentTemplate: [{
+                    type: i0.Input,
+                    args: ['contentTemplate']
+                }] } });
+
+    var DesignerComponent = /** @class */ (function () {
+        function DesignerComponent(_cd) {
+            this._cd = _cd;
+        }
+        DesignerComponent.prototype.ngAfterViewInit = function () {
+            this.surfaceClass = this.data['surfaceClass'](this.root.nativeElement);
+            this._cd.detectChanges();
+        };
+        return DesignerComponent;
+    }());
+    DesignerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DesignerComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    DesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DesignerComponent, selector: "dxa-designer", inputs: { data: "data" }, viewQueries: [{ propertyName: "root", first: true, predicate: ["root"], descendants: true }], ngImport: i0__namespace, template: "<div tabindex=\"-1\" class=\"dx-designer-viewport\"\n    #root\n    [class]=\"surfaceClass\"\n    [class.dx-accessibility]=\"!!data.accessibilityCompliant\">\n    <div class=\"dxrd-designer-wrapper dx-editors dxd-surface-back-color dxd-scrollbar-color\" [hidden]=\"!(!data.designMode || data.designMode())\" \n    [class.dx-rtl]=\"data.rtl\"\n    [class.dx-ltr]=\"!data.rtl\"\n    [class]=\"data.rootStyle\">\n        <dxa-template *ngFor=\"let part of data.parts\" [template]=\"part.templateName\" [data]=\"part.viewModel || part.model\"></dxa-template>\n    </div>\n    <div *ngIf=\"!!data.addOns\">\n        <dxa-template *ngFor=\"let addon of data.addOns\" [template]=\"addon.templateName\" [data]=\"addon.model\"></dxa-template>\n    </div>\n    <div id=\"dxrd-designer-last-focus-item-blank\" class=\"dxrd-visually-hidden\" tabindex='-1'></div>\n</div>", components: [{ type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }], directives: [{ type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DesignerComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxa-designer',
+                        templateUrl: './designer.component.html'
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }], root: [{
+                    type: i0.ViewChild,
+                    args: ['root']
+                }] } });
+
+    var TemplatesComponent = /** @class */ (function () {
+        function TemplatesComponent(_templateEngine) {
+            this._templateEngine = _templateEngine;
+        }
+        TemplatesComponent.prototype.ngAfterViewInit = function () {
+            this._templateEngine.register('dxrd-right-panel-template-base', this.tabPanel);
+            this._templateEngine.register('dxrd-toolbar-tmplt', this.toolbar);
+            this._templateEngine.register('dx-propertieseditor', this.propertygrid);
+            this._templateEngine.register('dx-text', this.textbox);
+            this._templateEngine.register('dx-number-editor', this.textbox);
+            this._templateEngine.register('dx-date', this.datebox);
+            this._templateEngine.register('dx-selectbox', this.selectbox);
+            this._templateEngine.register('dx-boolean-select', this.boolselect);
+            this._templateEngine.register('dx-treelist-item', this.treelistItem);
+            this._templateEngine.register('dx-treelist-header-item', this.treelistHeaderItem);
+            this._templateEngine.register('dx-treelist-item-text-content', this.treelistItemTextContent);
+            this._templateEngine.register('dx-treelist-header-item-caption-content', this.treelistHeaderItemCaptionContent);
+            this._templateEngine.register('dxrd-guid', this.textbox);
+            this._templateEngine.register('dx-property-editor', this.editor);
+            this._templateEngine.register('dx-objectEditorContent', this.objectEditorContent);
+            this._templateEngine.register('dx-boolean', this.boolean);
+            this._templateEngine.register('dx-combobox', this.localizedSelectBox);
+            this._templateEngine.register('dx-numeric', this.numeric);
+            this._templateEngine.register('dxrd-colorpicker', this.colorpicker);
+            this._templateEngine.register('dx-collectioneditor', this.collectionEditor);
+            this._templateEngine.register('dx-designer', this.designer);
+        };
+        return TemplatesComponent;
+    }());
+    TemplatesComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TemplatesComponent, deps: [{ token: TemplateEngine }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TemplatesComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TemplatesComponent, selector: "dxa-templates", viewQueries: [{ propertyName: "tabPanel", first: true, predicate: ["tabpanel"], descendants: true }, { propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "propertygrid", first: true, predicate: ["propertygrid"], descendants: true }, { propertyName: "textbox", first: true, predicate: ["textbox"], descendants: true }, { propertyName: "treelistItem", first: true, predicate: ["treelistitem"], descendants: true }, { propertyName: "treelistHeaderItem", first: true, predicate: ["treelistheaderitem"], descendants: true }, { propertyName: "treelistItemTextContent", first: true, predicate: ["treelistitemtextcontent"], descendants: true }, { propertyName: "treelistHeaderItemCaptionContent", first: true, predicate: ["treelistheaderitemcaptioncontent"], descendants: true }, { propertyName: "datebox", first: true, predicate: ["datebox"], descendants: true }, { propertyName: "selectbox", first: true, predicate: ["selectbox"], descendants: true }, { propertyName: "boolselect", first: true, predicate: ["boolselect"], descendants: true }, { propertyName: "editor", first: true, predicate: ["editor"], descendants: true }, { propertyName: "objectEditorContent", first: true, predicate: ["objecteditorcontent"], descendants: true }, { propertyName: "boolean", first: true, predicate: ["boolean"], descendants: true }, { propertyName: "localizedSelectBox", first: true, predicate: ["localizedSelectBox"], descendants: true }, { propertyName: "numeric", first: true, predicate: ["numeric"], descendants: true }, { propertyName: "colorpicker", first: true, predicate: ["colorpicker"], descendants: true }, { propertyName: "collectionEditor", first: true, predicate: ["collectioneditor"], descendants: true }, { propertyName: "designer", first: true, predicate: ["designer"], descendants: true }], ngImport: i0__namespace, template: "<ng-template #tabpanel let-data=\"data\">\n    <dxa-tabpanel [data]=\"data\"></dxa-tabpanel>\n</ng-template>\n\n<ng-template #toolbar let-data=\"data\">\n    <dxa-actions [data]=\"data\"></dxa-actions>\n</ng-template>\n\n<ng-template #propertygrid let-data=\"data\">\n    <dxa-propertygrid [data]=\"data\"></dxa-propertygrid>\n</ng-template>\n\n<ng-template #treelistitem let-data=\"data\">\n    <dxa-treelist-item [data]=\"data\"></dxa-treelist-item>\n</ng-template>\n\n<ng-template #treelistheaderitem let-data=\"data\">\n    <dxa-treelist-header-item [data]=\"data\"></dxa-treelist-header-item>\n</ng-template>\n\n<ng-template #treelistitemtextcontent let-data=\"data\">\n    <dxa-treelist-item-text-content [data]=\"data\"></dxa-treelist-item-text-content>\n</ng-template>\n\n<ng-template #treelistheaderitemcaptioncontent let-data=\"data\">\n    <dxa-treelist-header-item-caption-content [data]=\"data\"></dxa-treelist-header-item-caption-content>\n</ng-template>\n\n<ng-template #textbox let-data=\"data\">\n    <dxa-text [data]=\"data\"></dxa-text>\n</ng-template>\n\n<ng-template #datebox let-data=\"data\">\n    <dxa-date [data]=\"data\"></dxa-date>\n</ng-template>\n\n<ng-template #selectbox let-data=\"data\">\n    <dxa-selectbox [data]=\"data\"></dxa-selectbox>\n</ng-template>\n\n<ng-template #boolselect let-data=\"data\">\n    <dxa-boolselect [data]=\"data\"></dxa-boolselect>\n</ng-template>\n\n<ng-template #editor let-data=\"data\">\n    <dxa-editor [data]=\"data\"></dxa-editor>\n</ng-template>\n\n<ng-template #objecteditorcontent let-data=\"data\">\n    <dxa-object-editor-content [data]=\"data\"></dxa-object-editor-content>\n</ng-template>\n\n<ng-template #boolean let-data=\"data\">\n    <dxa-boolean [data]=\"data\"></dxa-boolean>\n</ng-template>\n\n<ng-template #localizedSelectBox let-data=\"data\">\n    <dxa-selectbox-localized [data]=\"data\"></dxa-selectbox-localized>\n</ng-template>\n\n<ng-template #numeric let-data=\"data\">\n    <dxa-numeric [data]=\"data\"></dxa-numeric>\n</ng-template>\n\n<ng-template #colorpicker let-data=\"data\">\n    <dxa-colorpicker [data]=\"data\"></dxa-colorpicker>\n</ng-template>\n\n<ng-template #collectioneditor let-data=\"data\">\n    <dxa-collectioneditor [data]=\"data.data\" [contentTemplate]=\"data.contentTemplate\"></dxa-collectioneditor>\n</ng-template>\n\n<ng-template #designer let-data=\"data\">\n    <dxa-designer [data]=\"data\"></dxa-designer>\n</ng-template>", components: [{ type: TabpanelComponent, selector: "dxa-tabpanel", inputs: ["data"] }, { type: ActionsComponent, selector: "dxa-actions", inputs: ["data"] }, { type: PropertygridComponent, selector: "dxa-propertygrid", inputs: ["data"] }, { type: TreeListItemComponent, selector: "dxa-treelist-item", inputs: ["data"] }, { type: TreeListHeaderItemComponent, selector: "dxa-treelist-header-item", inputs: ["data"] }, { type: TreeListItemTextComponent, selector: "dxa-treelist-item-text-content", inputs: ["data"] }, { type: TreeListHeaderItemCaptionContentComponent, selector: "dxa-treelist-header-item-caption-content", inputs: ["data"] }, { type: TextBoxEditorComponent, selector: "dxa-text" }, { type: DateEditorComponent, selector: "dxa-date" }, { type: SelectBoxComponent, selector: "dxa-selectbox" }, { type: BoolSelectComponent, selector: "dxa-boolselect" }, { type: EditorComponentBase, selector: "dxa-editor", inputs: ["data"] }, { type: ObjectEditorComponent, selector: "dxa-object-editor-content", inputs: ["data"] }, { type: BooleanEditorComponent, selector: "dxa-boolean" }, { type: LocalizedSelectBoxComponent, selector: "dxa-selectbox-localized" }, { type: NumericEditorComponent, selector: "dxa-numeric" }, { type: ColorPickerComponent, selector: "dxa-colorpicker" }, { type: CollectionEditorComponent, selector: "dxa-collectioneditor", inputs: ["data", "contentTemplate"] }, { type: DesignerComponent, selector: "dxa-designer", inputs: ["data"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TemplatesComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxa-templates',
+                        templateUrl: './templates.component.html'
+                    }]
+            }], ctorParameters: function () { return [{ type: TemplateEngine }]; }, propDecorators: { tabPanel: [{
+                    type: i0.ViewChild,
+                    args: ['tabpanel']
+                }], toolbar: [{
+                    type: i0.ViewChild,
+                    args: ['toolbar']
+                }], propertygrid: [{
+                    type: i0.ViewChild,
+                    args: ['propertygrid']
+                }], textbox: [{
+                    type: i0.ViewChild,
+                    args: ['textbox']
+                }], treelistItem: [{
+                    type: i0.ViewChild,
+                    args: ['treelistitem']
+                }], treelistHeaderItem: [{
+                    type: i0.ViewChild,
+                    args: ['treelistheaderitem']
+                }], treelistItemTextContent: [{
+                    type: i0.ViewChild,
+                    args: ['treelistitemtextcontent']
+                }], treelistHeaderItemCaptionContent: [{
+                    type: i0.ViewChild,
+                    args: ['treelistheaderitemcaptioncontent']
+                }], datebox: [{
+                    type: i0.ViewChild,
+                    args: ['datebox']
+                }], selectbox: [{
+                    type: i0.ViewChild,
+                    args: ['selectbox']
+                }], boolselect: [{
+                    type: i0.ViewChild,
+                    args: ['boolselect']
+                }], editor: [{
+                    type: i0.ViewChild,
+                    args: ['editor']
+                }], objectEditorContent: [{
+                    type: i0.ViewChild,
+                    args: ['objecteditorcontent']
+                }], boolean: [{
+                    type: i0.ViewChild,
+                    args: ['boolean']
+                }], localizedSelectBox: [{
+                    type: i0.ViewChild,
+                    args: ['localizedSelectBox']
+                }], numeric: [{
+                    type: i0.ViewChild,
+                    args: ['numeric']
+                }], colorpicker: [{
+                    type: i0.ViewChild,
+                    args: ['colorpicker']
+                }], collectionEditor: [{
+                    type: i0.ViewChild,
+                    args: ['collectioneditor']
+                }], designer: [{
+                    type: i0.ViewChild,
+                    args: ['designer']
+                }] } });
+
+    var ExportComponent = /** @class */ (function () {
+        function ExportComponent(_cd) {
+            this._cd = _cd;
+            this.onSubmenuShowing = function (event) { };
+        }
+        ExportComponent.prototype.ngAfterViewInit = function () {
+            this.onSubmenuShowing = this.data.widget.onSubmenuShowing(this.data.getPopupContainer(this.menuComponent.nativeElement), this.menuComponent.nativeElement);
+            this._cd.detectChanges();
+        };
+        return ExportComponent;
+    }());
+    ExportComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ExportComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ExportComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ExportComponent, selector: "dxv-toolbar-export", inputs: { data: "data" }, viewQueries: [{ propertyName: "menuComponent", first: true, predicate: ["exportElement"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<div class=\"dxrd-preview-export-toolbar-item dxrd-toolbar-item\" [hidden]=\"!data.visible\">\n    <div class=\"dx-accessibility-toolbar-item dx-accessibility-focus-border-accented\">\n        <dx-menu #exportElement wrapperAttr.class=\"dxrd-preview-export-to dxd-button-back-color dxd-state-normal dxd-icon-highlighted\"\n            [disabled]=\"data.disabled\" [items]=\"data.widget.items\" cssClass=\"dxrdp-export-to-menu\"\n            (onItemClick)=\"data.click($event)\" (onSubmenuShowing)=\"onSubmenuShowing($event)\"\n            (onSubmenuShown)=\"data.widget.onSubmenuShown($event)\" (onSubmenuHiding)=\"data.widget.onSubmenuHiding($event)\"\n            (onItemRendered)=\"data.widget.onItemRendered($event)\"\n            itemTemplate=\"items\" [tabIndex]=\"-1\">\n            <div *dxTemplate=\"let item of 'items'\" class=\"dxrd-preview-export-menu-item\" [attr.title]=\"item.text\">\n                <div *ngIf=\"item.format\" class=\"dxrd-preview-export-item-text\">{{item.text}}</div>\n                <div *ngIf=\"!item.format\">\n                    <div class=\"dxrd-preview-export-item-image-wrapper\">\n                        <div class=\"dxrd-preview-export-item-image\" [class]=\"item.imageClassName\">\n                            <dxa-template [template]=\"item.imageTemplateName\"></dxa-template>\n                        </div>\n                    </div>\n                    <div class=\"dx-menu-item-popout-container\">\n                        <div class=\"dx-menu-item-popout\"></div>\n                    </div>\n                </div>\n            </div>\n        </dx-menu>\n    </div>\n    <div class=\"dxrd-toolbar-item-separator dxd-toolbar-separator-color dxd-border-secondary\"\n        [hidden]=\"!data.hasSeparator\">\n    </div>\n</div>", components: [{ type: i1__namespace.DxMenuComponent, selector: "dx-menu", inputs: ["accessKey", "activeStateEnabled", "adaptivityEnabled", "animation", "cssClass", "dataSource", "disabled", "disabledExpr", "displayExpr", "elementAttr", "focusStateEnabled", "height", "hideSubmenuOnMouseLeave", "hint", "hoverStateEnabled", "items", "itemsExpr", "itemTemplate", "orientation", "rtlEnabled", "selectByClick", "selectedExpr", "selectedItem", "selectionMode", "showFirstSubmenuMode", "showSubmenuMode", "submenuDirection", "tabIndex", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onItemClick", "onItemContextMenu", "onItemRendered", "onOptionChanged", "onSelectionChanged", "onSubmenuHidden", "onSubmenuHiding", "onSubmenuShowing", "onSubmenuShown", "accessKeyChange", "activeStateEnabledChange", "adaptivityEnabledChange", "animationChange", "cssClassChange", "dataSourceChange", "disabledChange", "disabledExprChange", "displayExprChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hideSubmenuOnMouseLeaveChange", "hintChange", "hoverStateEnabledChange", "itemsChange", "itemsExprChange", "itemTemplateChange", "orientationChange", "rtlEnabledChange", "selectByClickChange", "selectedExprChange", "selectedItemChange", "selectionModeChange", "showFirstSubmenuModeChange", "showSubmenuModeChange", "submenuDirectionChange", "tabIndexChange", "visibleChange", "widthChange"] }, { type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }], directives: [{ type: i4__namespace.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ExportComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-toolbar-export',
+                        templateUrl: './export.component.html',
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }], menuComponent: [{
+                    type: i0.ViewChild,
+                    args: ['exportElement', { read: i0.ElementRef }]
+                }] } });
+
+    var PagerComponent = /** @class */ (function () {
+        function PagerComponent(_element, _cd) {
+            this._element = _element;
+            this._cd = _cd;
+        }
+        PagerComponent.prototype.ngAfterViewInit = function () {
+            this.dropDownOptions = Object.assign({ container: this.data.getPopupContainer(this._element.nativeElement) }, this.data.widget.dropDownOptions);
+            this._cd.detectChanges();
+        };
+        return PagerComponent;
+    }());
+    PagerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PagerComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    PagerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PagerComponent, selector: "dxv-toolbar-pager", inputs: { data: "data" }, ngImport: i0__namespace, template: "<div class=\"dxrd-preview-pager dxrd-toolbar-item\" [hidden]=\"!data.visible\">\n    <div class=\"dx-accessibility-toolbar-item dx-accessibility-focus-border-accented\" >\n        <dx-select-box class=\"dxrd-preview-pager-selectbox\"\n        [dataSource]=\"data.widget.dataSource\"\n        (onValueChanged)=\"data.widget.onValueChanged($event)\"\n        [value]=\"data.widget.value\"\n        [opened]=\"data.widget.opened\"\n        [displayExpr]=\"data.widget.displayExpr\"\n        [useItemTextAsTitle]=\"true\"\n        (onKeyUp)=\"data.widget.onKeyUp($event)\"\n        [itemTemplate]=\"data.widget.itemTemplate\"\n        [searchMode]=\"data.widget.searchMode\"\n        [searchEnabled]=\"data.widget.searchEnabled\"\n        [searchTimeout]=\"data.widget.searchTimeout\"\n        [disabled]=\"data.disabled\"\n        [dropDownOptions]=\"dropDownOptions\"\n        tabindex=\"-1\"\n        [inputAttr]=\"data.widget.inputAttr\"\n        ></dx-select-box>\n        <!-- <div class=\"\" data-bind=\"dxSelectBox: {\n            dataSource: widget.dataSource, onValueChanged: widget.onValueChanged, value: widget.value,\n            opened: widget.opened, displayExpr: widget.displayExpr, useItemTextAsTitle: true,\n            onFocusOut: widget.focusOut, onKeyUp: widget.keyUp, itemTemplate: widget.itemTemplate,\n            searchMode: widget.searchMode, searchEnabled: widget.searchEnabled,\n            searchTimeout: widget.searchTimeout, disabled: widget.disabled,\n            dropDownOptions: {\n                container: getPopupContainer($element),\n                wrapperAttr: widget.wrapperAttr,\n            },\n            tabIndex: '-1', inputAttr: widget.inputAttr }\">\n        </div> -->\n    </div>\n    <div class=\"dxrd-toolbar-item-separator dxd-toolbar-separator-color dxd-border-secondary\" [hidden]=\"!data.hasSeparator\"></div>\n</div>", components: [{ type: i1__namespace.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "customItemCreateEvent", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isDirty", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "customItemCreateEventChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isDirtyChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PagerComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-toolbar-pager',
+                        templateUrl: './pager.component.html'
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var ZoomComponent = /** @class */ (function () {
+        function ZoomComponent(_cd) {
+            this._cd = _cd;
+        }
+        ZoomComponent.prototype.ngAfterViewInit = function () {
+            this.dropDownOptions = {
+                container: this.data.getPopupContainer(this.selectBox.nativeElement),
+                position: { my: 'left top', at: 'left bottom', of: this.selectBox.nativeElement },
+                wrapperAttr: { class: 'dx-zoom-selectbox-popup-wrapper' }
+            };
+            this._cd.detectChanges();
+        };
+        return ZoomComponent;
+    }());
+    ZoomComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ZoomComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ZoomComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ZoomComponent, selector: "dxv-toolbar-zoom", inputs: { data: "data" }, viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["selectbox"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<div class=\"dxrd-toolbar-item-zoom\" [hidden]=\"!data.visible\">\n    <div class=\"dx-accessibility-toolbar-item dx-accessibility-focus-border-accented\" >\n        <dx-select-box #selectbox class=\"dxrd-toolbar-item-zoom-editor\"\n        [dataSource]=\"data.widget.dataSource\"\n        (onValueChanged)=\"data.widget.onValueChanged($event)\"\n        [value]=\"data.widget.value\"\n        [acceptCustomValue]=\"true\"\n        [displayExpr]=\"data.widget.displayExpr\"\n        [useItemTextAsTitle]=\"true\"\n        [disabled]=\"data.disabled\"\n        (onCustomItemCreating)=\"data.widget.onCustomItemCreating($event)\"\n        [width]=\"140\"\n        [dropDownOptions]=\"dropDownOptions\"\n        tabindex=\"-1\"\n        [inputAttr]=\"data.widget.inputAttr\"\n        ></dx-select-box>\n        <!-- displayCustomValue -->\n    </div>\n</div>", components: [{ type: i1__namespace.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "customItemCreateEvent", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isDirty", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "customItemCreateEventChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isDirtyChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ZoomComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-toolbar-zoom',
+                        templateUrl: './zoom.component.html'
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }], selectBox: [{
+                    type: i0.ViewChild,
+                    args: ['selectbox', { read: i0.ElementRef }]
+                }] } });
+
+    var ToolbarContentComponent = /** @class */ (function () {
+        function ToolbarContentComponent() {
+        }
+        ToolbarContentComponent.prototype.onScrollViewInitialized = function (args) {
+            args.component.option('useKeyboard', false);
+        };
+        return ToolbarContentComponent;
+    }());
+    ToolbarContentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ToolbarContentComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ToolbarContentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ToolbarContentComponent, selector: "dxv-toolbar", inputs: { data: "data" }, ngImport: i0__namespace, template: "<dx-scroll-view class=\"dxrd-toolbar-wrapper dxrdp-toolbar-scrollable dx-shadow-top dxd-back-secondary-invariant\"\n    showScrollbar=\"onHover\" direction=\"horizontal\" [useNative]=\"false\" [scrollByThumb]=\"true\"\n    (onInitialized)=\"onScrollViewInitialized($event)\">\n    <!-- <div class=\"dxrd-toolbar\" role=\"toolbar\" data-bind=\"keyDownActions: actionLists, accessibilityKeyboardHelper: $data.keyboardHelper\"> -->\n    <div class=\"dxrd-toolbar\" role=\"toolbar\" [dxMutationObserver]=\"data.keyboardHelper\">\n        <div id=\"dxrd-preview-toolbar-live-region\" class=\"dxrd-visually-hidden\" aria-live=\"polite\" aria-atomic=\"true\">\n        </div>\n        <div class=\"dx-accessibility-container-background dxd-back-accented\"></div>\n        <dxa-template template=\"dxrd-toolbar-tmplt\" [data]=\"data.actionLists.getViewModel().toolbarItems\"></dxa-template>\n    </div>\n</dx-scroll-view>", components: [{ type: i1__namespace.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"] }, { type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }], directives: [{ type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ToolbarContentComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-toolbar',
+                        templateUrl: './toolbar-content.component.html'
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var ParameterspanelComponent = /** @class */ (function () {
+        function ParameterspanelComponent() {
+        }
+        ParameterspanelComponent.prototype.onScrollViewInitialized = function (args) {
+            args.component.option('useKeyboard', false);
+        };
+        ParameterspanelComponent.prototype.reset = function (args) {
+            this.data.model.restore();
+        };
+        ParameterspanelComponent.prototype.submit = function (params) {
+            this.data.model.validateAndSubmit(params);
+        };
+        return ParameterspanelComponent;
+    }());
+    ParameterspanelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ParameterspanelComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ParameterspanelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ParameterspanelComponent, selector: "dxv-parameters", inputs: { data: "data" }, ngImport: i0__namespace, 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>", components: [{ type: i1__namespace.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"] }, { type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { type: i1__namespace.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"] }, { type: i1__namespace.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"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ParameterspanelComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-parameters',
+                        templateUrl: './parameterspanel.component.html'
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var EditorComponent = /** @class */ (function (_super) {
+        __extends(EditorComponent, _super);
+        function EditorComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return EditorComponent;
+    }(EditorComponentBase));
+    EditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EditorComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    EditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EditorComponent, selector: "dxv-editor", usesInheritance: true, ngImport: i0__namespace, template: "<div class=\"dx-editor\" [hidden]=\"!data.visible\">\n    <div class=\"dx-group\" [dxaAccordion]=\"data\">\n        <div class=\"dx-editor-header\" [class.dxrd-empty-header]=\"data.hideEditorHeader\">\n            <div *ngIf=\"!data.hideEditorHeader\" class=\"dx-field\"\n            [attr.role]=\"'treeitem'\"\n            [attr.id]=\"data.isComplexEditor && data.headerId\"\n            [attr.aria-owns]=\"data.isComplexEditor && data.contentId\"\n            [attr.aria-expanded]=\"data.isComplexEditor && (data.alwaysShow || !data.collapsed ? 'true' : 'false')\"\n            [class.dxrd-accessibility-accordion-trigger]=\"data.isComplexEditor\"\n            [class.dx-accessibility-focus-border-accented]=\"data.isComplexEditor\"\n            [class.dxrd-vertical-label]=\"data.editorOptions && data.editorOptions.hasVerticalLabel\"\n            >\n                    <div class=\"dx-field-label dxrd-group-label dx-accordion-header dxd-text-primary\"\n                    [style.padding-left]=\"data.padding['padding-left'] + 'px'\"\n                    [class.dx-accordion-empty]=\"data.templateName === 'dx-emptyHeader'\"\n                    [class.dxd-back-secondary]=\"data.isGroupLabel\"\n                    [class.dx-accordion-hide-collapsing-image]=\"data.alwaysShow\">\n                        <div *ngIf=\"data.isComplexEditor\" [attr.disabled]=\"data.templateName !== 'dx-emptyHeader'\">\n                            <dxa-template *ngIf=\"!data.alwaysShow\" \n                            template=\"dxrd-svg-collapsed\" \n                            class=\"propertygrid-editor-collapsed dx-collapsing-image\"\n                            [class.dx-image-expanded]=\"!data.collapsed\"\n                            ></dxa-template>\n                            <div *ngIf=\"!!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\" data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"></div>\n                            <div *ngIf=\"!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\">\n                                {{data.displayName}}\n                            </div>\n                        </div>\n                        <label *ngIf=\"!data.isComplexEditor && !!data.textToSearch\" \n                        class=\"propertygrid-editor-displayName\"\n                        data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"\n                        [attr.title]=\"data.displayName\"\n                        [attr.for]=\"data.editorInputId\"\n                        [class.dx-field-label-required]=\"data.isRequired\"\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\n                        ></label>\n                        <label *ngIf=\"!data.isComplexEditor && !data.textToSearch\" \n                        class=\"propertygrid-editor-displayName\"\n                        [attr.title]=\"data.displayName\"\n                        [attr.for]=\"data.editorInputId\"\n                        [class.dx-field-label-required]=\"data.isRequired\"\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\n                        >{{data.displayName}}</label>                    \n                </div>\n                <div class=\"dx-field-value\" \n                [class.dxd-border-accented]=\"data.isPropertyHighlighted\">\n                    <div data-bind=\"service: { name: 'createEditorAddOn' }\"></div>\n                    <dxa-lazy-template *ngIf=\"data.templateName !== 'dx-emptyHeader'\" [isResolved]=\"isResolved\" [template]=\"data.templateName\" [data]=\"data\"></dxa-lazy-template>\n                    <!-- ko if: templateName !== 'dx-emptyHeader' -->\n                    <!-- ko lazy: { innerBindings: { template: templateName }, isResolved: function(val) { $data.setIsRendered(val) } } -->\n                    <!-- /ko -->\n                    <!-- /ko -->\n                </div>\n            </div>\n        </div>\n        <div *ngIf=\"data.isComplexEditor\" class=\"dx-editor-content dx-accordion-content\" role=\"group\" \n            [attr.aria-labelledby]=\"data.headerId\"\n            [attr.id]=\"data.contentId\"\n            [attr.aria-hidden]=\"!data.alwaysShow && data.collapsed ? 'true' : 'false'\">\n            <dxa-template *ngIf=\"data.editorCreated\" [template]=\"data.contentTemplateName\" [data]=\"data\"></dxa-template>\n        </div>\n    </div>\n</div>", components: [{ type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { type: LazyTemplateComponent, selector: "dxa-lazy-template", inputs: ["resolver", "isResolved"] }], directives: [{ type: AccordionDirective, selector: "[dxaAccordion]", inputs: ["dxaAccordion"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EditorComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-editor',
+                        templateUrl: './editor.component.html'
+                    }]
+            }] });
+
+    var MultiValueComponent = /** @class */ (function (_super) {
+        __extends(MultiValueComponent, _super);
+        function MultiValueComponent(_cd) {
+            return _super.call(this, _cd) || this;
+        }
+        MultiValueComponent.prototype.getOptions = function () {
+            return this.data.value.getOptions({
+                dataSource: this.data.value.dataSource,
+                searchEnabled: true,
+                useItemTextAsTitle: true,
+                searchExpr: this.data.value.searchExpr || ['displayValue'],
+                value: this.data.value.value,
+                displayExpr: this.data.value.displayExpr || 'displayValue',
+                valueExpr: this.data.value.valueExpr || 'value',
+                multiline: false,
+                showSelectionControls: true,
+                selectAllMode: 'allPages',
+                inputAttr: { 'aria-label': this.data.value.displayName, id: this.data.value.editorInputId },
+                disabled: this.data.value.disabled,
+                selectAllText: this.data.value.selectAllText,
+                placeholder: this.data.value.placeholder,
+                maxDisplayedTags: this.data.value.maxDisplayedTags,
+                showMultiTagOnly: true
+            });
+        };
+        MultiValueComponent.prototype.beforeDetectChanges = function () {
+            _super.prototype.beforeDetectChanges.call(this);
+            this.dropDownOptions = {
+                container: this.container,
+                position: {
+                    boundary: this.container,
+                    collision: 'flipfit flipfit', of: this.currentElement, at: 'bottom', my: 'top'
+                }
+            };
+            this.options = this.data.value.getOptions(this.options);
+        };
+        return MultiValueComponent;
+    }(EditorDropDownComponentBase));
+    MultiValueComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MultiValueComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MultiValueComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MultiValueComponent, selector: "dxv-multivalue", usesInheritance: true, ngImport: i0__namespace, template: "<dx-tag-box #target #widget\n    [dataSource]=\"options.dataSource\"\n    [searchEnabled]=\"options.searchEnabled\"\n    [useItemTextAsTitle]=\"options.useItemTextAsTitle\"\n    [searchExpr]=\"options.searchExpr\"\n    [value]=\"options.value\"\n    [displayExpr]=\"options.displayExpr\"\n    [valueExpr]=\"options.valueExpr\"\n    [multiline]=\"options.multiline\"\n    [showSelectionControls]=\"options.showSelectionControls\"\n    (onValueChanged)=\"options.onValueChanged($event)\"\n    [inputAttr]=\"options.inputAttr\"\n    [disabled]=\"options.disabled\"\n    [selectAllText]=\"options.selectAllText\"\n    [placeholder]=\"options.placeholder\"\n    [maxDisplayedTags]=\"options.maxDisplayedTags\"\n    [showMultiTagOnly]=\"options.showMultiTagOnly\"\n    [dropDownOptions]=\"dropDownOptions\"\n    >\n    <dx-validator *ngIf=\"!!data.validationRules\" [validationRules]=\"validatorOptions.validationRules\">\n    </dx-validator>\n</dx-tag-box>\n", components: [{ type: i1__namespace.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"] }, { type: i1__namespace.DxValidatorComponent, selector: "dx-validator", inputs: ["adapter", "elementAttr", "height", "name", "validationGroup", "validationRules", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValidated", "adapterChange", "elementAttrChange", "heightChange", "nameChange", "validationGroupChange", "validationRulesChange", "widthChange"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MultiValueComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-multivalue',
+                        templateUrl: './multi-value.component.html'
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; } });
+
+    var ExportOptionsComponent = /** @class */ (function () {
+        function ExportOptionsComponent() {
+            this.headerText = _localization.getLocalization('Export Options', 'DevExpress.XtraReports.UI.XtraReport.ExportOptions');
+        }
+        ExportOptionsComponent.prototype.onScrollViewInitialized = function (args) {
+            args.component.option('useKeyboard', false);
+        };
+        return ExportOptionsComponent;
+    }());
+    ExportOptionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ExportOptionsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ExportOptionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ExportOptionsComponent, selector: "dxv-export-options", inputs: { data: "data" }, ngImport: i0__namespace, template: "<div class=\"dxrd-preview-export-options-wrapper dxrd-preview-property-wrapper\" [hidden]=\"!(data.active && data.visible)\">\n    <div class=\"dxrd-right-panel-header dxd-text-primary\">\n        <span>{{headerText}}</span>\n    </div>\n    <dx-scroll-view class=\"dxrd-right-panel-body\" \n        showScrollbar=\"onHover\"\n        [useNative]=\"false\"\n        [scrollByThumb]=\"true\"\n        (onInitialized)=\"onScrollViewInitialized($event)\">\n        <div class=\"dx-fieldset\" [dxMutationObserver]=\"data.keyboardHelper\">\n            <div class=\"dxrd-right-panel-content dxrd-export-options-content\" role=\"tree\">\n                <dxa-template template=\"dx-propertieseditor\" [data]=\"data.propertyGrid\"></dxa-template>\n            </div>\n        </div>\n    </dx-scroll-view>\n</div>", components: [{ type: i1__namespace.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"] }, { type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }], directives: [{ type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ExportOptionsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-export-options',
+                        templateUrl: './export-options.component.html',
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var ZoomDirective = /** @class */ (function () {
+        function ZoomDirective(_element) {
+            this._element = _element;
+        }
+        Object.defineProperty(ZoomDirective.prototype, "options", {
+            set: function (newVal) {
+                _updateZoomBinding.updateZoomBinding(this._element.nativeElement, newVal);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return ZoomDirective;
+    }());
+    ZoomDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ZoomDirective, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    ZoomDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: ZoomDirective, selector: "[dxaZoom]", inputs: { options: ["dxaZoom", "options"] }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ZoomDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[dxaZoom]'
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; }, propDecorators: { options: [{
+                    type: i0.Input,
+                    args: ['dxaZoom']
+                }] } });
+
+    var CheckEditingFieldComponent = /** @class */ (function () {
+        function CheckEditingFieldComponent() {
+        }
+        return CheckEditingFieldComponent;
+    }());
+    CheckEditingFieldComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CheckEditingFieldComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    CheckEditingFieldComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CheckEditingFieldComponent, selector: "dxv-editing-field-checkbox", inputs: { data: "data" }, ngImport: i0__namespace, template: "<div class=\"dxrp-editing-field-check-container dx-accessibility-editing-field-item dx-accessibility-border-accented\"\n    [style]=\"data.containerStyle\"\n    [dxaZoom]=\"data.zoom\"\n    (click)=\"data.onClick(data, $event)\">\n    <dxa-template *ngIf=\"!!data.checkStateStyleIcon\" class=\"dxrp-editing-field-check\"\n        tabindex=\"1\"\n        [style]=\"data.checkStyle\"\n        [template]=\"data.checkStateStyleIcon\"\n        [data]=\"data\">\n    </dxa-template>\n</div>", components: [{ type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }], directives: [{ type: ZoomDirective, selector: "[dxaZoom]", inputs: ["dxaZoom"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CheckEditingFieldComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-editing-field-checkbox',
+                        templateUrl: './editing-field-checkbox.component.html'
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var RadioEditingFieldComponent = /** @class */ (function () {
+        function RadioEditingFieldComponent() {
+        }
+        return RadioEditingFieldComponent;
+    }());
+    RadioEditingFieldComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RadioEditingFieldComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    RadioEditingFieldComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RadioEditingFieldComponent, selector: "dxv-editing-field-radio", inputs: { data: "data" }, ngImport: i0__namespace, template: "<div class=\"dxrp-editing-field-check-container dx-accessibility-editing-field-item dx-accessibility-border-accented\"\n    [style]=\"data.containerStyle\"\n    [dxaZoom]=\"data.zoom\"\n    (click)=\"data.onClick(data, $event)\">\n    <div class=\"dxrp-editing-field-check\" [style]=\"data.checkStyle\">\n        <svg version=\"1.0\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 760 760\" preserveAspectRatio=\"xMidYMid meet\">\n            <g fill=\"#010101\" stroke=\"none\">\n                <path d=\"M32,380a348,348 0 1,0 696,0a348,348 0 1,0 -696,0\" class=\"highlight dxrd-stroke-width-50 dxrd-stroke-rgb-0\"  />\n                <path d=\"M185,380a195,195 0 1,0 390,0a195,195 0 1,0 -390,0\" [style.fill]=\"data.checked ? 'black' : 'transparent'\" />\n            </g>\n        </svg>\n    </div>\n</div>\n", directives: [{ type: ZoomDirective, selector: "[dxaZoom]", inputs: ["dxaZoom"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RadioEditingFieldComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-editing-field-radio',
+                        templateUrl: './editing-field-radio.component.html'
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var CharacterCombEditingFieldComponent = /** @class */ (function () {
+        function CharacterCombEditingFieldComponent() {
+        }
+        return CharacterCombEditingFieldComponent;
+    }());
+    CharacterCombEditingFieldComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CharacterCombEditingFieldComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    CharacterCombEditingFieldComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CharacterCombEditingFieldComponent, selector: "dxv-editing-field-character-comb", inputs: { data: "data" }, ngImport: i0__namespace, template: "<div class=\"dxrp-editing-field-charactercomb dx-accessibility-editing-field-item dx-accessibility-border-accented\"\n    [style]=\"data.containerStyle\"\n    (click)=\"data.activateEditor(data, $event)\"\n    [dxaZoom]=\"data.zoom\"\n    [class.active]=\"data.active\"\n    [class.readOnly]=\"data.field.readOnly\">\n    <div *ngIf=\"!data.active || data.field.readOnly\">\n        <div *ngFor=\"let cell of data.cells\">\n            <div class=\"dxrp-editing-field-charactercomb-cell\" [style]=\"cell.style\">\n                {{cell.text}}\n            </div>\n        </div>\n    </div>\n    <textarea *ngIf=\"data.active && !data.field.readOnly\" class=\"dxrp-editing-field-text dxrd-background-white\"\n        [value]=\"data.field.editorValue\"\n        valueUpdate=\"keypress\"\n        [style]=\"data.textStyle\"\n        (blur)=\"data.hideEditor(true)\"\n        (keyup)=\"data.keypressAction(data, $event)\">\n    </textarea>\n</div>", directives: [{ type: ZoomDirective, selector: "[dxaZoom]", inputs: ["dxaZoom"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CharacterCombEditingFieldComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-editing-field-character-comb',
+                        templateUrl: './editing-field-character-comb.component.html'
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var TextEditingFieldComponent = /** @class */ (function () {
+        function TextEditingFieldComponent() {
+        }
+        return TextEditingFieldComponent;
+    }());
+    TextEditingFieldComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TextEditingFieldComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TextEditingFieldComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TextEditingFieldComponent, selector: "dxv-editing-field-text", inputs: { data: "data" }, ngImport: i0__namespace, template: "<textarea class=\"dxrp-editing-field-text\"\n    [value]=\"data.value\"\n    valueUpdate=\"keypress\"\n    [style]=\"data.textStyle\"\n    (blur)=\"data.hideEditor(true)\"\n    (keyup)=\"data.keypressAction(data, $event)\">\n</textarea>" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TextEditingFieldComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-editing-field-text',
+                        templateUrl: './editing-field-text.component.html'
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var ChildStyleDirective = /** @class */ (function () {
+        function ChildStyleDirective(_element) {
+            this._element = _element;
+        }
+        ChildStyleDirective.prototype.ngAfterViewInit = function () {
+            _bindings.initializeChildStyleBinding(this._element.nativeElement, this.options);
+        };
+        return ChildStyleDirective;
+    }());
+    ChildStyleDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ChildStyleDirective, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    ChildStyleDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: ChildStyleDirective, selector: "[dxvChildStyle]", inputs: { options: ["dxvChildStyle", "options"] }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ChildStyleDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[dxvChildStyle]'
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; }, propDecorators: { options: [{
+                    type: i0.Input,
+                    args: ['dxvChildStyle']
+                }] } });
+
+    var TextEditingFieldMaskComponent = /** @class */ (function () {
+        function TextEditingFieldMaskComponent() {
+        }
+        return TextEditingFieldMaskComponent;
+    }());
+    TextEditingFieldMaskComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TextEditingFieldMaskComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TextEditingFieldMaskComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TextEditingFieldMaskComponent, selector: "dxv-editing-field-mask", inputs: { data: "data" }, ngImport: i0__namespace, template: "<dx-text-box class=\"dxrp-editing-field-mask\"\n    [value]=\"data.options.value\"\n    (onValueChanged)=\"data.options.onValueChanged && data.options.onValueChanged($event)\"\n    (onFocusOut)=\"data.options.onFocusOut && data.options.onFocusOut($event)\"\n    (onInitialized)=\"data.options.onInitialized && data.options.onInitialized($event)\"\n    (onKeyUp)=\"data.options.onKeyUp && data.options.onKeyUp($event)\"\n    (onKeyDown)=\"data.options.onKeyDown && data.options.onKeyDown($event)\"\n    (onFocusIn)=\"data.options.onFocusIn && data.options.onFocusIn($event)\"\n    (onPaste)=\"data.options.onPaste && data.options.onPaste($event)\"\n    [dxvChildStyle]=\"{ style: data.textStyle, selector: '.dx-texteditor-input'}\">\n</dx-text-box>", components: [{ type: i1__namespace.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isDirty", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isDirtyChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }], directives: [{ type: ChildStyleDirective, selector: "[dxvChildStyle]", inputs: ["dxvChildStyle"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TextEditingFieldMaskComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-editing-field-mask',
+                        templateUrl: './editing-field-mask.component.html'
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var TextEditingFieldDateBoxComponent = /** @class */ (function () {
+        function TextEditingFieldDateBoxComponent(_element, _cd) {
+            this._element = _element;
+            this._cd = _cd;
+        }
+        TextEditingFieldDateBoxComponent.prototype.ngAfterViewInit = function () {
+            var element = this._element.nativeElement;
+            this.dropDownOptions = {
+                container: this.data.getPopupContainer(element),
+                position: {
+                    at: 'left bottom',
+                    collision: 'flipfit flip',
+                    my: 'left top',
+                    boundary: this.data.getPopupContainer(element), of: element
+                }
+            };
+            this._cd.detectChanges();
+        };
+        return TextEditingFieldDateBoxComponent;
+    }());
+    TextEditingFieldDateBoxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TextEditingFieldDateBoxComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TextEditingFieldDateBoxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TextEditingFieldDateBoxComponent, selector: "dxv-editing-field-datetime", inputs: { data: "data" }, ngImport: i0__namespace, template: "<dx-date-box class=\"dxrp-editing-field-datetime dxrd-width-100\"\n    [value]=\"data.options.value\"\n    [dropDownOptions]=\"dropDownOptions\"\n    (onValueChanged)=\"data.options.onValueChanged && data.options.onValueChanged($event)\"\n    (onFocusOut)=\"data.options.onFocusOut && data.options.onFocusOut($event)\"\n    (onInitialized)=\"data.options.onInitialized && data.options.onInitialized($event)\"\n    (onKeyUp)=\"data.options.onKeyUp && data.options.onKeyUp($event)\"\n    (onKeyDown)=\"data.options.onKeyDown && data.options.onKeyDown($event)\"\n    (onFocusIn)=\"data.options.onFocusIn && data.options.onFocusIn($event)\"\n    (onPaste)=\"data.options.onPaste && data.options.onPaste($event)\"\n    [dxvChildStyle]=\"{ style: data.textStyle, selector: '.dx-texteditor-input'}\">\n</dx-date-box>", components: [{ type: i1__namespace.DxDateBoxComponent, selector: "dx-date-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "adaptivityEnabled", "applyButtonText", "applyValueMode", "buttons", "calendarOptions", "cancelButtonText", "dateOutOfRangeMessage", "dateSerializationFormat", "deferRendering", "disabled", "disabledDates", "displayFormat", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "interval", "invalidDateMessage", "isDirty", "isValid", "label", "labelMode", "max", "maxLength", "min", "name", "opened", "openOnFieldClick", "pickerType", "placeholder", "readOnly", "rtlEnabled", "showAnalogClock", "showClearButton", "showDropDownButton", "spellcheck", "stylingMode", "tabIndex", "text", "todayButtonText", "type", "useMaskBehavior", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "adaptivityEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "calendarOptionsChange", "cancelButtonTextChange", "dateOutOfRangeMessageChange", "dateSerializationFormatChange", "deferRenderingChange", "disabledChange", "disabledDatesChange", "displayFormatChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "intervalChange", "invalidDateMessageChange", "isDirtyChange", "isValidChange", "labelChange", "labelModeChange", "maxChange", "maxLengthChange", "minChange", "nameChange", "openedChange", "openOnFieldClickChange", "pickerTypeChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showAnalogClockChange", "showClearButtonChange", "showDropDownButtonChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "todayButtonTextChange", "typeChange", "useMaskBehaviorChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }], directives: [{ type: ChildStyleDirective, selector: "[dxvChildStyle]", inputs: ["dxvChildStyle"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TextEditingFieldDateBoxComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-editing-field-datetime',
+                        templateUrl: './editing-field-datetime.component.html'
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var TextEditingFieldNumberComponent = /** @class */ (function () {
+        function TextEditingFieldNumberComponent() {
+        }
+        return TextEditingFieldNumberComponent;
+    }());
+    TextEditingFieldNumberComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TextEditingFieldNumberComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TextEditingFieldNumberComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TextEditingFieldNumberComponent, selector: "dxv-editing-field-number", inputs: { data: "data" }, ngImport: i0__namespace, template: "<dx-date-box class=\"dxrp-editing-field-mask\"\n    [value]=\"data.options.value\"\n    (onValueChanged)=\"data.options.onValueChanged && data.options.onValueChanged($event)\"\n    (onFocusOut)=\"data.options.onFocusOut && data.options.onFocusOut($event)\"\n    (onInitialized)=\"data.options.onInitialized && data.options.onInitialized($event)\"\n    (onKeyUp)=\"data.options.onKeyUp && data.options.onKeyUp($event)\"\n    (onKeyDown)=\"data.options.onKeyDown && data.options.onKeyDown($event)\"\n    (onFocusIn)=\"data.options.onFocusIn && data.options.onFocusIn($event)\"\n    (onPaste)=\"data.options.onPaste && data.options.onPaste($event)\"\n    [dxvChildStyle]=\"{ style: data.textStyle, selector: '.dx-texteditor-input'}\">\n</dx-date-box>", components: [{ type: i1__namespace.DxDateBoxComponent, selector: "dx-date-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "adaptivityEnabled", "applyButtonText", "applyValueMode", "buttons", "calendarOptions", "cancelButtonText", "dateOutOfRangeMessage", "dateSerializationFormat", "deferRendering", "disabled", "disabledDates", "displayFormat", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "interval", "invalidDateMessage", "isDirty", "isValid", "label", "labelMode", "max", "maxLength", "min", "name", "opened", "openOnFieldClick", "pickerType", "placeholder", "readOnly", "rtlEnabled", "showAnalogClock", "showClearButton", "showDropDownButton", "spellcheck", "stylingMode", "tabIndex", "text", "todayButtonText", "type", "useMaskBehavior", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "adaptivityEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "calendarOptionsChange", "cancelButtonTextChange", "dateOutOfRangeMessageChange", "dateSerializationFormatChange", "deferRenderingChange", "disabledChange", "disabledDatesChange", "displayFormatChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "intervalChange", "invalidDateMessageChange", "isDirtyChange", "isValidChange", "labelChange", "labelModeChange", "maxChange", "maxLengthChange", "minChange", "nameChange", "openedChange", "openOnFieldClickChange", "pickerTypeChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showAnalogClockChange", "showClearButtonChange", "showDropDownButtonChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "todayButtonTextChange", "typeChange", "useMaskBehaviorChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }], directives: [{ type: ChildStyleDirective, selector: "[dxvChildStyle]", inputs: ["dxvChildStyle"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TextEditingFieldNumberComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-editing-field-number',
+                        templateUrl: './editing-field-number.component.html'
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var TextEditingFieldContainerComponent = /** @class */ (function () {
+        function TextEditingFieldContainerComponent() {
+        }
+        return TextEditingFieldContainerComponent;
+    }());
+    TextEditingFieldContainerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TextEditingFieldContainerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TextEditingFieldContainerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TextEditingFieldContainerComponent, selector: "dxv-editing-field-container", inputs: { data: "data" }, ngImport: i0__namespace, template: "<div class=\"dxrp-editing-field-container dx-accessibility-editing-field-item dx-accessibility-border-accented\"\n    [dxaZoom]=\"data.zoom\"\n    [style]=\"data.containerStyle\"\n    [class.active]=\"data.active\"\n    [class.readOnly]=\"data.field.readOnly\">\n    <div class=\"dxrp-editing-field-borders\" [style]=\"data.borderStyle\"></div>\n    <div class=\"dxrp-editing-field-content\" (click)=\"data.activateEditor(data, $event)\">\n        <div *ngIf=\"!data.active || data.field.readOnly\">\n            <div *ngIf=\"data.field.htmlValue\">\n                <div class=\"dxrp-editing-field-readonly-text\" [style]=\"data.textStyle\" [class.dxrp-editing-field-text-wordwrap]=\"!data.wordWrap\">\n                    <div class=\"dxrp-editing-field-text-html dxrp-editing-field-text-html-complex\" [style]=\"data.breakOffsetStyle\" [innerHTML]=\"data.field.htmlValue\"></div>\n                </div>\n            </div>\n            <div *ngIf=\"!data.field.htmlValue\">\n                <div class=\"dxrp-editing-field-readonly-text\" [style]=\"data.textStyle\" [class.dxrp-editing-field-text-wordwrap]=\"!data.wordWrap\">\n                    {{data.field.editValue}}\n                </div>\n            </div>\n        </div>\n        <dxa-template *ngIf=\"data.active && !data.field.readOnly\" [template]=\"data.editorTemplate\" [data]=\"data.data\"></dxa-template>\n    </div>\n</div>", components: [{ type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }], directives: [{ type: ZoomDirective, selector: "[dxaZoom]", inputs: ["dxaZoom"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TextEditingFieldContainerComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-editing-field-container',
+                        templateUrl: './editing-field-container.component.html'
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var PictureEditorComponent = /** @class */ (function () {
+        function PictureEditorComponent(_element, _cd) {
+            this._element = _element;
+            this._cd = _cd;
+        }
+        PictureEditorComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            this.editingFieldModel = this.viewModel.getModel();
+            this.model = new _pictureEditorModel.PictureEditorModel(this.editingFieldModel, this.element.nativeElement, function () { return _this._cd.detectChanges(); });
+            this.data = this.model.getViewModel();
+            this.editingFieldModel._setPictureEditor && this.editingFieldModel._setPictureEditor(this.model);
+            var parent = this.data.getPopupContainer(this.element.nativeElement);
+            this.popupOptions = {
+                container: this.data.shadingEnabled ? '.dx-overlay-wrapper.dx-picture-edit-popup-content-fullscreen' : parent,
+                position: {
+                    my: 'left top',
+                    at: 'right top',
+                    boundary: parent,
+                    of: this.data.element,
+                    collision: 'fit fit', offset: '1 -1'
+                }
+            };
+            setTimeout(function () {
+                _this.editingFieldModel._renderedHandler && _this.editingFieldModel._renderedHandler();
+            });
+            this._cd.detectChanges();
+        };
+        PictureEditorComponent.prototype.ngOnDestroy = function () {
+            this.model.dispose();
+            this.editingFieldModel._setPictureEditor(null);
+        };
+        return PictureEditorComponent;
+    }());
+    PictureEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PictureEditorComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    PictureEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PictureEditorComponent, selector: "dxv-picture-editor", inputs: { viewModel: ["options", "viewModel"] }, viewQueries: [{ propertyName: "element", first: true, predicate: ["pictureEditing"], descendants: true }], ngImport: i0__namespace, 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>", components: [{ type: i1__namespace.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"] }, { type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }], directives: [{ type: ZoomDirective, selector: "[dxaZoom]", inputs: ["dxaZoom"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PictureEditorComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-picture-editor',
+                        templateUrl: './picture-editor.component.html'
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { element: [{
+                    type: i0.ViewChild,
+                    args: ['pictureEditing']
+                }], viewModel: [{
+                    type: i0.Input,
+                    args: ['options']
+                }] } });
+
+    var ImageEditingFieldEditorComponent = /** @class */ (function () {
+        function ImageEditingFieldEditorComponent() {
+        }
+        return ImageEditingFieldEditorComponent;
+    }());
+    ImageEditingFieldEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImageEditingFieldEditorComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ImageEditingFieldEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ImageEditingFieldEditorComponent, selector: "dxv-image-editing-field-editor", inputs: { data: "data" }, ngImport: i0__namespace, template: "<dxv-picture-editor [options]=\"data\" class=\"dxrd-height-100 dxrd-width-100\"></dxv-picture-editor>", components: [{ type: PictureEditorComponent, selector: "dxv-picture-editor", inputs: ["options"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImageEditingFieldEditorComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-image-editing-field-editor',
+                        templateUrl: './image-editing-field-editor.component.html'
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var ImageEditingFieldComponent = /** @class */ (function () {
+        function ImageEditingFieldComponent() {
+        }
+        return ImageEditingFieldComponent;
+    }());
+    ImageEditingFieldComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImageEditingFieldComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ImageEditingFieldComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ImageEditingFieldComponent, selector: "dxv-image-editing-field", inputs: { data: "data" }, ngImport: i0__namespace, template: "<div class=\"dxrp-editing-field-container dx-accessibility-editing-field-item dx-accessibility-border-accented\" [style]=\"data.containerStyle\">\n    <dxv-image-editing-field-editor [data]=\"data\"></dxv-image-editing-field-editor>\n</div>", components: [{ type: ImageEditingFieldEditorComponent, selector: "dxv-image-editing-field-editor", inputs: ["data"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImageEditingFieldComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-image-editing-field',
+                        templateUrl: './image-editing-field.component.html'
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var PainterComponent = /** @class */ (function () {
+        function PainterComponent(_element, _cd) {
+            this._element = _element;
+            this._cd = _cd;
+        }
+        PainterComponent.prototype.ngAfterViewInit = function () {
+            this.model = new _painter.Painter(this._element.nativeElement, this.options);
+            this.options.setPainter(this.model);
+            this._cd.detectChanges();
+        };
+        PainterComponent.prototype.ngOnDestroy = function () {
+            this.model.dispose();
+            this.options.setPainter(null);
+        };
+        return PainterComponent;
+    }());
+    PainterComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PainterComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    PainterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PainterComponent, selector: "dxv-painter", inputs: { options: "options" }, ngImport: i0__namespace, template: "<div class=\"dx-painter\">\n    <canvas [dxaZoom]=\"model?.scale\"></canvas>\n</div>", directives: [{ type: ZoomDirective, selector: "[dxaZoom]", inputs: ["dxaZoom"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PainterComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-painter',
+                        templateUrl: './painter.component.html'
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { options: [{
+                    type: i0.Input,
+                    args: ['options']
+                }] } });
+
+    var PopupImageEditingFieldComponent = /** @class */ (function () {
+        function PopupImageEditingFieldComponent(_element, _cd) {
+            this._element = _element;
+            this._cd = _cd;
+        }
+        PopupImageEditingFieldComponent.prototype.ngAfterViewInit = function () {
+            var element = this._element.nativeElement;
+            var container = this.data.popupData.getPopupContainer(element);
+            this.popupOptions = {
+                position: {
+                    boundary: container,
+                    of: this.popupContainer.nativeElement,
+                    collision: 'flipfit flipfit'
+                },
+                container: container
+            };
+            this._cd.detectChanges();
+        };
+        return PopupImageEditingFieldComponent;
+    }());
+    PopupImageEditingFieldComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PopupImageEditingFieldComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    PopupImageEditingFieldComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PopupImageEditingFieldComponent, selector: "dxv-popup-image-editing-field", inputs: { data: "data" }, viewQueries: [{ propertyName: "popupContainer", first: true, predicate: ["popupContainer"], descendants: true }], ngImport: i0__namespace, 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>", components: [{ type: PainterComponent, selector: "dxv-painter", inputs: ["options"] }, { type: i1__namespace.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"] }, { type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PopupImageEditingFieldComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-popup-image-editing-field',
+                        templateUrl: './popup-image-editing-field.component.html'
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }], popupContainer: [{
+                    type: i0.ViewChild,
+                    args: ['popupContainer']
+                }] } });
+
+    var PictureEditorToolBarPopupComponent = /** @class */ (function () {
+        function PictureEditorToolBarPopupComponent(_element, _cd) {
+            this._element = _element;
+            this._cd = _cd;
+        }
+        PictureEditorToolBarPopupComponent.prototype.ngAfterViewInit = function () {
+            var target = this.data.getPositionTarget();
+            this.popupOptions = {
+                container: target,
+                position: {
+                    my: 'left top',
+                    at: 'right top',
+                    boundary: _utils$1.getParentContainer(this._element.nativeElement),
+                    of: target,
+                    collision: 'flipfit fit',
+                    offset: '-10 0'
+                },
+            };
+            this._cd.detectChanges();
+        };
+        return PictureEditorToolBarPopupComponent;
+    }());
+    PictureEditorToolBarPopupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PictureEditorToolBarPopupComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    PictureEditorToolBarPopupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PictureEditorToolBarPopupComponent, selector: "dxv-picture-editor-toolbar-popup", inputs: { data: "data" }, ngImport: i0__namespace, 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>", components: [{ type: i1__namespace.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"] }, { type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PictureEditorToolBarPopupComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-picture-editor-toolbar-popup',
+                        templateUrl: './picture-editor-toolbar-popup.component.html'
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var PictureEditorBrushOptionsComponent = /** @class */ (function () {
+        function PictureEditorBrushOptionsComponent() {
+        }
+        return PictureEditorBrushOptionsComponent;
+    }());
+    PictureEditorBrushOptionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PictureEditorBrushOptionsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    PictureEditorBrushOptionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PictureEditorBrushOptionsComponent, selector: "dxv-picture-editing-brush-options", inputs: { data: "data" }, ngImport: i0__namespace, 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>", components: [{ type: i1__namespace.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"] }], directives: [{ type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PictureEditorBrushOptionsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-picture-editing-brush-options',
+                        templateUrl: './picture-editing-brush-options.component.html'
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var PictureEditorSizeOptionsComponent = /** @class */ (function () {
+        function PictureEditorSizeOptionsComponent() {
+        }
+        return PictureEditorSizeOptionsComponent;
+    }());
+    PictureEditorSizeOptionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PictureEditorSizeOptionsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    PictureEditorSizeOptionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PictureEditorSizeOptionsComponent, selector: "dxv-picture-editing-size-options", inputs: { data: "data" }, ngImport: i0__namespace, template: "<div class=\"dx-picture-editing-sizemode-alignment\">\n    <div class=\"dx-picture-editing-sizemode\">\n        <div class=\"dx-picture-editing-text\">{{data.sizeModeText}}</div>\n        <div class=\"dx-picture-editing-sizemode-values\">\n            <dxa-template class=\"dx-picture-editing-sizemode-alignment-value\" *ngFor=\"let sizeModeValue of data.sizeModeValues\"\n                [class.selected]=\"sizeModeValue.isSelected\"\n                [template]=\"sizeModeValue.iconTemplate\"\n                [attr.title]=\"sizeModeValue.attrTitle\"\n                (click)=\"sizeModeValue.action()\">\n            </dxa-template>\n        </div>\n    </div>\n    <div class=\"dx-picture-editing-alignment\">\n        <div class=\"dx-picture-editing-text\">{{data.alignmentText}}</div>\n        <div class=\"dx-picture-editing-alignment-values\">\n            <dxa-template class=\"dx-picture-editing-sizemode-alignment-value\" *ngFor=\"let alignmentValue of data.alignmentValues\"\n                [class.selected]=\"alignmentValue.isSelected\"\n                [template]=\"alignmentValue.iconTemplate\"\n                [attr.title]=\"alignmentValue.attrTitle\"\n                (click)=\"alignmentValue.action()\">\n            </dxa-template>\n        </div>\n    </div>\n</div>", components: [{ type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }], directives: [{ type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PictureEditorSizeOptionsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-picture-editing-size-options',
+                        templateUrl: './picture-editing-size-options.component.html'
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var SearchHighlightingDirective = /** @class */ (function () {
+        function SearchHighlightingDirective(_element) {
+            this._element = _element;
+        }
+        Object.defineProperty(SearchHighlightingDirective.prototype, "text", {
+            set: function (newVal) {
+                this._text = newVal;
+                this.updateModel();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SearchHighlightingDirective.prototype, "textToSearch", {
+            set: function (newVal) {
+                this._textToSearch = newVal;
+                this.updateModel();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SearchHighlightingDirective.prototype.updateModel = function () {
+            var options = {
+                text: this._text,
+                textToSearch: this._textToSearch
+            };
+            if (!this.model) {
+                this.model = new _searchHighlighting.HighlightEngine(options);
+            }
+            else {
+                this.model.update(options);
+            }
+            this._element.nativeElement.innerHTML = this.model.content;
+        };
+        SearchHighlightingDirective.prototype.ngOnDestroy = function () {
+            var _a;
+            (_a = this.model) === null || _a === void 0 ? void 0 : _a.dispose();
+        };
+        return SearchHighlightingDirective;
+    }());
+    SearchHighlightingDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SearchHighlightingDirective, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    SearchHighlightingDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: SearchHighlightingDirective, selector: "[dxaSearchHighlighting]", inputs: { text: "text", textToSearch: "textToSearch" }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SearchHighlightingDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[dxaSearchHighlighting]'
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; }, propDecorators: { text: [{
+                    type: i0.Input,
+                    args: ['text']
+                }], textToSearch: [{
+                    type: i0.Input,
+                    args: ['textToSearch']
+                }] } });
+
+    var PictureEditorImagespickerComponent = /** @class */ (function () {
+        function PictureEditorImagespickerComponent() {
+        }
+        return PictureEditorImagespickerComponent;
+    }());
+    PictureEditorImagespickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PictureEditorImagespickerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    PictureEditorImagespickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PictureEditorImagespickerComponent, selector: "dxv-picture-editing-imagespicker", inputs: { data: "data" }, ngImport: i0__namespace, template: "<dx-scroll-view class=\"dx-picture-editing-imagescontainer dxd-text-primary\"\n    [style.width]=\"data.contentWidth + 'px'\"\n    showScrollbar=\"onHover\"\n    [useNative]=\"false\"\n    [scrollByThumb]=\"true\">\n\n    <div class=\"dx-picture-editing-block dxd-state-normal dxd-back-highlighted\" *ngFor=\"let image of data.images\"\n        [style.width]=\"(image.width + 10) + 'px'\"\n        [hidden]=\"!image.visible\"\n        (click)=\"image.action()\">\n    \n        <div *ngIf=\"image.visible\">\n            <div class=\"dx-picture-editing-block-image\"\n                [style.width]=\"image.width + 'px'\"\n                [style.height]=\"image.height + 'px'\"\n                [style.backgroundImage]=\"'url(' + (image.url || image.data) + ')'\">\n            </div>\n            <div *ngIf=\"!!image.text\">\n                <div class=\"dx-picture-editing-block-text\" *ngIf=\"image.filterEnabled\" [attr.title]=\"image.text\" dxaSearchHighlighting [text]=\"image.text\" [textToSearch]=\"image.filter\"></div>\n                <div class=\"dx-picture-editing-block-text\" *ngIf=\"!image.filterEnabled\" [attr.title]=\"image.text\">{{image.text}}</div>\n            </div>\n        </div>\n\n    </div>\n</dx-scroll-view>", components: [{ type: i1__namespace.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"] }], directives: [{ type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SearchHighlightingDirective, selector: "[dxaSearchHighlighting]", inputs: ["text", "textToSearch"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PictureEditorImagespickerComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-picture-editing-imagespicker',
+                        templateUrl: './picture-editing-imagespicker.component.html'
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var PictureEditorImagespickerWithFilterComponent = /** @class */ (function (_super) {
+        __extends(PictureEditorImagespickerWithFilterComponent, _super);
+        function PictureEditorImagespickerWithFilterComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return PictureEditorImagespickerWithFilterComponent;
+    }(PictureEditorImagespickerComponent));
+    PictureEditorImagespickerWithFilterComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PictureEditorImagespickerWithFilterComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    PictureEditorImagespickerWithFilterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PictureEditorImagespickerWithFilterComponent, selector: "dxv-picture-editing-imagespickerwithfilter", usesInheritance: true, ngImport: i0__namespace, template: "<div class=\"dx-picture-editing-filtercontent\" [style.width]=\"data.contentWidth + 'px'\">\n    <dx-text-box class=\"dx-picture-editing-filtercontent-editor\"\n        [value]=\"data.filter\"\n        valueChangeEvent=\"keyup\"\n        (onValueChanged)=\"data.onFilterChanged($event)\"\n        [placeholder]=\"data.searchPlaceholder\"\n        [showClearButton]=\"true\">\n    </dx-text-box>\n    <div class=\"dx-picture-editing-filtercontent-images\">\n        <dxv-picture-editing-imagespicker [data]=\"data\"></dxv-picture-editing-imagespicker>\n    </div>\n</div>", components: [{ type: i1__namespace.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isDirty", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isDirtyChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { type: PictureEditorImagespickerComponent, selector: "dxv-picture-editing-imagespicker", inputs: ["data"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PictureEditorImagespickerWithFilterComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-picture-editing-imagespickerwithfilter',
+                        templateUrl: './picture-editing-imagespickerwithfilter.component.html'
+                    }]
+            }] });
+
+    var TreeListGroupComponent = /** @class */ (function () {
+        function TreeListGroupComponent() {
+        }
+        return TreeListGroupComponent;
+    }());
+    TreeListGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TreeListGroupComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TreeListGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TreeListGroupComponent, selector: "dxa-treelist-group", inputs: { data: "data" }, ngImport: i0__namespace, template: "<div role=\"group\" class=\"dx-treelist dxd-text-primary\">\n    <div *ngFor=\"let item of data.items\">\n        <dxa-template [template]=\"item.templateName\" [data]=\"item\"></dxa-template>\n        <dxa-treelist-group *ngIf=\"!item.collapsed\" template=\"dx-treelist\" [data]=\"item\"></dxa-treelist-group>\n    </div>\n</div>", components: [{ type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { type: TreeListGroupComponent, selector: "dxa-treelist-group", inputs: ["data"] }], directives: [{ type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TreeListGroupComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxa-treelist-group',
+                        templateUrl: './treelist-group.component.html',
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var TreelistComponent = /** @class */ (function () {
+        function TreelistComponent(_element) {
+            var _this = this;
+            this._element = _element;
+            this._updateTreeList = function () {
+                _this._disposeCallback && _this._disposeCallback();
+                _this._disposeCallback = _binding.initTreeListBinding({
+                    values: _this._options,
+                    element: _this._element.nativeElement,
+                    createChildContext: function (viewModel) {
+                        _this.viewModel = viewModel;
+                    }
+                });
+            };
+        }
+        Object.defineProperty(TreelistComponent.prototype, "options", {
+            set: function (newVal) {
+                this._options = newVal;
+                if (this.treeList)
+                    this._updateTreeList();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TreelistComponent.prototype.ngAfterViewInit = function () {
+            this._updateTreeList();
+        };
+        TreelistComponent.prototype.ngOnDestroy = function () {
+            this._disposeCallback && this._disposeCallback();
+        };
+        return TreelistComponent;
+    }());
+    TreelistComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TreelistComponent, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TreelistComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TreelistComponent, selector: "dxa-treelist", inputs: { options: "options" }, viewQueries: [{ propertyName: "treeList", first: true, predicate: ["treelist"], descendants: true }], ngImport: i0__namespace, template: "<dxa-treelist-group #treelist *ngIf=\"!!viewModel\" template=\"dx-treelist\" [data]=\"viewModel\"></dxa-treelist-group>", components: [{ type: TreeListGroupComponent, selector: "dxa-treelist-group", inputs: ["data"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TreelistComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxa-treelist',
+                        templateUrl: './treelist.component.html'
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; }, propDecorators: { options: [{
+                    type: i0.Input,
+                    args: ['options']
+                }], treeList: [{
+                    type: i0.ViewChild,
+                    args: ['treelist']
+                }] } });
+
+    var DocumentMapComponent = /** @class */ (function () {
+        function DocumentMapComponent() {
+            this.headerText = _localization.getLocalization('Document Map', 'ASPxReportsStringId.DocumentViewer_RibbonCommandText_DocumentMap');
+        }
+        DocumentMapComponent.prototype.ngOnInit = function () {
+            var _a;
+            this.viewModel = (_a = this.data.model) === null || _a === void 0 ? void 0 : _a.getViewModel();
+        };
+        return DocumentMapComponent;
+    }());
+    DocumentMapComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DocumentMapComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    DocumentMapComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DocumentMapComponent, selector: "dxv-document-map", inputs: { data: "data" }, ngImport: i0__namespace, template: "<div class=\"dxrd-preview-document-map dxrd-height-100 dxrd-overflow-hidden\" [hidden]=\"!(data.active && data.visible)\" >\n    <div class=\"dxrd-right-panel-header dxd-text-primary\">\n        <div class=\"dxrd-display-inline-block\">\n            {{headerText}}\n        </div>\n    </div>\n    <div *ngIf=\"!!viewModel\">\n        <dx-scroll-view class=\"dxrd-right-panel-body\"\n            [showScrollbar]=\"'onHover'\"\n            [useNative]=\"false\"\n            [scrollByThumb]=\"true\"\n            (onInitialized)=\"viewModel.onInitialized($event)\"\n            [dxMutationObserver]=\"data.keyboardHelper\"\n        >\n            <dxa-treelist role=\"tree\" id=\"documentMapTree\" class=\"dxrd-width-100 dxrd-height-100\"\n                [options]=\"viewModel.treeListOptions\"\n            ></dxa-treelist>\n        </dx-scroll-view>\n    </div>\n</div>", components: [{ type: i1__namespace.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"] }, { type: TreelistComponent, selector: "dxa-treelist", inputs: ["options"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DocumentMapComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-document-map',
+                        templateUrl: './document-map.component.html',
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var MultiValueEditableComponent = /** @class */ (function (_super) {
+        __extends(MultiValueEditableComponent, _super);
+        function MultiValueEditableComponent(_cd) {
+            return _super.call(this, _cd) || this;
+        }
+        MultiValueEditableComponent.prototype.getEditorOptions = function () {
+            var _this = this;
+            var editor = this.data.getModel();
+            var getOptionsInfoProperty = function (propertyName) { return !propertyName ? _this.data.info
+                : _this.data.info && _this.data.info[propertyName]; };
+            var addHandler = function () { return (getOptionsInfoProperty('addHandler')).call(_this); };
+            return {
+                data: {
+                    values: __spreadArray([], __read(editor.value)),
+                    addHandler: function () {
+                        return addHandler();
+                    },
+                    onValueChanged: function (array, args) {
+                        editor._set('value', __spreadArray([], __read(array)));
+                    },
+                    info: this.data.info,
+                    level: this.data.level, displayName: _localization.getLocalization(this.data.displayName)
+                }
+            };
+        };
+        MultiValueEditableComponent.prototype.ngAfterViewInit = function () {
+            this.options.contentTemplate = this.properties;
+            this._cd.detectChanges();
+        };
+        return MultiValueEditableComponent;
+    }(EditorComponentBase));
+    MultiValueEditableComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MultiValueEditableComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MultiValueEditableComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MultiValueEditableComponent, selector: "dxv-multivalue-editable", viewQueries: [{ propertyName: "properties", first: true, predicate: ["properties"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<div *ngIf=\"data.value\" class=\"dxrd-editor\" [hidden]=\"!data.visible\">\n    <dxa-collectioneditor [data]=\"options.data\" [contentTemplate]=\"options.contentTemplate\"></dxa-collectioneditor>\n    <!-- <dxa-template [data]=\"options\" template=\"dx-collectioneditor\"></dxa-template> -->\n</div>\n\n<ng-template #properties let-data=\"data\">\n    <dxa-template [data]=\"data.getProperties()\" template=\"dx-propertieseditor\"></dxa-template>\n</ng-template>", components: [{ type: CollectionEditorComponent, selector: "dxa-collectioneditor", inputs: ["data", "contentTemplate"] }, { type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MultiValueEditableComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-multivalue-editable',
+                        templateUrl: './multi-value.editable.component.html'
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { properties: [{
+                    type: i0.ViewChild,
+                    args: ['properties']
+                }] } });
+
+    var SignatureEditorComponent = /** @class */ (function (_super) {
+        __extends(SignatureEditorComponent, _super);
+        function SignatureEditorComponent(_cd) {
+            return _super.call(this, _cd) || this;
+        }
+        SignatureEditorComponent.prototype.getOptions = function () {
+            var _this = this;
+            return this.data.getOptions({
+                dataSource: this.data.values,
+                onValueChanged: function (event) { return _this.data.onValueChanged(event); },
+                itemTemplate: 'item',
+                displayExpr: 'displayName',
+                valueExpr: 'key',
+                showClearButton: true,
+                noDataText: _localization.noDataText(),
+                encodeNoDataText: true,
+                inputAttr: { 'aria-label': this.data.displayName, id: this.data.editorInputId }
+            });
+        };
+        SignatureEditorComponent.prototype.beforeDetectChanges = function () {
+            _super.prototype.beforeDetectChanges.call(this);
+            this.dropDownOptions = {
+                minWidth: '300px',
+                container: this.container
+            };
+            this.options = this.data.getOptions(this.options);
+        };
+        return SignatureEditorComponent;
+    }(EditorDropDownComponentBase));
+    SignatureEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SignatureEditorComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SignatureEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SignatureEditorComponent, selector: "dxv-signature-editor", usesInheritance: true, ngImport: i0__namespace, template: "<dx-select-box #target #widget\n    [dataSource]=\"options.dataSource\"\n    (onValueChanged)=\"options.onValueChanged($event)\"\n    [itemTemplate]=\"options.itemTemplate\"\n    [displayExpr]=\"options.displayExpr\"\n    [valueExpr]=\"options.valueExpr\"\n    [showClearButton]=\"options.showClearButton\"\n    [noDataText]=\"options.noDataText\"\n    [dropDownOptions]=\"dropDownOptions\">\n    <dx-validator *ngIf=\"!!data.validationRules\" [validationRules]=\"validatorOptions.validationRules\">\n    </dx-validator>\n    <div class=\"dxrdv-signature-editor-item\" *dxTemplate=\"let signature of 'item'\">\n        <div class=\"dxrdv-signature-editor-item-image\">\n            <img *ngIf=\"!!signature.image\" [attr.src]=\"signature.image\" />\n            <dxa-template *ngIf=\"!signature.image\" template=\"dxrd-svg-preview-signature_img_placeholder\"></dxa-template>\n        </div>\n        <div class=\"dxrdv-signature-editor-item-info\">\n            <div *ngFor=\"let field of signature.fields\" class=\"dxrdv-signature-editor-item-info-field\" [attr.title]=\"field.value\">\n                <span class=\"dxrdv-signature-editor-item-info-field-label\">{{field.label}}</span>\n                <span>{{field.value}}</span>\n            </div>\n        </div>\n    </div>\n</dx-select-box>\n", components: [{ type: i1__namespace.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "customItemCreateEvent", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isDirty", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "customItemCreateEventChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isDirtyChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { type: i1__namespace.DxValidatorComponent, selector: "dx-validator", inputs: ["adapter", "elementAttr", "height", "name", "validationGroup", "validationRules", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValidated", "adapterChange", "elementAttrChange", "heightChange", "nameChange", "validationGroupChange", "validationRulesChange", "widthChange"] }, { type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SignatureEditorComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-signature-editor',
+                        templateUrl: './signature-editor.component.html'
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; } });
+
+    var DateRangeComponent = /** @class */ (function () {
+        function DateRangeComponent(_currentElement) {
+            this._currentElement = _currentElement;
+        }
+        DateRangeComponent.prototype.ngOnDestroy = function () {
+            this._editor.dispose();
+        };
+        DateRangeComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this._editor = new dateRangeEditor.DateRangeEditor(this.options, this._currentElement.nativeElement);
+            this.data = this._editor.getViewModel();
+            this.data.cacheElement(this._currentElement.nativeElement);
+            this.showPopupOptions = {
+                disabled: false,
+                onClick: function (e) {
+                    _this.data.showPopup();
+                },
+                template: _generateIconTemplate.generateIconTemplate('dx-ellipsis-image'),
+                icon: 'dxrd-svg-ellipsis'
+            };
+        };
+        return DateRangeComponent;
+    }());
+    DateRangeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DateRangeComponent, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    DateRangeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DateRangeComponent, selector: "dxv-date-range", inputs: { options: ["data", "options"] }, ngImport: i0__namespace, template: "<div class=\"dxrv-daterange-editor\">\n    <dx-text-box \n        [value]=\"data.displayValue\"\n        (onClick)=\"data.showPopup()\"\n        [readOnly]=\"true\"\n        >\n        <dxi-button\n          name=\"showPopup\"\n          location=\"after\"\n          [options]=\"showPopupOptions\"\n        ></dxi-button>\n    </dx-text-box>\n    <dxa-template [template]=\"data.popupTemplate\" [data]=\"data.popupModel\"></dxa-template>\n</div>", components: [{ type: i1__namespace.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isDirty", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isDirtyChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { type: i2__namespace$1.DxiButtonComponent, selector: "dxi-button", inputs: ["location", "name", "options", "cssClass", "disabled", "hint", "icon", "onClick", "template", "text", "visible"] }, { type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DateRangeComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-date-range',
+                        templateUrl: './date-range.component.html'
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; }, propDecorators: { options: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var PopupContainerComponent = /** @class */ (function () {
+        function PopupContainerComponent() {
+        }
+        PopupContainerComponent.prototype.ngOnInit = function () {
+            this.popupOptions = this.data.getPopupSettings();
+            this.popupOptions.height = _internal.calculateWithZoomFactor(362);
+        };
+        return PopupContainerComponent;
+    }());
+    PopupContainerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PopupContainerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    PopupContainerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PopupContainerComponent, selector: "dxv-daterange-popup", inputs: { data: "data" }, ngImport: i0__namespace, 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            >\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>", components: [{ type: i1__namespace.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"] }, { type: i1__namespace.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"] }, { type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }], directives: [{ type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DxActionDirective, selector: "[dxAction]", inputs: ["dxActionModel", "dxAction"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PopupContainerComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-daterange-popup',
+                        templateUrl: './popup-container.component.html'
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var CalendarComponent = /** @class */ (function () {
+        function CalendarComponent() {
+        }
+        CalendarComponent.prototype.onValueChanged = function (event) {
+            this.data.onValueChanged(event);
+        };
+        return CalendarComponent;
+    }());
+    CalendarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CalendarComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    CalendarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CalendarComponent, selector: "dxv-daterange-calendar", inputs: { data: "data" }, ngImport: i0__namespace, template: "<dx-calendar [tabIndex]=\"0\" class=\"dx-accessibility-calendar-item dx-accessibility-daterange-item\"\n    [value]=\"data.value\"\n    cellTemplate=\"select_cell\" \n    [height]=\"data.height\"\n    [min]=\"data.min\"\n    (onValueChanged)=\"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>", components: [{ type: i1__namespace.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"] }], directives: [{ type: i4__namespace.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CalendarComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-daterange-calendar',
+                        templateUrl: './calendar.component.html'
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var AutoFitDirective = /** @class */ (function (_super) {
+        __extends(AutoFitDirective, _super);
+        function AutoFitDirective() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        AutoFitDirective.prototype.InitAndReturnDisposeFunc = function (element) {
+            return _bindings.initializeAutoFitBinding(element, this.options);
+        };
+        return AutoFitDirective;
+    }(BaseDisposableDirective));
+    AutoFitDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AutoFitDirective, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
+    AutoFitDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: AutoFitDirective, selector: "[dxvAutoFit]", inputs: { options: ["dxvAutoFit", "options"] }, usesInheritance: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AutoFitDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[dxvAutoFit]'
+                    }]
+            }], propDecorators: { options: [{
+                    type: i0.Input,
+                    args: ['dxvAutoFit']
+                }] } });
+
+    var LazyImagesDirective = /** @class */ (function (_super) {
+        __extends(LazyImagesDirective, _super);
+        function LazyImagesDirective() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        LazyImagesDirective.prototype.InitAndReturnDisposeFunc = function (element) {
+            return _bindings.initializeLazyImagesBinding(element, this.options);
+        };
+        return LazyImagesDirective;
+    }(BaseDisposableDirective));
+    LazyImagesDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LazyImagesDirective, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
+    LazyImagesDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: LazyImagesDirective, selector: "[dxvLazyImages]", inputs: { options: ["dxvLazyImages", "options"] }, usesInheritance: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LazyImagesDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[dxvLazyImages]'
+                    }]
+            }], propDecorators: { options: [{
+                    type: i0.Input,
+                    args: ['dxvLazyImages']
+                }] } });
+
+    var ToViewDirective = /** @class */ (function (_super) {
+        __extends(ToViewDirective, _super);
+        function ToViewDirective() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        ToViewDirective.prototype.InitAndReturnDisposeFunc = function (element) {
+            return _bindings.initializeToViewBinding(element, this.options);
+        };
+        return ToViewDirective;
+    }(BaseDisposableDirective));
+    ToViewDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ToViewDirective, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
+    ToViewDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: ToViewDirective, selector: "[dxvToView]", inputs: { options: ["dxvToView", "options"] }, usesInheritance: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ToViewDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[dxvToView]'
+                    }]
+            }], propDecorators: { options: [{
+                    type: i0.Input,
+                    args: ['dxvToView']
+                }] } });
+
+    var SurfaceComponent = /** @class */ (function () {
+        function SurfaceComponent() {
+            this.clipboardMessage = localization_utils.getLocalization('Clipboard', 'ASPxReportsStringId.WebDocumentViewer_AriaClipboard');
+        }
+        return SurfaceComponent;
+    }());
+    SurfaceComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurfaceComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SurfaceComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurfaceComponent, selector: "dxv-surface", inputs: { data: "data" }, ngImport: i0__namespace, template: "<div class=\"dxrd-preview-wrapper\" data-bind=\"textCopier\"\n[class.dx-rtl]=\"!!data.rtlReport\"\n[class.dxrp-editing-fields-hightlighted]=\"data.editingFieldsHighlighted\">\n    <dxa-template template=\"dxrd-preview-progress-bar\" [data]=\"data.progressBar\"></dxa-template>\n    <div class=\"dxrd-preview-surface\" [dxMutationObserver]=\"data.previewBrickKeyboardHelper\">\n        <div *ngIf=\"!data.showMultipagePreview\" class=\"dxrd-report-preview-holder\" role=\"list\">\n            <div *ngIf=\"!!data.currentPage && (data.currentPage.pageLoading || (!data.currentPage.pageLoading && data.currentPage.displayImageSrc))\" \n            role=\"listitem\" \n            class=\"dxrd-report-preview dx-accessibility-page-item dx-accessibility-border-accented\" \n            [dxvAutoFit]=\"data.currentPage.autoFitOptions\"\n            [style.width]=\"data.currentPage.width + 'px'\"\n            [style.height]=\"data.currentPage.height  + 'px'\">\n                <dxa-template template=\"dxrd-preview-page\" [data]=\"data.currentPage\"></dxa-template>\n            </div>\n        </div>\n        <div *ngIf=\"data.showMultipagePreview && !!data.currentPage\"  class=\"dxrd-report-preview-holder\" role=\"list\" [dxvLazyImages]=\"data.lazyImagesOptions\">\n            <!-- ko foreach: {data: pages, afterRender: function() { delayedInit() } }  -->\n            <!-- ko lazy: { if: pageLoading || (!pageLoading && displayImageSrc) } -->\n            <ng-container *ngFor=\"let page of data.pages\">\n                <div *ngIf=\"page.pageLoading || (!page.pageLoading && page.displayImageSrc)\" role=\"listitem\" class=\"dxrd-report-preview dxrd-report-preview-multipage dx-accessibility-page-item dx-accessibility-border-accented\" \n                [style.width]=\"page.width + 'px'\"\n                [style.height]=\"page.height + 'px'\"\n                [class.dxrd-report-preview-active]=\"page.active\"\n                [dxvToView]=\"page\">\n                    <dxa-template template=\"dxrd-preview-page\" [data]=\"page\"></dxa-template>\n                </div>\n            </ng-container>\n            <!-- /ko -->\n            <!-- /ko -->\n        </div>\n        <div [class.dxrd-visually-hidden]=\"!!data.currentPage\" class=\"dxrd-report-preview-placeholder\">\n            <div aria-live=\"assertive\" aria-atomic=\"true\" class=\"dxd-empty-area-placeholder-text-color dxd-text-info\">\n                {{data.emptyDocumentCaption}}\n            </div>\n        </div>\n    </div>\n</div>\n<div id=\"dxrd-preview-bricks-live-region\" class=\"dxrd-visually-hidden\" aria-live=\"polite\" aria-atomic=\"true\"></div>\n<div id=\"clipboard-container\" class=\"dxrd-position-absolute dxrd-top--100px\">\n    <textarea disabled \n    [attr.aria-label]=\"clipboardMessage\"\n    id=\"clipboard\"></textarea>\n</div>", components: [{ type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }], directives: [{ type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: AutoFitDirective, selector: "[dxvAutoFit]", inputs: ["dxvAutoFit"] }, { type: LazyImagesDirective, selector: "[dxvLazyImages]", inputs: ["dxvLazyImages"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ToViewDirective, selector: "[dxvToView]", inputs: ["dxvToView"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SurfaceComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-surface',
+                        templateUrl: './surface.component.html'
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var BrickSelectionDirective = /** @class */ (function (_super) {
+        __extends(BrickSelectionDirective, _super);
+        function BrickSelectionDirective() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.eventName = null;
+            return _this;
+        }
+        Object.defineProperty(BrickSelectionDirective.prototype, "brickSelection", {
+            set: function (newVal) {
+                this.options = newVal;
+                this._disposeFunc();
+                this._disposeFunc = _previewSelection.initializeBrickSelectionProg(this.element, this.options);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        BrickSelectionDirective.prototype.InitAndReturnDisposeFunc = function (element) { return void 0; };
+        return BrickSelectionDirective;
+    }(BaseDisposableDirective));
+    BrickSelectionDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BrickSelectionDirective, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
+    BrickSelectionDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: BrickSelectionDirective, selector: "[dxvBrickSelection]", inputs: { brickSelection: ["dxvBrickSelection", "brickSelection"] }, usesInheritance: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BrickSelectionDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[dxvBrickSelection]'
+                    }]
+            }], propDecorators: { brickSelection: [{
+                    type: i0.Input,
+                    args: ['dxvBrickSelection']
+                }] } });
+
+    var PageComponent = /** @class */ (function () {
+        function PageComponent() {
+        }
+        return PageComponent;
+    }());
+    PageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PageComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    PageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PageComponent, selector: "dxv-page", inputs: { data: "data" }, ngImport: i0__namespace, template: "<div role=\"img\" class=\"dxrd-report-preview-content dxrd-position-relative dxrd-width-100 dxrd-height-100\" \n    [attr.aria-label]=\"data.currentPageAriaLabelImgAlt()\"\n    (click)=\"data.clickToBrick(data, $event)\"\n    [dxvBrickSelection]=\"data.brickSelectionProg\">\n    <div class=\"dxrd-report-preview-content-loading-wrapper dxrd-background-white\" \n        [style.width]=\"data.width + 2 + 'px'\"\n        [style.height]=\"data.height + 2 + 'px'\"\n        [hidden]=\"!data.pageLoading\">\n        <div class=\"dxrd-report-preview-content-loading-panel dxrd-text-align-center\" \n            [style.padding-top]=\"data.height / 2.3 + 'px'\">\n            <div class=\"dxrd-report-preview-content-loading-panel-text\">{{data.loadingText}}</div>\n        </div>\n    </div>\n    <div>\n        <img class=\"dxrd-pointer-events-none dxrd-width-100 dxrd-height-100\"\n            [attr.src]=\"data.displayImageSrc\"\n            [attr.alt]=\"data.currentPageAriaLabelImgAlt()\" />\n        <dxa-template *ngFor=\"let brick of data.activeBricks\" template=\"dxrd-page-brick-mobile\" [data]=\"brick\">\n        </dxa-template>\n        <dxa-template *ngFor=\"let brick of data.clickableBricks\" template=\"dxrd-page-brick-clickable\" [data]=\"brick\">\n        </dxa-template>\n        <div *ngIf=\"!data.brickLoading && data.editingFields\" [dxMutationObserver]=\"data.editingFieldsKeyboardHelper\">\n            <dxa-template *ngFor=\"let editingField of data.editingFields\" [template]=\"editingField.template\" [data]=\"editingField\">\n            </dxa-template>\n        </div>\n    </div>\n</div>", components: [{ type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }], directives: [{ type: BrickSelectionDirective, selector: "[dxvBrickSelection]", inputs: ["dxvBrickSelection"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PageComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-page',
+                        templateUrl: './page.component.html'
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var EditorContentComponent = /** @class */ (function () {
+        function EditorContentComponent() {
+        }
+        return EditorContentComponent;
+    }());
+    EditorContentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EditorContentComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    EditorContentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EditorContentComponent, selector: "dxv-editor-content", inputs: { data: "data" }, ngImport: i0__namespace, template: "<div *ngIf=\"data.visible\" class=\"dxrd-parameters-group\" \n    [class.dxrd-parameters-border]=\"!data.hideBorder\"\n    [class.dxrd-parameters-horizontal]=\"data.showHorizontally\">\n    <dxa-template template=\"dxrd-propertieseditor\" [data]=\"data.viewmodel\"></dxa-template>\n</div>", components: [{ type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EditorContentComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-editor-content',
+                        templateUrl: './editor-content.component.html'
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var GroupEditorComponent = /** @class */ (function () {
+        function GroupEditorComponent() {
+        }
+        GroupEditorComponent.prototype.getCorrectLayoutClass = function (editor) {
+            return editor.editorTemplate !== 'dxrd-parameters-separator' ?
+                'dx-fill-available' : 'dx-display-content';
+        };
+        GroupEditorComponent.prototype.trackByFn = function (_, item) {
+            return item.editorInputId;
+        };
+        return GroupEditorComponent;
+    }());
+    GroupEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GroupEditorComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    GroupEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GroupEditorComponent, selector: "dxv-group-editor", inputs: { data: "data" }, ngImport: i0__namespace, template: "<div [class.dx-rtl]=\"data.rtl\">\n    <div class=\"dx-editors\">\n        <div class=\"dx-fieldset dxrd-parameters-fieldset dxd-border-primary\">\n            <dxa-template *ngFor=\"let editor of data.editors; trackBy: trackByFn\" \n            [class]=\"getCorrectLayoutClass(editor)\"\n            [template]=\"editor.editorTemplate\" \n            [data]=\"editor\"></dxa-template>\n        </div>\n    </div>\n</div>", components: [{ type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }], directives: [{ type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GroupEditorComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-group-editor',
+                        templateUrl: './group-editor.component.html'
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var SearchComponent = /** @class */ (function () {
+        function SearchComponent() {
+        }
+        SearchComponent.prototype.ngOnInit = function () {
+            this.viewModel = this.data.model.getViewModel();
+        };
+        return SearchComponent;
+    }());
+    SearchComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SearchComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SearchComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SearchComponent, selector: "dxv-search", inputs: { data: "data" }, ngImport: i0__namespace, template: "<div role=\"search\" aria-haspopup=\"listbox\" class=\"dxrd-preview-search-wrapper\"\n    [hidden]=\"!(data.active && data.visible)\"\n    [dxMutationObserver]=\"data.keyboardHelper\">\n    <div id=\"dxrd-preview-search-live-region\" class=\"dxrd-visually-hidden\" aria-live=\"polite\" aria-atomic=\"true\"></div>\n    <div class=\"dxrd-preview-search-tab-header\">\n        <span class=\"dxrd-preview-search-tab-header-text dxrd-right-panel-header dxd-text-primary\">\n            {{viewModel.headerText}}\n        </span>\n        <div class=\"dxrd-preview-search-tab-editor-button-container\">\n            <dx-text-box class=\"dxrd-preview-search-editor dx-searcheditor\"\n                [inputAttr]=\"viewModel.searchEditor.inputAttr\"\n                (onFocusOut)=\"viewModel.searchEditor.onFocusOut($event)\"\n                (onKeyDown)=\"viewModel.searchEditor.onKeyDown($event)\">\n            </dx-text-box>\n            <dx-button class=\"dxrd-preview-search-button\"\n                [text]=\"viewModel.buttons.searchButton.text\"\n                [disabled]=\"viewModel.buttons.searchButton.disabled\"\n                (onClick)=\"viewModel.buttons.searchButton.onClick($event)\">\n            </dx-button>\n        </div>\n        <div class=\"dxrd-preview-search-tab-header-text\">\n            <dx-check-box class=\"dxrd-preview-search-checkbox\"\n                [text]=\"viewModel.matchCaseEditor.text\"\n                [value]=\"viewModel.matchCaseEditor.value\"\n                (onValueChanged)=\"viewModel.matchCaseEditor.onValueChanged($event)\">\n            </dx-check-box>\n            <dx-check-box class=\"dxrd-preview-search-checkbox dxrd-preview-search-checkbox-second\"\n                [text]=\"viewModel.matchWholeWordEditor.text\"\n                [value]=\"viewModel.matchWholeWordEditor.value\"\n                (onValueChanged)=\"viewModel.matchWholeWordEditor.onValueChanged($event)\">\n            </dx-check-box>\n        </div>\n    </div>\n    <div class=\"dxrd-preview-search-result-wrapper\" *ngIf=\"viewModel.searchResultCount > 0 || viewModel.loading\">\n        <div  class=\"dxrd-preview-search-result-header dxd-border-primary dxd-text-primary\">            \n            <div class=\"dxrd-preview-search-tab-header dxrd-preview-search-indicator-group\">\n                <div class=\"dxrd-preview-search-results dxrd-preview-search-result-text\"\n                [attr.id]=\"viewModel.searchResultCount\"\n                [attr.aria-busy]=\"viewModel.loading ? 'true' : 'false'\">\n                    <span class=\"dxrd-preview-search-result-text-bold\">\n                        {{viewModel.searchResultCount}}\n                    </span>&nbsp;\n                    <span>\n                        {{viewModel.resultsInText}}\n                    </span>&nbsp;\n                    <span class=\"dxrd-preview-search-result-text-bold\">\n                        {{viewModel.searchResultPageCount}}\n                    </span>&nbsp;\n                    <span>\n                        {{viewModel.resultsPagesText}}\n                    </span>\n                </div>\n                <div class=\"dxrd-preview-search-results-navigation\">\n                    <dx-load-indicator class=\"dxrdp-search-loading\"\n                        [visible]=\"viewModel.loading\">\n                    </dx-load-indicator>\n                    <dx-button class=\"dxrd-preview-search-results-navigation-button dx-searcheditor-button dx-widget dx-dropdowneditor-button dxd-icon-highlighted dx-shape-standard\"\n                        [template]=\"viewModel.buttons.upButton.template\"\n                        [icon]=\"viewModel.buttons.upButton.icon\"\n                        (onClick)=\"viewModel.buttons.upButton.onClick($event)\">\n                    </dx-button>\n                    <dx-button class=\"dxrd-preview-search-results-navigation-button dx-searcheditor-button dx-widget dx-dropdowneditor-button dxd-icon-highlighted dx-shape-standard\"\n                        [template]=\"viewModel.buttons.downButton.template\"\n                        [icon]=\"viewModel.buttons.downButton.icon\"\n                        (onClick)=\"viewModel.buttons.downButton.onClick($event)\">\n                    </dx-button>\n                </div>\n            </div> \n        </div>  \n        <div class=\"dx-accessibility-container-background dxd-back-accented\"></div>\n        <dx-list class=\"dxrd-preview-search-result dxd-border-accented\"\n            [attr.aria-labelledby]=\"viewModel.searchResultHeaderId\"\n            [dataSource]=\"viewModel.searchResultDataSource\"\n            pageLoadMode=\"scrollBottom\"\n            [focusStateEnabled]=\"false\"\n            [hoverStateEnabled]=\"false\"\n            (onItemRendered)=\"viewModel.onItemRendered($event)\"\n            [itemTemplate]=\"'items'\"\n            noDataText=\"\"\n        >\n            <div *dxTemplate=\"let item of 'items'\">\n                <div class=\"dxrd-preview-search-result-item dxd-list-item-back-color dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented\"\n                    [dxActionModel]=\"item.data\"\n                    [dxAction]=\"item.itemClickAction\"\n                    [attr.aria-label]=\"item.attr['aria-label']\"\n                >\n                    <div class=\"dx-accessibility-field-background dxd-back-accented\"></div>\n                    <div class=\"dxrd-preview-search-tab-item-text propertygrid-editor-displayName dxd-text-primary\">\n                        {{item.data.text}}\n                    </div>\n                    <div class=\"dxrd-preview-search-tab-item-info dxd-text-primary\">\n                        {{item.info}}\n                    </div>\n                </div>  \n            </div>\n        </dx-list>\n    </div>\n\n    <div *ngIf=\"viewModel.searchCompleted && viewModel.searchResultCount == 0\">\n        <div  class=\"dxrd-preview-search-result-header dxd-border-primary dxd-text-primary\">\n            <div class=\"dxrd-preview-search-tab-header dxrd-preview-search-indicator-group\">\n                <div class =\"dxrd-preview-search-result-text\">\n                    {{viewModel.noResultText}}\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n", components: [{ type: i1__namespace.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isDirty", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isDirtyChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { type: i1__namespace.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"] }, { type: i1__namespace.DxCheckBoxComponent, selector: "dx-check-box", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "enableThreeStateBehavior", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "iconSize", "isDirty", "isValid", "name", "readOnly", "rtlEnabled", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "enableThreeStateBehaviorChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconSizeChange", "isDirtyChange", "isValidChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { type: i1__namespace.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"] }, { type: i1__namespace.DxListComponent, selector: "dx-list", inputs: ["accessKey", "activeStateEnabled", "allowItemDeleting", "bounceEnabled", "collapsibleGroups", "dataSource", "disabled", "displayExpr", "elementAttr", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "indicateLoading", "itemDeleteMode", "itemDragging", "itemHoldTimeout", "items", "itemTemplate", "keyExpr", "menuItems", "menuMode", "nextButtonText", "noDataText", "pageLoadingText", "pageLoadMode", "pulledDownText", "pullingDownText", "pullRefreshEnabled", "refreshingText", "repaintChangesOnly", "rtlEnabled", "scrollByContent", "scrollByThumb", "scrollingEnabled", "searchEditorOptions", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "searchValue", "selectAllMode", "selectAllText", "selectByClick", "selectedItemKeys", "selectedItems", "selectionMode", "showScrollbar", "showSelectionControls", "tabIndex", "useNativeScrolling", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onGroupRendered", "onInitialized", "onItemClick", "onItemContextMenu", "onItemDeleted", "onItemDeleting", "onItemHold", "onItemRendered", "onItemReordered", "onItemSwipe", "onOptionChanged", "onPageLoading", "onPullRefresh", "onScroll", "onSelectAllValueChanged", "onSelectionChanged", "accessKeyChange", "activeStateEnabledChange", "allowItemDeletingChange", "bounceEnabledChange", "collapsibleGroupsChange", "dataSourceChange", "disabledChange", "displayExprChange", "elementAttrChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "indicateLoadingChange", "itemDeleteModeChange", "itemDraggingChange", "itemHoldTimeoutChange", "itemsChange", "itemTemplateChange", "keyExprChange", "menuItemsChange", "menuModeChange", "nextButtonTextChange", "noDataTextChange", "pageLoadingTextChange", "pageLoadModeChange", "pulledDownTextChange", "pullingDownTextChange", "pullRefreshEnabledChange", "refreshingTextChange", "repaintChangesOnlyChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "scrollingEnabledChange", "searchEditorOptionsChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "searchValueChange", "selectAllModeChange", "selectAllTextChange", "selectByClickChange", "selectedItemKeysChange", "selectedItemsChange", "selectionModeChange", "showScrollbarChange", "showSelectionControlsChange", "tabIndexChange", "useNativeScrollingChange", "visibleChange", "widthChange"] }], directives: [{ type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { type: DxActionDirective, selector: "[dxAction]", inputs: ["dxActionModel", "dxAction"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SearchComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-search',
+                        templateUrl: './search.component.html'
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var BrickComponent = /** @class */ (function () {
+        function BrickComponent() {
+        }
+        return BrickComponent;
+    }());
+    BrickComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BrickComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    BrickComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BrickComponent, selector: "dxv-brick", inputs: { data: "data" }, ngImport: i0__namespace, template: "<div class=\"dxrd-report-preview-brick\" \n    [style.top]=\"data.topP\"\n    [style.left]=\"data.leftP\"\n    [style.right]=\"data.rightP\"\n    [style.height]=\"data.heightP\"\n    [style.width]=\"data.widthP\"\n    [class.dxrd-report-preview-brick-selected]=\"data.active\">\n</div>" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BrickComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-brick',
+                        templateUrl: './brick.component.html'
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var BrickClickableComponent = /** @class */ (function () {
+        function BrickClickableComponent() {
+        }
+        return BrickClickableComponent;
+    }());
+    BrickClickableComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BrickClickableComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    BrickClickableComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BrickClickableComponent, selector: "dxv-brick-clickable", inputs: { data: "data" }, ngImport: i0__namespace, template: "<div class=\"dxrd-report-preview-brick\"\n    [style.top]=\"data.topP\"\n    [style.left]=\"data.leftP\"\n    [style.right]=\"data.rightP\"\n    [style.height]=\"data.heightP\"\n    [style.width]=\"data.widthP\"\n    [class.dxrd-report-preview-brick-selected]=\"data.active\"\n    [class.dxrd-report-preview-brick-selectable]=\"!data.bricks\"\n    (click)=\"data.onClick($event); $event.stopPropagation();\">\n\n    <div *ngIf=\"!!data.navigation\" class=\"dxrd-report-preview-brick-navigation\"\n        [class.dxrdp-navigation-brick-drill-down]=\"!!data.navigation.drillDownKey\"\n        [class.dxrdp-navigation-brick-sorting]=\"!!data.navigation.sortData\"\n        [class.dxrdp-navigation-brick-sorting-desc]=\"data.navigation.sortData && data.navigation.sortData.order === 1\"\n        [class.dxrdp-navigation-brick-sorting-asc]=\"data.navigation.sortData && data.navigation.sortData.order === 2\">\n    </div>\n</div>", directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BrickClickableComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-brick-clickable',
+                        templateUrl: './brick-clickable.component.html'
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var ExportToolComponent = /** @class */ (function () {
+        function ExportToolComponent(_element, _cd) {
+            this._element = _element;
+            this._cd = _cd;
+        }
+        ExportToolComponent.prototype.ngAfterViewInit = function () {
+            var element = this._element.nativeElement;
+            var container = this.data.popupOptions.getPopupContainer(element);
+            this.popupOptions = {
+                container: container,
+                position: { of: container }
+            };
+            _bindings.initializeViewerExportBinding(element, this.data);
+            this._cd.detectChanges();
+        };
+        return ExportToolComponent;
+    }());
+    ExportToolComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ExportToolComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ExportToolComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ExportToolComponent, selector: "dxv-export-tool", inputs: { data: "data" }, ngImport: i0__namespace, 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>", components: [{ type: i1__namespace.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"] }], directives: [{ type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ExportToolComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-export-tool',
+                        templateUrl: './export-tool.component.html'
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var ProgressBarComponent = /** @class */ (function () {
+        function ProgressBarComponent() {
+        }
+        return ProgressBarComponent;
+    }());
+    ProgressBarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ProgressBarComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ProgressBarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ProgressBarComponent, selector: "dxv-progress-bar", inputs: { viewModel: ["data", "viewModel"] }, ngImport: i0__namespace, template: "<div role=\"dialog\" class=\"dxrd-preview-progress dxd-popup-back-color dxd-back-primary2 dxd-border-primary\" [class]=\"viewModel.cssClasses\" [hidden]=\"!viewModel.visible\" [dxMutationObserver]=\"viewModel.progressBarAccessibilityKeyboardHelper\">\n    <div class=\"dxrd-preview-progress-text dxd-text-primary\">{{viewModel.text}}</div>\n    <div class=\"dxrd-preview-progress-bar dxd-back-primary\">\n        <div class=\"dxrd-preview-progress-value dxd-preview-progress-bar-value-color dxd-back-accented\" [style.width]=\"viewModel.progress+'%'\"></div>\n    </div>\n    <div role=\"button\" class=\"dxrd-preview-progress-cancel dxd-hyperlink-color dxd-border-accented dxd-text-accented dx-accessibility-list-item dx-accessibility-border-accented\" [hidden]=\"!viewModel.cancelButton.visible\" (click)=\"viewModel.cancelButton.action && viewModel.cancelButton.action()\">{{viewModel.cancelButton.text}}</div>\n</div>", directives: [{ type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ProgressBarComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-progress-bar',
+                        templateUrl: './progress-bar.component.html'
+                    }]
+            }], propDecorators: { viewModel: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var EditingFieldCheckboxGlyphComponent = /** @class */ (function () {
+        function EditingFieldCheckboxGlyphComponent() {
+        }
+        return EditingFieldCheckboxGlyphComponent;
+    }());
+    EditingFieldCheckboxGlyphComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EditingFieldCheckboxGlyphComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    EditingFieldCheckboxGlyphComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EditingFieldCheckboxGlyphComponent, selector: "dxv-editing-field-checkbox-glyph", inputs: { data: "data" }, ngImport: i0__namespace, template: "<div class=\"dxrd-checkbox-custom-glyph\" [style]=\"data.customGlyphStyleCss\"></div>" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EditingFieldCheckboxGlyphComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-editing-field-checkbox-glyph',
+                        templateUrl: './editing-field-checkbox-glyph.component.html'
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var MobileGalleryComponent = /** @class */ (function () {
+        function MobileGalleryComponent() {
+            this._gallery = null;
+            this._slideOptions = null;
+        }
+        Object.defineProperty(MobileGalleryComponent.prototype, "gallery", {
+            set: function (newVal) {
+                if (this._dxgallery) {
+                    this._gallery = newVal;
+                    this._dxgallery.option('gallery', newVal);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MobileGalleryComponent.prototype, "slideOptions", {
+            set: function (newVal) {
+                if (this._dxgallery) {
+                    this._slideOptions = newVal;
+                    this._dxgallery.option('slideOptions', newVal);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        MobileGalleryComponent.prototype.ngAfterViewInit = function () {
+            this._dxgallery = this.galleryComponent.instance;
+            this._dxgallery.option('gallery', this._gallery || this.data.gallery);
+            this._dxgallery.option('slideOptions', this._slideOptions || this.data.slideOptions);
+            new _galleryComponent.dxGalleryExtender(this._dxgallery).extend(this._dxgallery.$element());
+        };
+        MobileGalleryComponent.prototype.Max = function (val1, val2) {
+            return Math.max(val1, val2);
+        };
+        return MobileGalleryComponent;
+    }());
+    MobileGalleryComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MobileGalleryComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MobileGalleryComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MobileGalleryComponent, selector: "dxv-mobile-gallery", inputs: { data: "data", gallery: "gallery", slideOptions: "slideOptions" }, viewQueries: [{ propertyName: "galleryComponent", first: true, predicate: ["gallery"], descendants: true }], ngImport: i0__namespace, template: "<dx-gallery class=\"dxrd-mobile-gallery\" #gallery\n  [dataSource]=\"data.gallery.items\"\n  [animationEnabled]=\"data.gallery.animationEnabled\"\n  [disabled]=\"data.zoomUpdating\"\n  width=\"100%\"\n  height=\"100%\"\n  [showIndicator]=\"false\"\n  [loop]=\"true\"\n  (onSelectionChanged)=\"data.onSlide($event)\"\n  (onOptionChanged)=\"data.gallery.onOptionChanged($event)\"\n  >\n  <div *dxTemplate=\"let item of 'item'\">\n    <dx-scroll-view class=\"dxrd-scrollView-mobile\"\n      [direction]=\"item.reportPreview.scrollViewOptions.direction\"\n      [bounceEnabled]=\"item.reportPreview.scrollViewOptions.bounceEnabled\"\n      [disabled]=\"item.reportPreview.scrollViewOptions.disabled\" \n      (onUpdated)=\"item.reportPreview.scrollViewOptions.onUpdated($event)\">\n      <div class=\"dxrd-gallery-blocks\" \n        [style.width]=\"item.gallery.contentSize ? item.gallery.contentSize.width + 'px' : undefined\"\n        [style.height]=\"item.gallery.contentSize ? item.gallery.contentSize.height + + 'px' : undefined\">\n        <ng-container *ngFor=\"let block of item.blocks\">\n          <div *ngIf=\"block.page\" class=\"dxrd-gallery-block\"\n          [style.left]=\"block.position.left + 'px'\"\n          [style.right]=\"block.position.right + 'px'\"\n          [style.top]=\"block.position.top + 'px'\"\n          [style.bottom]=\"block.position.bottom + 'px'\" \n          [class]=\"block.classSet\">\n            <div class=\"dxrd-gallery-block-content\"\n              [style.width]=\"Max(block.page.width, block.position.width) + 'px'\"\n              [style.height]=\"Max(block.page.height, block.position.height) + 'px'\"\n              [style.background-color]=\"block.page.color\">\n              <div class=\"dxrdp-active-border\"\n                [class.dxrdp-active]=\"block.page.active && block.active\"\n                [class.dxrdp-page-padding]=\"block.page.active && block.active\"\n                [hidden]=\"!item.reportPreview.slideOptions.readerMode\">\n              </div>\n              <div class=\"dxrd-mobile-page\" \n                [style.width]=\"block.page.width + 'px'\"\n                [style.height]=\"block.page.height + 'px'\"\n                [style.pointerEvents]=\"block.reportPreview.pageEvents\"\n                [style.touchEvents]=\"block.reportPreview.pageEvents\"\n                >\n                <dxa-template template=\"dxrd-preview-page-mobile\" [data]=\"block.page\"></dxa-template>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </dx-scroll-view>\n  </div>\n</dx-gallery>", components: [{ type: i1__namespace.DxGalleryComponent, selector: "dx-gallery", inputs: ["accessKey", "animationDuration", "animationEnabled", "dataSource", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "indicatorEnabled", "initialItemWidth", "itemHoldTimeout", "items", "itemTemplate", "loop", "noDataText", "rtlEnabled", "selectedIndex", "selectedItem", "showIndicator", "showNavButtons", "slideshowDelay", "stretchImages", "swipeEnabled", "tabIndex", "visible", "width", "wrapAround"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onItemClick", "onItemContextMenu", "onItemHold", "onItemRendered", "onOptionChanged", "onSelectionChanged", "accessKeyChange", "animationDurationChange", "animationEnabledChange", "dataSourceChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "indicatorEnabledChange", "initialItemWidthChange", "itemHoldTimeoutChange", "itemsChange", "itemTemplateChange", "loopChange", "noDataTextChange", "rtlEnabledChange", "selectedIndexChange", "selectedItemChange", "showIndicatorChange", "showNavButtonsChange", "slideshowDelayChange", "stretchImagesChange", "swipeEnabledChange", "tabIndexChange", "visibleChange", "widthChange", "wrapAroundChange"] }, { type: i1__namespace.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"] }, { type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }], directives: [{ type: i4__namespace.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MobileGalleryComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-mobile-gallery',
+                        templateUrl: './mobile.gallery.component.html'
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }], gallery: [{
+                    type: i0.Input,
+                    args: ['gallery']
+                }], slideOptions: [{
+                    type: i0.Input,
+                    args: ['slideOptions']
+                }], galleryComponent: [{
+                    type: i0.ViewChild,
+                    args: ['gallery']
+                }] } });
+
+    var MobileSlideDirective = /** @class */ (function (_super) {
+        __extends(MobileSlideDirective, _super);
+        function MobileSlideDirective() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        MobileSlideDirective.prototype.InitAndReturnDisposeFunc = function (element) {
+            return _mobileBindings.initializeSlideBinding(element, this.options);
+        };
+        return MobileSlideDirective;
+    }(BaseDisposableDirective));
+    MobileSlideDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MobileSlideDirective, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
+    MobileSlideDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: MobileSlideDirective, selector: "[dxvMobileSlide]", inputs: { options: ["dxvMobileSlide", "options"] }, usesInheritance: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MobileSlideDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[dxvMobileSlide]'
+                    }]
+            }], propDecorators: { options: [{
+                    type: i0.Input,
+                    args: ['dxvMobileSlide']
+                }] } });
+
+    var MobileZoomDirective = /** @class */ (function (_super) {
+        __extends(MobileZoomDirective, _super);
+        function MobileZoomDirective() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        MobileZoomDirective.prototype.InitAndReturnDisposeFunc = function (element) {
+            _mobileBindings.initializeMobileZoomBinding(element, this.options);
+            return function () { return void 0; };
+        };
+        return MobileZoomDirective;
+    }(BaseDisposableDirective));
+    MobileZoomDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MobileZoomDirective, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
+    MobileZoomDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: MobileZoomDirective, selector: "[dxvMobileZoom]", inputs: { options: ["dxvMobileZoom", "options"] }, usesInheritance: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MobileZoomDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[dxvMobileZoom]'
+                    }]
+            }], propDecorators: { options: [{
+                    type: i0.Input,
+                    args: ['dxvMobileZoom']
+                }] } });
+
+    var MobileSurfaceComponent = /** @class */ (function () {
+        function MobileSurfaceComponent() {
+        }
+        return MobileSurfaceComponent;
+    }());
+    MobileSurfaceComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MobileSurfaceComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MobileSurfaceComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MobileSurfaceComponent, selector: "dxv-mobile-surface", inputs: { data: "data" }, ngImport: i0__namespace, template: "<div class=\"dxrd-preview-wrapper dxrdp-fullscreen dxrd-preview-surface\"\n    [style.pointerEvents]=\"data.surfaceEvents\"\n    [style.touchEvents]=\"data.surfaceEvents\" \n    [style.top]=\"data.topOffset + 'px'\"\n    [style.height]=\"data.previewWrapperSizeHeight + 'px'\"\n    [style.width]=\"data.previewWrapperSizeWidth + 'px'\" \n    [dxvMobileSlide]=\"data.slideOptions\"\n    [dxvMobileZoom]=\"data.mobileZoomOptions\"\n    (click)=\"data.click()\"\n    [class.dxrp-editing-fields-hightlighted]=\"data.editingFieldsHighlighted\">\n        <dxa-template template=\"dxrd-preview-progress-bar\" [data]=\"data.progressBar\"></dxa-template>\n    <div class=\"dxrd-mobile-content\">\n        <dxv-mobile-gallery [data]=\"data\" [slideOptions]=\"data.slideOptions\" [gallery]=\"data.gallery\"></dxv-mobile-gallery>\n    </div>\n</div>\n<input type=\"text\" class=\"dxrd-display-none\" />", components: [{ type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { type: MobileGalleryComponent, selector: "dxv-mobile-gallery", inputs: ["data", "gallery", "slideOptions"] }], directives: [{ type: MobileSlideDirective, selector: "[dxvMobileSlide]", inputs: ["dxvMobileSlide"] }, { type: MobileZoomDirective, selector: "[dxvMobileZoom]", inputs: ["dxvMobileZoom"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MobileSurfaceComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-mobile-surface',
+                        templateUrl: './mobile.surface.component.html',
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var MobileAutofitDirective = /** @class */ (function (_super) {
+        __extends(MobileAutofitDirective, _super);
+        function MobileAutofitDirective() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        MobileAutofitDirective.prototype.InitAndReturnDisposeFunc = function (element) {
+            return _bindings.initializeAutoFitBinding(element, this.options);
+        };
+        return MobileAutofitDirective;
+    }(BaseDisposableDirective));
+    MobileAutofitDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MobileAutofitDirective, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
+    MobileAutofitDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: MobileAutofitDirective, selector: "[dxvMobileAutofit]", inputs: { options: ["dxvMobileAutofit", "options"] }, usesInheritance: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MobileAutofitDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[dxvMobileAutofit]'
+                    }]
+            }], propDecorators: { options: [{
+                    type: i0.Input,
+                    args: ['dxvMobileAutofit']
+                }] } });
+
+    var MobilePageComponent = /** @class */ (function () {
+        function MobilePageComponent() {
+        }
+        return MobilePageComponent;
+    }());
+    MobilePageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MobilePageComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MobilePageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MobilePageComponent, selector: "dxv-mobile-page", inputs: { data: "data" }, ngImport: i0__namespace, template: "<div class=\"dxrdp-content\"\n    (click)=\"data.clickToBrick(data, $event)\"\n    [style.width]=\"data.width + 'px'\"\n    [style.height]=\"data.height + 'px'\" \n    [dxvMobileAutofit]=\"data.autoFitOptions\">\n    <div class=\"dxrdp-loading-wrapper\" \n    [style.width]=\"data.width + 'px'\"\n    [style.height]=\"data.height + 'px'\"\n    [style.lineHeight]=\"data.height + 'px'\"\n    [style.background-color]=\"data.color\"\n    [hidden]=\"!data.pageLoading\">\n        {{data.loadingText}}\n    </div>\n    <img class=\"dxrd-width-100 dxrd-height-100\" \n    [attr.src]=\"data.displayImageSrc\"\n    [style.background-color]=\"data.color\" />\n    <div class=\"dxrdp-active-border\" \n        [class.dxrdp-active]=\"data.active && data.hasBricks\"\n        [hidden]=\"data.readerMode\"></div>\n    <dxa-template *ngFor=\"let brick of data.activeBricks\" template=\"dxrd-page-brick-mobile\" [data]=\"brick\"></dxa-template>\n    <ng-container *ngIf=\"!data.brickLoading && data.editingFields\">\n        <dxa-template *ngFor=\"let editingField of data.editingFields\" [template]=\"editingField.template\" [data]=\"editingField\"></dxa-template>       \n    </ng-container>\n</div>", components: [{ type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }], directives: [{ type: MobileAutofitDirective, selector: "[dxvMobileAutofit]", inputs: ["dxvMobileAutofit"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MobilePageComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-mobile-page',
+                        templateUrl: './mobile.page.component.html'
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var MobileActionsComponent = /** @class */ (function () {
+        function MobileActionsComponent() {
+        }
+        return MobileActionsComponent;
+    }());
+    MobileActionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MobileActionsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MobileActionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MobileActionsComponent, selector: "dxv-mobile-actions", inputs: { data: "data" }, ngImport: i0__namespace, template: "<div class=\"dxrdp-mobile-actions\" [hidden]=\"!data.visible\">\n    <div class=\"dxrdp-mobile-actions-content\">\n        <div class=\"dxrdp-mobile-action\" *ngFor=\"let action of data.actions\">\n            <div [hidden]=\"!action.visible\" [class]=\"'dxrdp-mobile-action ' + action.imageClassName\" (click)=\"action.clickAction()\">\n                <dxa-template *ngIf=\"!!action.imageTemplateName\" [template]=\"action.imageTemplateName\"></dxa-template>\n            </div>\n            <dxa-template *ngIf=\"!!action.content\" [template]=\"action.content.name\" [data]=\"action.content.data\"></dxa-template>\n        </div>\n    </div>\n</div>", components: [{ type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }], directives: [{ type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MobileActionsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-mobile-actions',
+                        templateUrl: './mobile.actions.component.html'
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var MobileParametersComponent = /** @class */ (function () {
+        function MobileParametersComponent(_element, _cd) {
+            this._element = _element;
+            this._cd = _cd;
+        }
+        MobileParametersComponent.prototype.ngAfterViewInit = function () {
+            this.data.cacheElementContent(this.buttonGroup.nativeElement);
+            this._cd.detectChanges();
+        };
+        return MobileParametersComponent;
+    }());
+    MobileParametersComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MobileParametersComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MobileParametersComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MobileParametersComponent, selector: "dxv-mobile-parameters", inputs: { data: "data" }, viewQueries: [{ propertyName: "buttonGroup", first: true, predicate: ["buttonGroup"], descendants: true }], ngImport: i0__namespace, template: "<div [class]=\"'dxrdp-parameters-mobile ' + data.className\">\n    <div class=\"dxrdp-parameters-title\">{{data.title}} </div>\n    <dx-scroll-view class=\"dxrdp-parameters-scroll\" showScrollbar=\"onHover\" [useNative]=\"false\" [scrollByThumb]=\"true\" [bounceEnabled]=\"false\">\n        <dxa-template [template]=\"data.contentTemplate\" [data]=\"data.model.getViewModel()\"></dxa-template>\n    </dx-scroll-view>\n    <div class=\"dxrdp-parameters-buttons text-buttons\" #buttonGroup>\n        <dx-button *ngFor=\"let button of data.actionButtons\" [class]=\"'dxrdp-parameter-action ' + button.className\" [text]=\"button.text\" (onClick)=\"button.action($event)\" [disabled]=\"button.disabled\" [visible]=\"button.visible\"></dx-button>\n    </div>\n    <div class=\"dxrdp-parameters-buttons\" [hidden]=\"!data.showIcons\">\n        <dx-button *ngFor=\"let icon of data.actionIcons\" [class]=\"'dxrdp-parameter-icon ' + icon.className\" (onClick)=\"icon.action($event)\" [disabled]=\"icon.disabled\"></dx-button>\n    </div>\n</div>", components: [{ type: i1__namespace.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"] }, { type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { type: i1__namespace.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"] }], directives: [{ type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MobileParametersComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-mobile-parameters',
+                        templateUrl: './mobile.parameters.component.html'
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }], buttonGroup: [{
+                    type: i0.ViewChild,
+                    args: ['buttonGroup']
+                }] } });
+
+    var ComponentWithParentContainer = /** @class */ (function () {
+        function ComponentWithParentContainer(_element) {
+            this._element = _element;
+        }
+        ComponentWithParentContainer.prototype.ngOnInit = function () {
+            this.parentContainer = _utils$1.getParentContainer(this._element.nativeElement);
+        };
+        return ComponentWithParentContainer;
+    }());
+    ComponentWithParentContainer.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ComponentWithParentContainer, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ComponentWithParentContainer.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ComponentWithParentContainer, selector: "dxa-contained-element", ngImport: i0__namespace, template: '', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ComponentWithParentContainer, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxa-contained-element',
+                        template: ''
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; } });
+
+    var MobileParametersPopupComponent = /** @class */ (function (_super) {
+        __extends(MobileParametersPopupComponent, _super);
+        function MobileParametersPopupComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return MobileParametersPopupComponent;
+    }(ComponentWithParentContainer));
+    MobileParametersPopupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MobileParametersPopupComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    MobileParametersPopupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MobileParametersPopupComponent, selector: "dxv-mobile-parameters-popup", inputs: { data: "data" }, usesInheritance: true, ngImport: i0__namespace, template: "<dx-popup [wrapperAttr]=\"{ class: 'dxrd-menu-parameters-popup' }\" [showTitle]=\"false\" (onHidden)=\"data.onHidden($event)\" width=\"100vw\" height=\"100vh\" [visible]=\"data.visible\" [container]=\"parentContainer\">\n    <dxa-template template=\"dxrv-preview-parameters-mobile\" [data]=\"data\"></dxa-template>\n</dx-popup>", components: [{ type: i1__namespace.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"] }, { type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MobileParametersPopupComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-mobile-parameters-popup',
+                        templateUrl: './mobile.parameters.popup.component.html'
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var MobileParametersDateRangeComponent = /** @class */ (function (_super) {
+        __extends(MobileParametersDateRangeComponent, _super);
+        function MobileParametersDateRangeComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        MobileParametersDateRangeComponent.prototype.ngOnInit = function () {
+            this.options.isMobile = true;
+            _super.prototype.ngOnInit.call(this);
+        };
+        return MobileParametersDateRangeComponent;
+    }(DateRangeComponent));
+    MobileParametersDateRangeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MobileParametersDateRangeComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    MobileParametersDateRangeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MobileParametersDateRangeComponent, selector: "dxv-mobile-parameters-daterange", usesInheritance: true, ngImport: i0__namespace, template: "<dxv-date-range [data]=\"options\"></dxv-date-range>", components: [{ type: DateRangeComponent, selector: "dxv-date-range", inputs: ["data"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MobileParametersDateRangeComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-mobile-parameters-daterange',
+                        templateUrl: './mobile.parameters.daterange.component.html'
+                    }]
+            }] });
+
+    var DateRangeMobileComponent = /** @class */ (function () {
+        function DateRangeMobileComponent() {
+        }
+        return DateRangeMobileComponent;
+    }());
+    DateRangeMobileComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DateRangeMobileComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    DateRangeMobileComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DateRangeMobileComponent, selector: "dxv-date-range-mobile", inputs: { data: "data" }, ngImport: i0__namespace, template: "<div class=\"dxrv-preview-date-range-mobile\">\n  <div class=\"dx-fieldset\">\n      <div class=\"dx-field\">\n          <dx-select-box\n            [dataSource]=\"data.items\"\n            displayExpr=\"displayName\"\n            (onValueChanged)=\"data.popupModel.onTextChanged($event)\"\n            [placeholder]=\"data.popupModel.selectPeriodPlaceholder\"\n            [useItemTextAsTitle]=\"true\"\n          ></dx-select-box>\n      </div>\n      <div class=\"dx-field\">\n          <div class=\"dx-fieldset-column\">\n              <div class=\"dx-fieldset-header\">{{data.popupModel.fromText}}</div>\n              <dx-button class=\"dxrv-daterange-editor-button\"\n                [class.dx-button-default]=\"data.popupModel.startButton.focused\"\n                [text]=\"data.popupModel.startButton.text\"\n\n                [stylingMode]=\"data.popupModel.startButton.stylingMode\"\n                [focusStateEnabled]=\"data.popupModel.startButton.focusStateEnabled\"\n                [activeStateEnabled]=\"data.popupModel.startButton.activeStateEnabled\"\n                (onClick)=\"data.popupModel.startButton.onClick()\"\n              ></dx-button>\n          </div>\n          <div class=\"dx-fieldset-column dx-fieldset-column-right\">\n              <div class=\"dx-fieldset-header\">{{data.popupModel.untilText}}</div>\n              <div class=\"dxd-back-secondary dx-fieldset-column-separator\"></div>\n              <dx-button class=\"dxrv-daterange-editor-button\"\n                [class.dx-button-default]=\"data.popupModel.endButton.focused\"\n                [text]=\"data.popupModel.endButton.text\"\n\n                [stylingMode]=\"data.popupModel.endButton.stylingMode\"\n                [focusStateEnabled]=\"data.popupModel.endButton.focusStateEnabled\"\n                [activeStateEnabled]=\"data.popupModel.endButton.activeStateEnabled\"\n                (onClick)=\"data.popupModel.endButton.onClick()\">\n              </dx-button>\n          </div>\n      </div>\n      <div class=\"dx-field\">\n        <div class=\"dxrv-daterange-editor-item\">\n            <dxa-template *ngIf=\"data.popupModel.startButton.focused\" template=\"dxrv-daterange-calendar\" [data]=\"data.startRange\"></dxa-template>\n            <dxa-template *ngIf=\"data.popupModel.endButton.focused\" template=\"dxrv-daterange-calendar\" [data]=\"data.endRange\"></dxa-template>\n        </div>        \n    </div>\n  </div>\n</div>", components: [{ type: i1__namespace.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "customItemCreateEvent", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isDirty", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "customItemCreateEventChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isDirtyChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { type: i1__namespace.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"] }, { type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DateRangeMobileComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-date-range-mobile',
+                        templateUrl: './date-range-mobile.component.html'
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var MobileActionsExportComponent = /** @class */ (function (_super) {
+        __extends(MobileActionsExportComponent, _super);
+        function MobileActionsExportComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return MobileActionsExportComponent;
+    }(ComponentWithParentContainer));
+    MobileActionsExportComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MobileActionsExportComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    MobileActionsExportComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MobileActionsExportComponent, selector: "dxv-mobile-actions-export", inputs: { data: "data" }, usesInheritance: true, ngImport: i0__namespace, 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>", components: [{ type: i1__namespace.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"] }], directives: [{ type: i4__namespace.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MobileActionsExportComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-mobile-actions-export',
+                        templateUrl: './mobile.actions.export.component.html'
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var MobileSearchBarDirective = /** @class */ (function (_super) {
+        __extends(MobileSearchBarDirective, _super);
+        function MobileSearchBarDirective() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        MobileSearchBarDirective.prototype.InitAndReturnDisposeFunc = function (element) {
+            return _mobileBindings.initializeMobileSearchBinding(element, this.options);
+        };
+        return MobileSearchBarDirective;
+    }(BaseDisposableDirective));
+    MobileSearchBarDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MobileSearchBarDirective, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
+    MobileSearchBarDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: MobileSearchBarDirective, selector: "[dxvSearchBar]", inputs: { options: ["dxvSearchBar", "options"] }, usesInheritance: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MobileSearchBarDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[dxvSearchBar]'
+                    }]
+            }], propDecorators: { options: [{
+                    type: i0.Input,
+                    args: ['dxvSearchBar']
+                }] } });
+
+    var MobileSearchComponent = /** @class */ (function () {
+        function MobileSearchComponent() {
+        }
+        return MobileSearchComponent;
+    }());
+    MobileSearchComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MobileSearchComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MobileSearchComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MobileSearchComponent, selector: "dxv-search-mobile", inputs: { data: "data" }, ngImport: i0__namespace, template: "<div class=\"dxrdp-search-wrapper\" [style.height]=\"data.height\" [dxvSearchBar]=\"data\">\n    <div class=\"dxrd-mobile-search\">\n        <div class=\"dxrdp-taptosearch\" [hidden]=\"data.editorVisible\" (click)=\"data.focusEditor(data, $event)\">\n            <div class=\"dxrdp-taptosearch-text\">{{ data.tapToSearchText }}</div>\n        </div>\n        <div class=\"dxrdp-search-panel\" [hidden]=\"!data.editorVisible\">          \n            <dx-text-box class=\"dxrdp-search-editor\" [value]=\"data.searchText\"\n                (onValueChanged)=\"data.onSearchTextChanged($event)\"\n                (onEnterKey)=\"data.startSearch()\">                \n            </dx-text-box>\n        </div>\n    </div>\n</div>", components: [{ type: i1__namespace.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isDirty", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isDirtyChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }], directives: [{ type: MobileSearchBarDirective, selector: "[dxvSearchBar]", inputs: ["dxvSearchBar"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MobileSearchComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-search-mobile',
+                        templateUrl: './mobile.search.component.html'
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var MobilePaginatorDirective = /** @class */ (function (_super) {
+        __extends(MobilePaginatorDirective, _super);
+        function MobilePaginatorDirective() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        MobilePaginatorDirective.prototype.InitAndReturnDisposeFunc = function (element) {
+            _mobileBindings.initializeMobilePaginatorBinding(element, this.options);
+            return function () { return void 0; };
+        };
+        return MobilePaginatorDirective;
+    }(BaseDisposableDirective));
+    MobilePaginatorDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MobilePaginatorDirective, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
+    MobilePaginatorDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: MobilePaginatorDirective, selector: "[dxvPaginator]", inputs: { options: ["dxvPaginator", "options"] }, usesInheritance: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MobilePaginatorDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[dxvPaginator]'
+                    }]
+            }], propDecorators: { options: [{
+                    type: i0.Input,
+                    args: ['dxvPaginator']
+                }] } });
+
+    var MobilePaginatorComponent = /** @class */ (function () {
+        function MobilePaginatorComponent() {
+        }
+        return MobilePaginatorComponent;
+    }());
+    MobilePaginatorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MobilePaginatorComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MobilePaginatorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MobilePaginatorComponent, selector: "dxv-pages-mobile", inputs: { data: "data" }, ngImport: i0__namespace, template: "<div class=\"dxrdp-mobile-paginator\" [dxvPaginator]=\"data\">\n    <div class=\"dxrdp-mobile-paginator-content\">\n        <div class=\"dxrdp-mobile-paginator-text\">{{ data.text }}</div>\n    </div>\n</div>\n", directives: [{ type: MobilePaginatorDirective, selector: "[dxvPaginator]", inputs: ["dxvPaginator"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MobilePaginatorComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-pages-mobile',
+                        templateUrl: './mobile.pages.component.html'
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['data']
+                }] } });
+
+    var ViewerTemplatesComponent = /** @class */ (function () {
+        function ViewerTemplatesComponent(_templateEngine) {
+            this._templateEngine = _templateEngine;
+        }
+        ViewerTemplatesComponent.prototype.ngAfterViewInit = function () {
+            this._templateEngine.register('dxrd-preview-pager', this.pagerAction);
+            this._templateEngine.register('dxrd-zoom-autofit-select-template', this.zoomAction);
+            this._templateEngine.register('dxrd-preview-export-to', this.exportAction);
+            this._templateEngine.register('dxrd-preview-toolbar-scrollable', this.toolbar);
+            this._templateEngine.register('dxrd-preview-parameters', this.parameters);
+            this._templateEngine.register('dxrd-parameters-property-editor', this.editor);
+            this._templateEngine.register('dxrdv-signature', this.signatureEditor);
+            this._templateEngine.register('dxrd-multivalue', this.multivalue);
+            this._templateEngine.register('dxrd-preview-export-options', this.exportOptions);
+            this._templateEngine.register('dxrd-preview-document-map', this.documentMap);
+            this._templateEngine.register('dxrd-multivalue-editable', this.multivalueEditable);
+            this._templateEngine.register('dxrv-range-parameter', this.daterangeinput);
+            this._templateEngine.register('dxrv-daterange-editor-popup', this.daterangePopup);
+            this._templateEngine.register('dxrv-daterange-calendar', this.daterangeecalendar);
+            this._templateEngine.register('dxrdp-surface', this.surface);
+            this._templateEngine.register('dxrd-preview-page', this.page);
+            this._templateEngine.register('dxrd-parameters-editor-content', this.editorContent);
+            this._templateEngine.register('dxrd-propertieseditor', this.groupEditor);
+            this._templateEngine.register('dxrd-preview-search', this.search);
+            this._templateEngine.register('dxrd-page-brick-mobile', this.brick);
+            this._templateEngine.register('dxrd-page-brick-clickable', this.brickClickable);
+            this._templateEngine.register('dxrd-parameters-separator', this.separator);
+            this._templateEngine.register('dxrp-editing-field-container', this.textEditingFieldContainer);
+            this._templateEngine.register('dxrp-editing-field-text', this.textEditingField);
+            this._templateEngine.register('dxrp-editing-field-mask', this.textEditingFieldMask);
+            this._templateEngine.register('dxrp-editing-field-datetime', this.textEditingFieldDate);
+            this._templateEngine.register('dxrp-editing-field-number', this.textEditingFieldNumber);
+            this._templateEngine.register('dxrp-character-comb-editing-field', this.characterCombEditingField);
+            this._templateEngine.register('dxrp-editing-field-checkbox', this.checkEditingField);
+            this._templateEngine.register('dxrp-editing-field-radio', this.radioEditingField);
+            this._templateEngine.register('dxrp-editing-field-image', this.imageEditingField);
+            this._templateEngine.register('dxrp-editing-field-image-editor', this.imageEditingFieldEditor);
+            this._templateEngine.register('dxrp-popup-editing-field-image', this.popupImageEditingField);
+            this._templateEngine.register('dx-picture-editing-toolbar-popup', this.pictureEditingToolbarPopup);
+            this._templateEngine.register('dx-picture-editing-brush-options', this.pictureEditingBrushOptions);
+            this._templateEngine.register('dx-picture-editing-sizemode-alignment', this.pictureEditingSizeOptions);
+            this._templateEngine.register('dx-picture-editing-imagespicker', this.pictureEditingImagesPicker);
+            this._templateEngine.register('dx-picture-editing-imagepickerwithfilter', this.pictureEditingImagesPickerWithFilter);
+            this._templateEngine.register('dxrd-preview-progress-bar', this.progressBar);
+            this._templateEngine.register('dxrd-export-tool', this.exportTool);
+            this._templateEngine.register('dxrd-checkboxcustomglyph', this.checkboxGlyph);
+            this._templateEngine.register('dxrdp-surface-mobile', this.mobileSurface);
+            this._templateEngine.register('dxrd-preview-page-mobile', this.mobilePage);
+            this._templateEngine.register('dxrdp-surface-mobile-bottom', this.mobileActions);
+            this._templateEngine.register('dxrd-menu-parameters-content', this.mobileParametersPopup);
+            this._templateEngine.register('dxrv-preview-parameters-mobile', this.mobileParameters);
+            this._templateEngine.register('dxrv-range-parameter-mobile', this.mobileParametersDateRange);
+            this._templateEngine.register('dxrv-preview-date-range-mobile', this.mobileDateRange);
+            this._templateEngine.register('dxrd-menu-export-content', this.mobileExport);
+            this._templateEngine.register('dxrdp-search-mobile', this.mobilesearch);
+            this._templateEngine.register('dxrdp-pages-mobile', this.mobilepaginator);
+        };
+        return ViewerTemplatesComponent;
+    }());
+    ViewerTemplatesComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ViewerTemplatesComponent, deps: [{ token: TemplateEngine }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ViewerTemplatesComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ViewerTemplatesComponent, selector: "dxv-templates", viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "exportAction", first: true, predicate: ["exportAction"], descendants: true }, { propertyName: "pagerAction", first: true, predicate: ["pagerAction"], descendants: true }, { propertyName: "zoomAction", first: true, predicate: ["zoomAction"], descendants: true }, { propertyName: "parameters", first: true, predicate: ["parameters"], descendants: true }, { propertyName: "editor", first: true, predicate: ["editor"], descendants: true }, { propertyName: "multivalue", first: true, predicate: ["multivalue"], descendants: true }, { propertyName: "multivalueEditable", first: true, predicate: ["multivalueEditable"], descendants: true }, { propertyName: "signatureEditor", first: true, predicate: ["signatureEditor"], descendants: true }, { propertyName: "exportOptions", first: true, predicate: ["exportoptions"], descendants: true }, { propertyName: "documentMap", first: true, predicate: ["documentmap"], descendants: true }, { propertyName: "daterangeinput", first: true, predicate: ["daterangeinput"], descendants: true }, { propertyName: "daterangePopup", first: true, predicate: ["daterangeepopup"], descendants: true }, { propertyName: "daterangeecalendar", first: true, predicate: ["daterangeecalendar"], descendants: true }, { propertyName: "surface", first: true, predicate: ["surface"], descendants: true }, { propertyName: "page", first: true, predicate: ["page"], descendants: true }, { propertyName: "editorContent", first: true, predicate: ["editorContent"], descendants: true }, { propertyName: "groupEditor", first: true, predicate: ["groupEditor"], descendants: true }, { propertyName: "search", first: true, predicate: ["search"], descendants: true }, { propertyName: "brick", first: true, predicate: ["brick"], descendants: true }, { propertyName: "brickClickable", first: true, predicate: ["brickClickable"], descendants: true }, { propertyName: "separator", first: true, predicate: ["separator"], descendants: true }, { propertyName: "textEditingFieldContainer", first: true, predicate: ["textEditingFieldContainer"], descendants: true }, { propertyName: "textEditingField", first: true, predicate: ["textEditingField"], descendants: true }, { propertyName: "textEditingFieldDate", first: true, predicate: ["textEditingFieldDate"], descendants: true }, { propertyName: "textEditingFieldMask", first: true, predicate: ["textEditingFieldMask"], descendants: true }, { propertyName: "textEditingFieldNumber", first: true, predicate: ["textEditingFieldNumber"], descendants: true }, { propertyName: "characterCombEditingField", first: true, predicate: ["characterCombEditingField"], descendants: true }, { propertyName: "checkEditingField", first: true, predicate: ["checkEditingField"], descendants: true }, { propertyName: "radioEditingField", first: true, predicate: ["radioEditingField"], descendants: true }, { propertyName: "imageEditingField", first: true, predicate: ["imageEditingField"], descendants: true }, { propertyName: "imageEditingFieldEditor", first: true, predicate: ["imageEditingFieldEditor"], descendants: true }, { propertyName: "popupImageEditingField", first: true, predicate: ["popupImageEditingField"], descendants: true }, { propertyName: "pictureEditingToolbarPopup", first: true, predicate: ["pictureEditingToolbarPopup"], descendants: true }, { propertyName: "pictureEditingBrushOptions", first: true, predicate: ["pictureEditingBrushOptions"], descendants: true }, { propertyName: "pictureEditingSizeOptions", first: true, predicate: ["pictureEditingSizeOptions"], descendants: true }, { propertyName: "pictureEditingImagesPicker", first: true, predicate: ["pictureEditingImagesPicker"], descendants: true }, { propertyName: "pictureEditingImagesPickerWithFilter", first: true, predicate: ["pictureEditingImagesPickerWithFilter"], descendants: true }, { propertyName: "progressBar", first: true, predicate: ["progressBar"], descendants: true }, { propertyName: "exportTool", first: true, predicate: ["exportTool"], descendants: true }, { propertyName: "checkboxGlyph", first: true, predicate: ["checkboxglyph"], descendants: true }, { propertyName: "mobileSurface", first: true, predicate: ["mobilesurface"], descendants: true }, { propertyName: "mobilePage", first: true, predicate: ["mobilepage"], descendants: true }, { propertyName: "mobileActions", first: true, predicate: ["mobileactions"], descendants: true }, { propertyName: "mobileParameters", first: true, predicate: ["mobileparameters"], descendants: true }, { propertyName: "mobileParametersPopup", first: true, predicate: ["mobileparameterspopup"], descendants: true }, { propertyName: "mobileParametersDateRange", first: true, predicate: ["mobileparametersdaterange"], descendants: true }, { propertyName: "mobileDateRange", first: true, predicate: ["mobiledaterange"], descendants: true }, { propertyName: "mobileExport", first: true, predicate: ["mobileexport"], descendants: true }, { propertyName: "mobilesearch", first: true, predicate: ["mobilesearch"], descendants: true }, { propertyName: "mobilepaginator", first: true, predicate: ["mobilepaginator"], descendants: true }], ngImport: i0__namespace, template: "<ng-template #exportAction let-data=\"data\">\n    <dxv-toolbar-export [data]=\"data\"></dxv-toolbar-export>\n</ng-template>\n\n<ng-template #pagerAction let-data=\"data\">\n    <dxv-toolbar-pager [data]=\"data\"></dxv-toolbar-pager>\n</ng-template>\n\n<ng-template #zoomAction let-data=\"data\">\n    <dxv-toolbar-zoom [data]=\"data\"></dxv-toolbar-zoom>\n</ng-template>\n\n<ng-template #toolbar let-data=\"data\">\n    <dxv-toolbar [data]=\"data\"></dxv-toolbar>\n</ng-template>\n\n<ng-template #parameters let-data=\"data\">\n    <dxv-parameters [data]=\"data\"></dxv-parameters>\n</ng-template>\n\n<ng-template #editor let-data=\"data\">\n    <dxv-editor [data]=\"data\"></dxv-editor>\n</ng-template>\n\n<ng-template #multivalue let-data=\"data\">\n    <dxv-multivalue [data]=\"data\"></dxv-multivalue>\n</ng-template>\n\n<ng-template #exportoptions let-data=\"data\">\n    <dxv-export-options [data]=\"data\"></dxv-export-options>\n</ng-template>\n\n<ng-template #checkEditingField let-data=\"data\">\n    <dxv-editing-field-checkbox [data]=\"data\"></dxv-editing-field-checkbox>\n</ng-template>\n\n<ng-template #radioEditingField let-data=\"data\">\n    <dxv-editing-field-radio [data]=\"data\"></dxv-editing-field-radio>\n</ng-template>\n\n<ng-template #characterCombEditingField let-data=\"data\">\n    <dxv-editing-field-character-comb [data]=\"data\"></dxv-editing-field-character-comb>\n</ng-template>\n\n<ng-template #textEditingField let-data=\"data\">\n    <dxv-editing-field-text [data]=\"data\"></dxv-editing-field-text>\n</ng-template>\n\n<ng-template #textEditingFieldMask let-data=\"data\">\n    <dxv-editing-field-mask [data]=\"data\"></dxv-editing-field-mask>\n</ng-template>\n\n<ng-template #textEditingFieldDate let-data=\"data\">\n    <dxv-editing-field-datetime [data]=\"data\"></dxv-editing-field-datetime>\n</ng-template>\n\n<ng-template #textEditingFieldNumber let-data=\"data\">\n    <dxv-editing-field-number [data]=\"data\"></dxv-editing-field-number>\n</ng-template>\n\n<ng-template #textEditingFieldContainer let-data=\"data\">\n    <dxv-editing-field-container [data]=\"data\"></dxv-editing-field-container>\n</ng-template>\n\n<ng-template #imageEditingField let-data=\"data\">\n    <dxv-image-editing-field [data]=\"data\"></dxv-image-editing-field>\n</ng-template>\n\n<ng-template #imageEditingFieldEditor let-data=\"data\">\n    <dxv-image-editing-field-editor [data]=\"data\"></dxv-image-editing-field-editor>\n</ng-template>\n\n<ng-template #popupImageEditingField let-data=\"data\">\n    <dxv-popup-image-editing-field [data]=\"data\"></dxv-popup-image-editing-field>\n</ng-template>\n\n<ng-template #pictureEditingToolbarPopup let-data=\"data\">\n    <dxv-picture-editor-toolbar-popup [data]=\"data\"></dxv-picture-editor-toolbar-popup>\n</ng-template>\n\n<ng-template #pictureEditingBrushOptions let-data=\"data\">\n    <dxv-picture-editing-brush-options [data]=\"data\"></dxv-picture-editing-brush-options>\n</ng-template>\n\n<ng-template #pictureEditingSizeOptions let-data=\"data\">\n    <dxv-picture-editing-size-options [data]=\"data\"></dxv-picture-editing-size-options>\n</ng-template>\n\n<ng-template #pictureEditingImagesPicker let-data=\"data\">\n    <dxv-picture-editing-imagespicker [data]=\"data\"></dxv-picture-editing-imagespicker>\n</ng-template>\n\n<ng-template #pictureEditingImagesPickerWithFilter let-data=\"data\">\n    <dxv-picture-editing-imagespickerwithfilter [data]=\"data\"></dxv-picture-editing-imagespickerwithfilter>\n</ng-template>\n\n<ng-template #documentmap let-data=\"data\">\n    <dxv-document-map [data]=\"data\"></dxv-document-map>\n</ng-template>\n\n<ng-template #multivalueEditable let-data=\"data\">\n    <dxv-multivalue-editable [data]=\"data\"></dxv-multivalue-editable>\n</ng-template>\n\n<ng-template #signatureEditor let-data=\"data\">\n    <dxv-signature-editor [data]=\"data\"></dxv-signature-editor>\n</ng-template>\n\n<ng-template #daterangeinput let-data=\"data\">\n    <dxv-date-range [data]=\"data\"></dxv-date-range>\n</ng-template>\n\n<ng-template #daterangeepopup let-data=\"data\">\n    <dxv-daterange-popup [data]=\"data\"></dxv-daterange-popup>\n</ng-template>\n\n<ng-template #daterangeecalendar let-data=\"data\">\n    <dxv-daterange-calendar [data]=\"data\"></dxv-daterange-calendar>\n</ng-template>\n\n<ng-template #surface let-data=\"data\">\n    <dxv-surface [data]=\"data\"></dxv-surface>\n</ng-template>\n\n<ng-template #page let-data=\"data\">\n    <dxv-page [data]=\"data\"></dxv-page>\n</ng-template>\n\n<ng-template #editorContent let-data=\"data\">\n    <dxv-editor-content [data]=\"data\"></dxv-editor-content>\n</ng-template>\n\n<ng-template #groupEditor let-data=\"data\">\n    <dxv-group-editor [data]=\"data\"></dxv-group-editor>\n</ng-template>\n\n<ng-template #search let-data=\"data\">\n    <dxv-search [data]=\"data\"></dxv-search>\n</ng-template>\n\n<ng-template #brick let-data=\"data\">\n    <dxv-brick [data]=\"data\"></dxv-brick>\n</ng-template>\n\n<ng-template #brickClickable let-data=\"data\">\n    <dxv-brick-clickable [data]=\"data\"></dxv-brick-clickable>\n</ng-template>\n\n<ng-template #exportTool let-data=\"data\">\n    <dxv-export-tool [data]=\"data\"></dxv-export-tool>\n</ng-template>\n\n<ng-template #separator let-data=\"data\">\n    <div class=\"dxrd-parameters-item-separator\">\n        <div class=\"dxrd-item-separator dxd-border-secondary\"></div>\n    </div>\n</ng-template>\n\n<ng-template #progressBar let-data=\"data\">\n    <dxv-progress-bar [data]=\"data\"></dxv-progress-bar>\n</ng-template>\n\n<ng-template #checkboxglyph let-data=\"data\">\n    <dxv-editing-field-checkbox-glyph [data]=\"data\"></dxv-editing-field-checkbox-glyph>\n</ng-template>\n\n<ng-template #mobilesurface let-data=\"data\">\n    <dxv-mobile-surface [data]=\"data\"></dxv-mobile-surface>\n</ng-template>\n\n<ng-template #mobilepage let-data=\"data\">\n    <dxv-mobile-page [data]=\"data\"></dxv-mobile-page>\n</ng-template>\n\n<ng-template #mobileactions let-data=\"data\">\n    <dxv-mobile-actions [data]=\"data\"></dxv-mobile-actions>\n</ng-template>\n\n<ng-template #mobileparameters let-data=\"data\">\n    <dxv-mobile-parameters [data]=\"data\"></dxv-mobile-parameters>\n</ng-template>\n\n<ng-template #mobileparameterspopup let-data=\"data\">\n    <dxv-mobile-parameters-popup [data]=\"data\"></dxv-mobile-parameters-popup>\n</ng-template>\n\n<ng-template #mobileparametersdaterange let-data=\"data\">\n    <dxv-mobile-parameters-daterange [data]=\"data\"></dxv-mobile-parameters-daterange>\n</ng-template>\n\n<ng-template #mobiledaterange let-data=\"data\">\n    <dxv-date-range-mobile [data]=\"data\"></dxv-date-range-mobile>\n</ng-template>\n\n<ng-template #mobileexport let-data=\"data\">\n    <dxv-mobile-actions-export [data]=\"data\"></dxv-mobile-actions-export>\n</ng-template>\n\n<ng-template #mobilesearch let-data=\"data\">\n    <dxv-search-mobile [data]=\"data\"></dxv-search-mobile>\n</ng-template>\n\n<ng-template #mobilepaginator let-data=\"data\">\n    <dxv-pages-mobile [data]=\"data\"></dxv-pages-mobile>\n</ng-template>", components: [{ type: ExportComponent, selector: "dxv-toolbar-export", inputs: ["data"] }, { type: PagerComponent, selector: "dxv-toolbar-pager", inputs: ["data"] }, { type: ZoomComponent, selector: "dxv-toolbar-zoom", inputs: ["data"] }, { type: ToolbarContentComponent, selector: "dxv-toolbar", inputs: ["data"] }, { type: ParameterspanelComponent, selector: "dxv-parameters", inputs: ["data"] }, { type: EditorComponent, selector: "dxv-editor" }, { type: MultiValueComponent, selector: "dxv-multivalue" }, { type: ExportOptionsComponent, selector: "dxv-export-options", inputs: ["data"] }, { type: CheckEditingFieldComponent, selector: "dxv-editing-field-checkbox", inputs: ["data"] }, { type: RadioEditingFieldComponent, selector: "dxv-editing-field-radio", inputs: ["data"] }, { type: CharacterCombEditingFieldComponent, selector: "dxv-editing-field-character-comb", inputs: ["data"] }, { type: TextEditingFieldComponent, selector: "dxv-editing-field-text", inputs: ["data"] }, { type: TextEditingFieldMaskComponent, selector: "dxv-editing-field-mask", inputs: ["data"] }, { type: TextEditingFieldDateBoxComponent, selector: "dxv-editing-field-datetime", inputs: ["data"] }, { type: TextEditingFieldNumberComponent, selector: "dxv-editing-field-number", inputs: ["data"] }, { type: TextEditingFieldContainerComponent, selector: "dxv-editing-field-container", inputs: ["data"] }, { type: ImageEditingFieldComponent, selector: "dxv-image-editing-field", inputs: ["data"] }, { type: ImageEditingFieldEditorComponent, selector: "dxv-image-editing-field-editor", inputs: ["data"] }, { type: PopupImageEditingFieldComponent, selector: "dxv-popup-image-editing-field", inputs: ["data"] }, { type: PictureEditorToolBarPopupComponent, selector: "dxv-picture-editor-toolbar-popup", inputs: ["data"] }, { type: PictureEditorBrushOptionsComponent, selector: "dxv-picture-editing-brush-options", inputs: ["data"] }, { type: PictureEditorSizeOptionsComponent, selector: "dxv-picture-editing-size-options", inputs: ["data"] }, { type: PictureEditorImagespickerComponent, selector: "dxv-picture-editing-imagespicker", inputs: ["data"] }, { type: PictureEditorImagespickerWithFilterComponent, selector: "dxv-picture-editing-imagespickerwithfilter" }, { type: DocumentMapComponent, selector: "dxv-document-map", inputs: ["data"] }, { type: MultiValueEditableComponent, selector: "dxv-multivalue-editable" }, { type: SignatureEditorComponent, selector: "dxv-signature-editor" }, { type: DateRangeComponent, selector: "dxv-date-range", inputs: ["data"] }, { type: PopupContainerComponent, selector: "dxv-daterange-popup", inputs: ["data"] }, { type: CalendarComponent, selector: "dxv-daterange-calendar", inputs: ["data"] }, { type: SurfaceComponent, selector: "dxv-surface", inputs: ["data"] }, { type: PageComponent, selector: "dxv-page", inputs: ["data"] }, { type: EditorContentComponent, selector: "dxv-editor-content", inputs: ["data"] }, { type: GroupEditorComponent, selector: "dxv-group-editor", inputs: ["data"] }, { type: SearchComponent, selector: "dxv-search", inputs: ["data"] }, { type: BrickComponent, selector: "dxv-brick", inputs: ["data"] }, { type: BrickClickableComponent, selector: "dxv-brick-clickable", inputs: ["data"] }, { type: ExportToolComponent, selector: "dxv-export-tool", inputs: ["data"] }, { type: ProgressBarComponent, selector: "dxv-progress-bar", inputs: ["data"] }, { type: EditingFieldCheckboxGlyphComponent, selector: "dxv-editing-field-checkbox-glyph", inputs: ["data"] }, { type: MobileSurfaceComponent, selector: "dxv-mobile-surface", inputs: ["data"] }, { type: MobilePageComponent, selector: "dxv-mobile-page", inputs: ["data"] }, { type: MobileActionsComponent, selector: "dxv-mobile-actions", inputs: ["data"] }, { type: MobileParametersComponent, selector: "dxv-mobile-parameters", inputs: ["data"] }, { type: MobileParametersPopupComponent, selector: "dxv-mobile-parameters-popup", inputs: ["data"] }, { type: MobileParametersDateRangeComponent, selector: "dxv-mobile-parameters-daterange" }, { type: DateRangeMobileComponent, selector: "dxv-date-range-mobile", inputs: ["data"] }, { type: MobileActionsExportComponent, selector: "dxv-mobile-actions-export", inputs: ["data"] }, { type: MobileSearchComponent, selector: "dxv-search-mobile", inputs: ["data"] }, { type: MobilePaginatorComponent, selector: "dxv-pages-mobile", inputs: ["data"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ViewerTemplatesComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'dxv-templates',
+                        templateUrl: './templates.component.html'
+                    }]
+            }], ctorParameters: function () { return [{ type: TemplateEngine }]; }, propDecorators: { toolbar: [{
+                    type: i0.ViewChild,
+                    args: ['toolbar']
+                }], exportAction: [{
+                    type: i0.ViewChild,
+                    args: ['exportAction']
+                }], pagerAction: [{
+                    type: i0.ViewChild,
+                    args: ['pagerAction']
+                }], zoomAction: [{
+                    type: i0.ViewChild,
+                    args: ['zoomAction']
+                }], parameters: [{
+                    type: i0.ViewChild,
+                    args: ['parameters']
+                }], editor: [{
+                    type: i0.ViewChild,
+                    args: ['editor']
+                }], multivalue: [{
+                    type: i0.ViewChild,
+                    args: ['multivalue']
+                }], multivalueEditable: [{
+                    type: i0.ViewChild,
+                    args: ['multivalueEditable']
+                }], signatureEditor: [{
+                    type: i0.ViewChild,
+                    args: ['signatureEditor']
+                }], exportOptions: [{
+                    type: i0.ViewChild,
+                    args: ['exportoptions']
+                }], documentMap: [{
+                    type: i0.ViewChild,
+                    args: ['documentmap']
+                }], daterangeinput: [{
+                    type: i0.ViewChild,
+                    args: ['daterangeinput']
+                }], daterangePopup: [{
+                    type: i0.ViewChild,
+                    args: ['daterangeepopup']
+                }], daterangeecalendar: [{
+                    type: i0.ViewChild,
+                    args: ['daterangeecalendar']
+                }], surface: [{
+                    type: i0.ViewChild,
+                    args: ['surface']
+                }], page: [{
+                    type: i0.ViewChild,
+                    args: ['page']
+                }], editorContent: [{
+                    type: i0.ViewChild,
+                    args: ['editorContent']
+                }], groupEditor: [{
+                    type: i0.ViewChild,
+                    args: ['groupEditor']
+                }], search: [{
+                    type: i0.ViewChild,
+                    args: ['search']
+                }], brick: [{
+                    type: i0.ViewChild,
+                    args: ['brick']
+                }], brickClickable: [{
+                    type: i0.ViewChild,
+                    args: ['brickClickable']
+                }], separator: [{
+                    type: i0.ViewChild,
+                    args: ['separator']
+                }], textEditingFieldContainer: [{
+                    type: i0.ViewChild,
+                    args: ['textEditingFieldContainer']
+                }], textEditingField: [{
+                    type: i0.ViewChild,
+                    args: ['textEditingField']
+                }], textEditingFieldDate: [{
+                    type: i0.ViewChild,
+                    args: ['textEditingFieldDate']
+                }], textEditingFieldMask: [{
+                    type: i0.ViewChild,
+                    args: ['textEditingFieldMask']
+                }], textEditingFieldNumber: [{
+                    type: i0.ViewChild,
+                    args: ['textEditingFieldNumber']
+                }], characterCombEditingField: [{
+                    type: i0.ViewChild,
+                    args: ['characterCombEditingField']
+                }], checkEditingField: [{
+                    type: i0.ViewChild,
+                    args: ['checkEditingField']
+                }], radioEditingField: [{
+                    type: i0.ViewChild,
+                    args: ['radioEditingField']
+                }], imageEditingField: [{
+                    type: i0.ViewChild,
+                    args: ['imageEditingField']
+                }], imageEditingFieldEditor: [{
+                    type: i0.ViewChild,
+                    args: ['imageEditingFieldEditor']
+                }], popupImageEditingField: [{
+                    type: i0.ViewChild,
+                    args: ['popupImageEditingField']
+                }], pictureEditingToolbarPopup: [{
+                    type: i0.ViewChild,
+                    args: ['pictureEditingToolbarPopup']
+                }], pictureEditingBrushOptions: [{
+                    type: i0.ViewChild,
+                    args: ['pictureEditingBrushOptions']
+                }], pictureEditingSizeOptions: [{
+                    type: i0.ViewChild,
+                    args: ['pictureEditingSizeOptions']
+                }], pictureEditingImagesPicker: [{
+                    type: i0.ViewChild,
+                    args: ['pictureEditingImagesPicker']
+                }], pictureEditingImagesPickerWithFilter: [{
+                    type: i0.ViewChild,
+                    args: ['pictureEditingImagesPickerWithFilter']
+                }], progressBar: [{
+                    type: i0.ViewChild,
+                    args: ['progressBar']
+                }], exportTool: [{
+                    type: i0.ViewChild,
+                    args: ['exportTool']
+                }], checkboxGlyph: [{
+                    type: i0.ViewChild,
+                    args: ['checkboxglyph']
+                }], mobileSurface: [{
+                    type: i0.ViewChild,
+                    args: ['mobilesurface']
+                }], mobilePage: [{
+                    type: i0.ViewChild,
+                    args: ['mobilepage']
+                }], mobileActions: [{
+                    type: i0.ViewChild,
+                    args: ['mobileactions']
+                }], mobileParameters: [{
+                    type: i0.ViewChild,
+                    args: ['mobileparameters']
+                }], mobileParametersPopup: [{
+                    type: i0.ViewChild,
+                    args: ['mobileparameterspopup']
+                }], mobileParametersDateRange: [{
+                    type: i0.ViewChild,
+                    args: ['mobileparametersdaterange']
+                }], mobileDateRange: [{
+                    type: i0.ViewChild,
+                    args: ['mobiledaterange']
+                }], mobileExport: [{
+                    type: i0.ViewChild,
+                    args: ['mobileexport']
+                }], mobilesearch: [{
+                    type: i0.ViewChild,
+                    args: ['mobilesearch']
+                }], mobilepaginator: [{
+                    type: i0.ViewChild,
+                    args: ['mobilepaginator']
+                }] } });
+
     var DxReportViewerComponent = /** @class */ (function (_super) {
         __extends(DxReportViewerComponent, _super);
-        function DxReportViewerComponent(renderer, platformId) {
+        function DxReportViewerComponent(renderer, platformId, _viewer, _cd, _accessibilitySettings) {
             var _this = _super.call(this, renderer, platformId) || this;
-            _this.koReportUrl = ko__namespace.observable();
+            _this._viewer = _viewer;
+            _this._cd = _cd;
+            _this._accessibilitySettings = _accessibilitySettings;
+            _this._reportUrl = '';
             return _this;
         }
         DxReportViewerComponent.prototype.getKoBinding = function (options) {
-            return new dxWebdocumentviewer.JSReportViewerBinding(options, this.getEventRaiser());
+            return new jsReportViewerBinding.JSReportViewerBinding(options, this.getEventRaiser(), false);
         };
         DxReportViewerComponent.prototype.getCallbacks = function () {
             return this.callbacksComponent;
@@ -753,7 +3612,7 @@
                 developmentMode: this.developmentMode,
                 isMobile: this.isMobile,
                 accessibilityCompliant: this.accessibilityCompliant,
-                reportUrl: this.koReportUrl,
+                reportUrl: this._reportUrl,
                 requestOptions: this.requestOptionsComponent,
                 mobileModeSettings: this.mobileModeSettingsComponent,
                 remoteSettings: this.remoteSettingsComponent,
@@ -768,26 +3627,55 @@
         DxReportViewerComponent.prototype.GetPreviewModel = function () {
             return this.bindingSender.GetPreviewModel();
         };
+        DxReportViewerComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            var _a;
+            _super.prototype.ngAfterViewInit.call(this);
+            this.model = this._koBinding.sender;
+            this.viewModel = (_a = this.model.GetPreviewModel()) === null || _a === void 0 ? void 0 : _a.getViewModel();
+            this._disposableCallback = this.model.events.on('propertyChanged', function (args) {
+                if (args.propertyName === 'previewModel') {
+                    _this.viewModel = _this.model.GetPreviewModel().getViewModel();
+                }
+            });
+            this._cd.detectChanges();
+        };
+        DxReportViewerComponent.prototype.ngOnDestroy = function () {
+            this._disposableCallback && this._disposableCallback();
+            _super.prototype.ngOnDestroy.call(this);
+        };
+        Object.defineProperty(DxReportViewerComponent.prototype, "accessibilityCompliant", {
+            get: function () {
+                return this._accessibilitySettings.accessibilityCompliant;
+            },
+            set: function (value) {
+                this._accessibilitySettings.accessibilityCompliant = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(DxReportViewerComponent.prototype, "reportUrl", {
             get: function () {
-                return this.koReportUrl();
+                return this._reportUrl;
             },
             set: function (reportUrl) {
-                this.koReportUrl(reportUrl);
+                this._reportUrl = reportUrl;
+                if (this.bindingSender)
+                    this.bindingSender.OpenReport(reportUrl);
             },
             enumerable: false,
             configurable: true
         });
         return DxReportViewerComponent;
     }(core.DxReportingComponent));
-    DxReportViewerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DxReportViewerComponent, deps: [{ token: i0__namespace.Renderer2 }, { token: i0.PLATFORM_ID }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    DxReportViewerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DxReportViewerComponent, selector: "dx-report-viewer", inputs: { isMobile: "isMobile", accessibilityCompliant: "accessibilityCompliant", keepReportOnComponentDisposal: "keepReportOnComponentDisposal", reportUrl: "reportUrl" }, 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__namespace, template: "<div #control [ngClass]=\"cssClass\" [ngStyle]=\"{'width': width, 'height': height }\">\n  <div data-bind=\"dxReportViewer: $data\"></div>\n</div>", directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
+    DxReportViewerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DxReportViewerComponent, deps: [{ token: i0__namespace.Renderer2 }, { token: i0.PLATFORM_ID }, { token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: AccessibilitySettings }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    DxReportViewerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DxReportViewerComponent, selector: "dx-report-viewer", inputs: { isMobile: "isMobile", accessibilityCompliant: "accessibilityCompliant", keepReportOnComponentDisposal: "keepReportOnComponentDisposal", 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__namespace, 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>", components: [{ type: TemplatesComponent, selector: "dxa-templates" }, { type: ViewerTemplatesComponent, selector: "dxv-templates" }, { type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
     __decorate([
         core._inputConverter(core._booleanConverter)
     ], DxReportViewerComponent.prototype, "isMobile", void 0);
     __decorate([
         core._inputConverter(core._booleanConverter)
-    ], DxReportViewerComponent.prototype, "accessibilityCompliant", void 0);
+    ], DxReportViewerComponent.prototype, "accessibilityCompliant", null);
     __decorate([
         core._inputConverter(core._booleanConverter)
     ], DxReportViewerComponent.prototype, "keepReportOnComponentDisposal", void 0);
@@ -795,15 +3683,15 @@
                 type: i0.Component,
                 args: [{
                         selector: 'dx-report-viewer',
-                        encapsulation: i0.ViewEncapsulation.None,
                         templateUrl: './dx-report-viewer.component.html',
-                        styleUrls: []
+                        styleUrls: [],
+                        providers: [AccessibilitySettings]
                     }]
             }], ctorParameters: function () {
             return [{ type: i0__namespace.Renderer2 }, { type: Object, decorators: [{
                             type: i0.Inject,
                             args: [i0.PLATFORM_ID]
-                        }] }];
+                        }] }, { type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: AccessibilitySettings }];
         }, propDecorators: { requestOptionsComponent: [{
                     type: i0.ContentChild,
                     args: [DxReportViewerRequestOptionsComponent]
@@ -852,7 +3740,120 @@
             DxReportViewerProgressBarSettingsComponent,
             DxReportViewerExportSettingsComponent,
             DxReportViewerTabPanelSettingsComponent,
-            DxReportViewerSearchSettingsComponent], imports: [i1.CommonModule], exports: [DxReportViewerComponent,
+            DxReportViewerSearchSettingsComponent,
+            TabpanelComponent,
+            PropertygridComponent,
+            TreelistComponent,
+            TreeListGroupComponent,
+            TreeListItemComponent,
+            TreeListHeaderItemComponent,
+            TreeListItemTextComponent,
+            TreeListHeaderItemCaptionContentComponent,
+            DateEditorComponent,
+            CollectionEditorComponent,
+            ParameterspanelComponent,
+            TemplatesComponent,
+            ActionsComponent,
+            ImageTemplateComponent,
+            TemplateComponent,
+            PagerComponent,
+            ZoomComponent,
+            EditorComponentBase,
+            ExportComponent,
+            ViewerTemplatesComponent,
+            ToolbarContentComponent,
+            EditorComponent,
+            MultiValueComponent,
+            TextBoxEditorComponent,
+            SelectBoxComponent,
+            BoolSelectComponent,
+            ExportOptionsComponent,
+            ObjectEditorComponent,
+            BooleanEditorComponent,
+            LocalizedSelectBoxComponent,
+            NumericEditorComponent,
+            ColorPickerComponent,
+            DxActionDirective,
+            MultiValueEditableComponent,
+            DesignerComponent,
+            DateRangeComponent,
+            PopupContainerComponent,
+            CalendarComponent,
+            SurfaceComponent,
+            PageComponent,
+            LazyImagesDirective,
+            EditorContentComponent,
+            GroupEditorComponent,
+            SearchComponent,
+            DocumentMapComponent,
+            TextEditingFieldComponent,
+            TextEditingFieldMaskComponent,
+            TextEditingFieldNumberComponent,
+            TextEditingFieldDateBoxComponent,
+            TextEditingFieldContainerComponent,
+            CharacterCombEditingFieldComponent,
+            CheckEditingFieldComponent,
+            RadioEditingFieldComponent,
+            ImageEditingFieldComponent,
+            ImageEditingFieldEditorComponent,
+            PopupImageEditingFieldComponent,
+            ProgressBarComponent,
+            PictureEditorComponent,
+            PictureEditorToolBarPopupComponent,
+            PictureEditorBrushOptionsComponent,
+            PictureEditorSizeOptionsComponent,
+            PictureEditorImagespickerComponent,
+            PictureEditorImagespickerWithFilterComponent,
+            PainterComponent,
+            SignatureEditorComponent,
+            BrickComponent,
+            BrickClickableComponent,
+            ExportToolComponent,
+            AutoFitDirective,
+            ToViewDirective,
+            BrickSelectionDirective,
+            ResizableDirective,
+            ZoomDirective,
+            ChildStyleDirective,
+            SearchHighlightingDirective,
+            AccordionDirective,
+            EditingFieldCheckboxGlyphComponent,
+            DxMutationObserverDirective,
+            MobileSearchBarDirective,
+            MobilePaginatorDirective,
+            LazyTemplateComponent,
+            MobileSurfaceComponent,
+            MobileSlideDirective,
+            MobileZoomDirective,
+            MobileGalleryComponent,
+            MobilePageComponent,
+            MobileActionsComponent,
+            MobileParametersPopupComponent,
+            MobileParametersComponent,
+            MobileParametersDateRangeComponent,
+            MobileActionsExportComponent,
+            MobileSearchComponent,
+            DateRangeMobileComponent,
+            MobileAutofitDirective,
+            MobilePaginatorComponent], imports: [i2.CommonModule,
+            i1.DxButtonModule,
+            i1.DxLoadIndicatorModule,
+            i1.DxScrollViewModule,
+            i1.DxSelectBoxModule,
+            i1.DxMenuModule,
+            i1.DxTagBoxModule,
+            i1.DxTextBoxModule,
+            i1.DxValidatorModule,
+            i1.DxDateBoxModule,
+            i1.DxCheckBoxModule,
+            i1.DxNumberBoxModule,
+            i1.DxColorBoxModule,
+            i1.DxPopupModule,
+            i1.DxPopoverModule,
+            i1.DxSliderModule,
+            i1.DxCalendarModule,
+            i1.DxListModule,
+            i1.DxGalleryModule], exports: [DxReportViewerComponent,
             DxReportViewerCallbacksComponent,
             DxReportViewerMobileModeSettingsComponent,
             DxReportViewerRemoteSettingsComponent,
@@ -861,12 +3862,52 @@
             DxReportViewerExportSettingsComponent,
             DxReportViewerTabPanelSettingsComponent,
             DxReportViewerSearchSettingsComponent], id: 'DxReportViewerModule' });
-    DxReportViewerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DxReportViewerModule, imports: [[i1.CommonModule]] });
+    DxReportViewerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DxReportViewerModule, providers: [TemplateEngine], imports: [[
+                i2.CommonModule,
+                i1.DxButtonModule,
+                i1.DxLoadIndicatorModule,
+                i1.DxScrollViewModule,
+                i1.DxSelectBoxModule,
+                i1.DxMenuModule,
+                i1.DxTagBoxModule,
+                i1.DxTextBoxModule,
+                i1.DxValidatorModule,
+                i1.DxDateBoxModule,
+                i1.DxCheckBoxModule,
+                i1.DxNumberBoxModule,
+                i1.DxColorBoxModule,
+                i1.DxPopupModule,
+                i1.DxPopoverModule,
+                i1.DxSliderModule,
+                i1.DxCalendarModule,
+                i1.DxListModule,
+                i1.DxGalleryModule
+            ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DxReportViewerModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         id: 'DxReportViewerModule',
-                        imports: [i1.CommonModule],
+                        imports: [
+                            i2.CommonModule,
+                            i1.DxButtonModule,
+                            i1.DxLoadIndicatorModule,
+                            i1.DxScrollViewModule,
+                            i1.DxSelectBoxModule,
+                            i1.DxMenuModule,
+                            i1.DxTagBoxModule,
+                            i1.DxTextBoxModule,
+                            i1.DxValidatorModule,
+                            i1.DxDateBoxModule,
+                            i1.DxCheckBoxModule,
+                            i1.DxNumberBoxModule,
+                            i1.DxColorBoxModule,
+                            i1.DxPopupModule,
+                            i1.DxPopoverModule,
+                            i1.DxSliderModule,
+                            i1.DxCalendarModule,
+                            i1.DxListModule,
+                            i1.DxGalleryModule
+                        ],
                         declarations: [
                             DxReportViewerComponent,
                             DxReportViewerCallbacksComponent,
@@ -876,7 +3917,102 @@
                             DxReportViewerProgressBarSettingsComponent,
                             DxReportViewerExportSettingsComponent,
                             DxReportViewerTabPanelSettingsComponent,
-                            DxReportViewerSearchSettingsComponent
+                            DxReportViewerSearchSettingsComponent,
+                            TabpanelComponent,
+                            PropertygridComponent,
+                            TreelistComponent,
+                            TreeListGroupComponent,
+                            TreeListItemComponent,
+                            TreeListHeaderItemComponent,
+                            TreeListItemTextComponent,
+                            TreeListHeaderItemCaptionContentComponent,
+                            DateEditorComponent,
+                            CollectionEditorComponent,
+                            ParameterspanelComponent,
+                            TemplatesComponent,
+                            ActionsComponent,
+                            ImageTemplateComponent,
+                            TemplateComponent,
+                            PagerComponent,
+                            ZoomComponent,
+                            EditorComponentBase,
+                            ExportComponent,
+                            ViewerTemplatesComponent,
+                            ToolbarContentComponent,
+                            EditorComponent,
+                            MultiValueComponent,
+                            TextBoxEditorComponent,
+                            SelectBoxComponent,
+                            BoolSelectComponent,
+                            ExportOptionsComponent,
+                            ObjectEditorComponent,
+                            BooleanEditorComponent,
+                            LocalizedSelectBoxComponent,
+                            NumericEditorComponent,
+                            ColorPickerComponent,
+                            DxActionDirective,
+                            MultiValueEditableComponent,
+                            DesignerComponent,
+                            DateRangeComponent,
+                            PopupContainerComponent,
+                            CalendarComponent,
+                            SurfaceComponent,
+                            PageComponent,
+                            LazyImagesDirective,
+                            EditorContentComponent,
+                            GroupEditorComponent,
+                            SearchComponent,
+                            DocumentMapComponent,
+                            TextEditingFieldComponent,
+                            TextEditingFieldMaskComponent,
+                            TextEditingFieldNumberComponent,
+                            TextEditingFieldDateBoxComponent,
+                            TextEditingFieldContainerComponent,
+                            CharacterCombEditingFieldComponent,
+                            CheckEditingFieldComponent,
+                            RadioEditingFieldComponent,
+                            ImageEditingFieldComponent,
+                            ImageEditingFieldEditorComponent,
+                            PopupImageEditingFieldComponent,
+                            ProgressBarComponent,
+                            PictureEditorComponent,
+                            PictureEditorToolBarPopupComponent,
+                            PictureEditorBrushOptionsComponent,
+                            PictureEditorSizeOptionsComponent,
+                            PictureEditorImagespickerComponent,
+                            PictureEditorImagespickerWithFilterComponent,
+                            PainterComponent,
+                            SignatureEditorComponent,
+                            BrickComponent,
+                            BrickClickableComponent,
+                            ExportToolComponent,
+                            AutoFitDirective,
+                            ToViewDirective,
+                            BrickSelectionDirective,
+                            ResizableDirective,
+                            ZoomDirective,
+                            ChildStyleDirective,
+                            SearchHighlightingDirective,
+                            AccordionDirective,
+                            EditingFieldCheckboxGlyphComponent,
+                            DxMutationObserverDirective,
+                            MobileSearchBarDirective,
+                            MobilePaginatorDirective,
+                            LazyTemplateComponent,
+                            MobileSurfaceComponent,
+                            MobileSlideDirective,
+                            MobileZoomDirective,
+                            MobileGalleryComponent,
+                            MobilePageComponent,
+                            MobileActionsComponent,
+                            MobileParametersPopupComponent,
+                            MobileParametersComponent,
+                            MobileParametersDateRangeComponent,
+                            MobileActionsExportComponent,
+                            MobileSearchComponent,
+                            DateRangeMobileComponent,
+                            MobileAutofitDirective,
+                            MobilePaginatorComponent
                         ],
                         exports: [
                             DxReportViewerComponent,
@@ -888,7 +4024,8 @@
                             DxReportViewerExportSettingsComponent,
                             DxReportViewerTabPanelSettingsComponent,
                             DxReportViewerSearchSettingsComponent
-                        ]
+                        ],
+                        providers: [TemplateEngine]
                     }]
             }] });
 
@@ -910,6 +4047,7 @@
     exports.DxReportViewerRequestOptionsComponent = DxReportViewerRequestOptionsComponent;
     exports.DxReportViewerSearchSettingsComponent = DxReportViewerSearchSettingsComponent;
     exports.DxReportViewerTabPanelSettingsComponent = DxReportViewerTabPanelSettingsComponent;
+    exports.TemplateEngine = TemplateEngine;
 
     Object.defineProperty(exports, '__esModule', { value: true });