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

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

@@ -1,11 +1,39 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Output, Input, PLATFORM_ID, ViewEncapsulation, Inject, ContentChild, NgModule } from '@angular/core';
+import { EventEmitter, Component, Output, Input, Injectable, ViewChild, Directive, HostListener, ElementRef, PLATFORM_ID, Inject, ContentChild, NgModule } from '@angular/core';
 import { __decorate } from 'tslib';
-import { JSReportViewerBinding } from 'devexpress-reporting/dx-webdocumentviewer';
-import * as ko from 'knockout';
 import { _inputConverter, _booleanConverter, DxReportingComponent } from 'devexpress-reporting-angular/core';
-import * as i1 from '@angular/common';
+import '@devexpress/analytics-core/dx-analytics-core-svg-templates';
+import 'devexpress-reporting/dx-reporting-svg-templates';
+import { JSReportViewerBinding } from 'devexpress-reporting/viewer/binding/jsReportViewerBinding';
+import { SvgTemplatesEngine } from '@devexpress/analytics-core/property-grid/widgets/internal/_svgTemplateEngine';
+import { getTemplate } from '@devexpress/analytics-core/property-grid/widgets/templateUtils';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import { initializeMutationObserver } from '@devexpress/analytics-core/accessibility/_dxMutationObserver';
+import { KeyboardEnum } from '@devexpress/analytics-core/property-grid/widgets/internal/_utils';
+import { initializeResize, initializeBaseResizableOptions } from '@devexpress/analytics-core/core/internal/_resizable';
+import { globalResolver } from '@devexpress/analytics-core/property-grid/internal/_codeResolver';
+import { InitAccordion } from '@devexpress/analytics-core/property-grid/bindings.accordion';
+import * as i1 from 'devextreme-angular';
+import { DxButtonModule, DxLoadIndicatorModule, DxScrollViewModule, DxSelectBoxModule, DxMenuModule, DxTagBoxModule, DxTextBoxModule, DxValidatorModule, DxDateBoxModule, DxCheckBoxModule, DxNumberBoxModule, DxColorBoxModule, DxPopupModule, DxPopoverModule, DxSliderModule, DxCalendarModule, DxListModule, DxGalleryModule } from 'devextreme-angular';
+import { getParentContainer } from '@devexpress/analytics-core/widgets/_utils';
+import { noDataText, getLocalization } from '@devexpress/analytics-core/property-grid/localization/_localization';
+import { CollectionEditorViewModel } from '@devexpress/analytics-core/property-grid/widgets/collectioneditor/_editor';
+import * as i4 from 'devextreme-angular/core';
+import { updateZoomBinding } from '@devexpress/analytics-core/core/_updateZoomBinding';
+import { initializeChildStyleBinding, initializeAutoFitBinding, initializeLazyImagesBinding, initializeToViewBinding, initializeViewerExportBinding } from 'devexpress-reporting/viewer/internal/_bindings';
+import { PictureEditorModel } from 'devexpress-reporting/viewer/widgets/pictureEditor/_pictureEditorModel';
+import { Painter } from 'devexpress-reporting/viewer/widgets/pictureEditor/_painter';
+import { HighlightEngine } from '@devexpress/analytics-core/widgets/_searchHighlighting';
+import { initTreeListBinding } from '@devexpress/analytics-core/widgets/treelist/_binding';
+import { DateRangeEditor } from 'devexpress-reporting/viewer/widgets/dateRange/dateRangeEditor';
+import { generateIconTemplate } from '@devexpress/analytics-core/core/widgets/_generateIconTemplate';
+import * as i2$1 from 'devextreme-angular/ui/nested';
+import { calculateWithZoomFactor } from '@devexpress/analytics-core/accessibility/_internal';
+import { getLocalization as getLocalization$1 } from '@devexpress/analytics-core/property-grid/localization/localization_utils';
+import { initializeBrickSelectionProg } from 'devexpress-reporting/viewer/internal/_previewSelection';
+import { dxGalleryExtender } from 'devexpress-reporting/viewer/mobile/internal/gallery/_galleryComponent';
+import { initializeSlideBinding, initializeMobileZoomBinding, initializeMobileSearchBinding, initializeMobilePaginatorBinding } from 'devexpress-reporting/viewer/mobile/internal/_mobileBindings';
 
 class DxReportViewerCallbacksComponent {
     constructor() {
@@ -231,13 +259,2548 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }] } });
 
+class AccessibilitySettings {
+    constructor() {
+        this.accessibilityCompliant = false;
+    }
+}
+AccessibilitySettings.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AccessibilitySettings, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+AccessibilitySettings.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AccessibilitySettings, providedIn: null });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AccessibilitySettings, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: null
+                }]
+        }] });
+
+class TemplateEngine {
+    constructor() {
+        this.templates = [];
+    }
+    register(id, ref) {
+        this.templates.push({ ref, id });
+    }
+    hasTemplate(id) {
+        let template = this.templates.find((template) => template.id === id);
+        return !!template;
+    }
+    getTemplateRef(templateId) {
+        let template = this.templates.find((template) => template.id === templateId);
+        return template ? template.ref : null;
+    }
+}
+TemplateEngine.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TemplateEngine, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TemplateEngine.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TemplateEngine, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TemplateEngine, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class ImageTemplateComponent {
+    _updateImage() {
+        const template = getTemplate(this._template);
+        if (!template)
+            console.log(`Image with ${this._template} is not found`);
+        this.image.nativeElement.innerHTML = template;
+    }
+    set template(newVal) {
+        this._template = newVal;
+        if (this.image)
+            this._updateImage();
+    }
+    ngAfterViewInit() {
+        this._updateImage();
+    }
+}
+ImageTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ImageTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ImageTemplateComponent.ɵcmp = i0.ɵɵ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, template: '<div #image></div>', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ImageTemplateComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxa-image-template',
+                    template: '<div #image></div>'
+                }]
+        }], propDecorators: { template: [{
+                type: Input,
+                args: ['template']
+            }], image: [{
+                type: ViewChild,
+                args: ['image']
+            }] } });
+
+class TemplateComponent {
+    constructor(_templateEngine, _cd) {
+        this._templateEngine = _templateEngine;
+        this._cd = _cd;
+        this.isImage = false;
+    }
+    ngAfterViewInit() {
+        const template = this._templateEngine.getTemplateRef(this.template);
+        if (!!template) {
+            this.isImage = false;
+            this.templateRef = template;
+        }
+        else if (!!SvgTemplatesEngine.getExistingTemplate(this.template)) {
+            this.isImage = true;
+        }
+        else {
+            console.log(`${this.template} is not found`);
+            return;
+        }
+        this._cd.detectChanges();
+    }
+}
+TemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TemplateComponent, deps: [{ token: TemplateEngine }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TemplateComponent, selector: "dxa-template", inputs: { data: "data", template: "template" }, ngImport: i0, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TemplateComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxa-template',
+                    templateUrl: './template.component.html'
+                }]
+        }], ctorParameters: function () { return [{ type: TemplateEngine }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }], template: [{
+                type: Input,
+                args: ['template']
+            }] } });
+
+class BaseDisposableDirective {
+    constructor(_element) {
+        this._element = _element;
+        this.eventName = 'onInit';
+        this._disposeFunc = () => void 0;
+    }
+    get element() {
+        return this._element.nativeElement;
+    }
+    ngOnInit() {
+        if (this.eventName === 'onInit') {
+            this._disposeFunc();
+            this._disposeFunc = this.InitAndReturnDisposeFunc(this._element.nativeElement);
+        }
+    }
+    ngAfterViewInit() {
+        if (this.eventName === 'afterViewInit') {
+            this._disposeFunc();
+            this._disposeFunc = this.InitAndReturnDisposeFunc(this._element.nativeElement);
+        }
+    }
+    ngOnDestroy() {
+        this._disposeFunc();
+        this._disposeFunc = undefined;
+    }
+}
+BaseDisposableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BaseDisposableDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+BaseDisposableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: BaseDisposableDirective, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BaseDisposableDirective, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+class DxMutationObserverDirective extends BaseDisposableDirective {
+    constructor(el, _accessibilitySettings) {
+        super(el);
+        this._accessibilitySettings = _accessibilitySettings;
+        this.eventName = 'afterViewInit';
+    }
+    InitAndReturnDisposeFunc(element) {
+        if (this.mutationObserverArgs)
+            return initializeMutationObserver(element, this.mutationObserverArgs, this._accessibilitySettings.accessibilityCompliant);
+        return () => void 0;
+    }
+}
+DxMutationObserverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DxMutationObserverDirective, deps: [{ token: i0.ElementRef }, { token: AccessibilitySettings }], target: i0.ɵɵFactoryTarget.Directive });
+DxMutationObserverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: { mutationObserverArgs: ["dxMutationObserver", "mutationObserverArgs"] }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DxMutationObserverDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dxMutationObserver]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: AccessibilitySettings }]; }, propDecorators: { mutationObserverArgs: [{
+                type: Input,
+                args: ['dxMutationObserver']
+            }] } });
+
+class DxActionDirective {
+    constructor() { }
+    OnClick(e) {
+        this.action.call(this.model, this.model, e);
+    }
+    OnKeyDown(e) {
+        if (e.key == KeyboardEnum.Enter || e.key == KeyboardEnum.Space) {
+            this.action.call(this.model, this.model, e);
+        }
+    }
+}
+DxActionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DxActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+DxActionDirective.ɵdir = i0.ɵɵ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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DxActionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dxAction]'
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { model: [{
+                type: Input,
+                args: ['dxActionModel']
+            }], action: [{
+                type: Input,
+                args: ['dxAction']
+            }], OnClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], OnKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+class ResizableDirective {
+    constructor(_element) {
+        this._element = _element;
+    }
+    set options(newVal) {
+        if (!this._disposeFunc && newVal) {
+            this._disposeFunc = initializeResize(this._element.nativeElement, initializeBaseResizableOptions(newVal));
+        }
+    }
+    ngOnDestroy() {
+        this._disposeFunc && this._disposeFunc();
+        this._disposeFunc = undefined;
+    }
+}
+ResizableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ResizableDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ResizableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: ResizableDirective, selector: "[dxaResizable]", inputs: { options: ["dxaResizable", "options"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ResizableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dxaResizable]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { options: [{
+                type: Input,
+                args: ['dxaResizable']
+            }] } });
+
+class TabpanelComponent {
+    constructor(_cd) {
+        this._cd = _cd;
+    }
+    ngAfterViewInit() {
+        this.resizableOptions = this.tabPanel.getResizableOptions(this.rightPanel.nativeElement, 50, 396);
+        this._cd.detectChanges();
+    }
+}
+TabpanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TabpanelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TabpanelComponent.ɵcmp = i0.ɵɵ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: ElementRef }], ngImport: i0, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DxActionDirective, selector: "[dxAction]", inputs: ["dxActionModel", "dxAction"] }, { type: ResizableDirective, selector: "[dxaResizable]", inputs: ["dxaResizable"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TabpanelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxa-tabpanel',
+                    templateUrl: './tabpanel.component.html'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { tabPanel: [{
+                type: Input,
+                args: ['data']
+            }], rightPanel: [{
+                type: ViewChild,
+                args: ['rightPanel', { read: ElementRef }]
+            }] } });
+
+class ActionsComponent {
+}
+ActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ActionsComponent, selector: "dxa-actions", inputs: { data: "data" }, ngImport: i0, 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ActionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxa-actions',
+                    templateUrl: './actions.component.html'
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class PropertygridComponent {
+    trackByFn(_, item) {
+        return item.editorInputId;
+    }
+}
+PropertygridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PropertygridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PropertygridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PropertygridComponent, selector: "dxa-propertygrid", inputs: { data: "data" }, ngImport: i0, 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PropertygridComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxa-propertygrid',
+                    templateUrl: './propertygrid.component.html'
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class TreeListItemComponent {
+}
+TreeListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TreeListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TreeListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TreeListItemComponent, selector: "dxa-treelist-item", inputs: { data: "data" }, ngImport: i0, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TreeListItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxa-treelist-item',
+                    templateUrl: './treelist-item.component.html',
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class TreeListHeaderItemComponent {
+}
+TreeListHeaderItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TreeListHeaderItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TreeListHeaderItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TreeListHeaderItemComponent, selector: "dxa-treelist-header-item", inputs: { data: "data" }, ngImport: i0, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TreeListHeaderItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxa-treelist-header-item',
+                    templateUrl: './treelist-header-item.component.html',
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class TreeListItemTextComponent {
+}
+TreeListItemTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TreeListItemTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TreeListItemTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TreeListItemTextComponent, selector: "dxa-treelist-item-text-content", inputs: { data: "data" }, ngImport: i0, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TreeListItemTextComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxa-treelist-item-text-content',
+                    templateUrl: './treelist-item-text-content.component.html',
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class TreeListHeaderItemCaptionContentComponent {
+}
+TreeListHeaderItemCaptionContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TreeListHeaderItemCaptionContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TreeListHeaderItemCaptionContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TreeListHeaderItemCaptionContentComponent, selector: "dxa-treelist-header-item-caption-content", inputs: { data: "data" }, ngImport: i0, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TreeListHeaderItemCaptionContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxa-treelist-header-item-caption-content',
+                    templateUrl: './treelist-header-item-caption-content.component.html'
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class LazyTemplateComponent extends TemplateComponent {
+    constructor() {
+        super(...arguments);
+        this._isDisposed = false;
+        this.isReady = false;
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        const resolver = this.resolver || globalResolver;
+        this.task = resolver.execute(() => {
+            if (!this._isDisposed) {
+                this.isResolved && this.isResolved(true);
+                this.isReady = true;
+                this._cd.detectChanges();
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.task.dispose();
+        this._isDisposed = true;
+    }
+}
+LazyTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LazyTemplateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+LazyTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LazyTemplateComponent, selector: "dxa-lazy-template", inputs: { resolver: "resolver", isResolved: "isResolved" }, usesInheritance: true, ngImport: i0, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LazyTemplateComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxa-lazy-template',
+                    templateUrl: './lazy.template.component.html',
+                }]
+        }], propDecorators: { resolver: [{
+                type: Input,
+                args: ['resolver']
+            }], isResolved: [{
+                type: Input,
+                args: ['isResolved']
+            }] } });
+
+class AccordionDirective extends BaseDisposableDirective {
+    constructor() {
+        super(...arguments);
+        this.eventName = 'afterViewInit';
+    }
+    InitAndReturnDisposeFunc(element) {
+        return InitAccordion(element, this.options);
+    }
+}
+AccordionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AccordionDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+AccordionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: AccordionDirective, selector: "[dxaAccordion]", inputs: { options: ["dxaAccordion", "options"] }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AccordionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dxaAccordion]'
+                }]
+        }], propDecorators: { options: [{
+                type: Input,
+                args: ['dxaAccordion']
+            }] } });
+
+class EditorComponentBase {
+    constructor(_cd) {
+        this._cd = _cd;
+    }
+    getEditorOptions() {
+        return {};
+    }
+    getOptions() {
+        return this.data.getOptions(this.getEditorOptions());
+    }
+    onPropertyChanged() {
+        const currentOptions = this.getOptions();
+        for (let 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];
+                }
+            }
+        }
+    }
+    ngAfterViewInit() {
+        if (!this.widget || !this.data.extendedOptions)
+            return;
+        const dxWidget = this.widget.instance;
+        const options = this.data.extendedOptions;
+        Object.keys(this.data.extendedOptions).forEach(x => dxWidget.option(x, options[x]));
+        this._cd.detectChanges();
+    }
+    ngOnInit() {
+        this.options = this.getOptions();
+        const model = this.data.getModel();
+        model.events.on('propertyChanged', (args) => {
+            this.onPropertyChanged();
+        });
+        this.validatorOptions = this.data.getValidatorOptions(this.data.validatorOptions || { validationRules: this.data.validationRules || [] });
+    }
+    isResolved(newVal) {
+        this.data.setIsRendered(newVal);
+    }
+}
+EditorComponentBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditorComponentBase, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+EditorComponentBase.ɵcmp = i0.ɵɵ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, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditorComponentBase, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxa-editor',
+                    templateUrl: './editor.html'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }], widget: [{
+                type: ViewChild,
+                args: ['widget']
+            }] } });
+
+class TextBoxEditorComponent extends EditorComponentBase {
+    getEditorOptions() {
+        return {
+            value: this.data.value,
+            disabled: this.data.disabled,
+            inputAttr: {
+                'aria-label': this.data.displayName,
+                'id': this.data.editorInputId
+            }
+        };
+    }
+}
+TextBoxEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TextBoxEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TextBoxEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TextBoxEditorComponent, selector: "dxa-text", usesInheritance: true, ngImport: i0, 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.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.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TextBoxEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxa-text',
+                    templateUrl: './editor.textbox.html'
+                }]
+        }] });
+
+class EditorDropDownComponentBase extends EditorComponentBase {
+    constructor(_cd) {
+        super(_cd);
+    }
+    beforeDetectChanges() {
+    }
+    ngAfterViewInit() {
+        this.container = getParentContainer(this.target.nativeElement);
+        this.currentElement = this.target.nativeElement;
+        this.beforeDetectChanges();
+        this._cd.detectChanges();
+    }
+}
+EditorDropDownComponentBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditorDropDownComponentBase, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+EditorDropDownComponentBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EditorDropDownComponentBase, selector: "ng-component", viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditorDropDownComponentBase, decorators: [{
+            type: Component,
+            args: [{
+                    template: ''
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { target: [{
+                type: ViewChild,
+                args: ['target', { read: ElementRef }]
+            }] } });
+
+class DateEditorComponent extends EditorDropDownComponentBase {
+    getEditorOptions() {
+        return {
+            value: this.data.value,
+            type: 'datetime',
+            disabled: this.data.disabled,
+            inputAttr: { 'aria-label': this.data.displayName, id: this.data.editorInputId },
+        };
+    }
+    beforeDetectChanges() {
+        this.dropDownOptions = {
+            container: this.container,
+            position: {
+                at: 'left bottom',
+                collision: 'flipfit flip',
+                my: 'left top',
+                boundary: this.container,
+                of: this.currentElement
+            }
+        };
+    }
+}
+DateEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DateEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DateEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DateEditorComponent, selector: "dxa-date", usesInheritance: true, ngImport: i0, 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.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.DxValidatorComponent, selector: "dx-validator", inputs: ["adapter", "elementAttr", "height", "name", "validationGroup", "validationRules", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValidated", "adapterChange", "elementAttrChange", "heightChange", "nameChange", "validationGroupChange", "validationRulesChange", "widthChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DateEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxa-date',
+                    templateUrl: './editor.date.html'
+                }]
+        }] });
+
+class SelectBoxComponent extends EditorDropDownComponentBase {
+    // popupPosition: Properties['popupPosition']
+    getEditorOptions() {
+        return {
+            dataSource: this.data.values,
+            value: this.data.value,
+            valueExpr: 'value',
+            displayExpr: 'displayValue',
+            // displayCustomValue: true,
+            disabled: this.data.disabled,
+            useItemTextAsTitle: true,
+            noDataText: noDataText(),
+            // encodeNoDataText: true,
+            inputAttr: { 'aria-label': this.data.displayName, id: this.data.editorInputId }
+        };
+    }
+    beforeDetectChanges() {
+        this.dropDownOptions = {
+            container: this.container,
+        };
+        // this.popupPosition = {
+        //     boundary: this.container
+        // };
+    }
+}
+SelectBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SelectBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SelectBoxComponent, selector: "dxa-selectbox", usesInheritance: true, ngImport: i0, 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.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.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectBoxComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxa-selectbox',
+                    templateUrl: './editor.selectbox.html'
+                }]
+        }] });
+
+class BoolSelectComponent extends SelectBoxComponent {
+    getEditorOptions() {
+        const selectBoxOptions = super.getEditorOptions();
+        return {
+            dataSource: [{
+                    val: true,
+                    text: getLocalization('Yes', 'AnalyticsCoreStringId.ParametersPanel_True')
+                }, {
+                    val: false, text: getLocalization('No', 'AnalyticsCoreStringId.ParametersPanel_False')
+                }],
+            inputAttr: selectBoxOptions.inputAttr,
+            valueExpr: 'val',
+            displayExpr: 'text',
+            value: selectBoxOptions.value,
+            disabled: selectBoxOptions.disabled
+        };
+    }
+}
+BoolSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BoolSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+BoolSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BoolSelectComponent, selector: "dxa-boolselect", usesInheritance: true, ngImport: i0, 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.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.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BoolSelectComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxa-boolselect',
+                    templateUrl: './editor.selectbox.html'
+                }]
+        }] });
+
+class ObjectEditorComponent {
+}
+ObjectEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ObjectEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ObjectEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ObjectEditorComponent, selector: "dxa-object-editor-content", inputs: { data: "data" }, ngImport: i0, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ObjectEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxa-object-editor-content',
+                    templateUrl: './object-editor.component.html'
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class BooleanEditorComponent extends EditorComponentBase {
+    getEditorOptions() {
+        return {
+            value: this.data.value,
+            disabled: this.data.disabled,
+            elementAttr: { 'aria-label': this.data.displayName }
+        };
+    }
+}
+BooleanEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BooleanEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+BooleanEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanEditorComponent, selector: "dxa-boolean", usesInheritance: true, ngImport: i0, 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.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.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BooleanEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxa-boolean',
+                    templateUrl: './editor.boolean.html'
+                }]
+        }] });
+
+class LocalizedSelectBoxComponent extends SelectBoxComponent {
+    getEditorOptions() {
+        return {
+            dataSource: this.data.values.map(x => ({
+                value: x.value,
+                displayValue: getLocalization(x.displayValue, x.localizationId)
+            })),
+            value: this.data.value,
+            valueExpr: 'value',
+            displayExpr: 'displayValue',
+            disabled: this.data.disabled
+        };
+    }
+}
+LocalizedSelectBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LocalizedSelectBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+LocalizedSelectBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LocalizedSelectBoxComponent, selector: "dxa-selectbox-localized", usesInheritance: true, ngImport: i0, 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.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.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LocalizedSelectBoxComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxa-selectbox-localized',
+                    templateUrl: './editor.selectbox.html'
+                }]
+        }] });
+
+class NumericEditorComponent extends EditorComponentBase {
+    getEditorOptions() {
+        return {
+            value: this.data.value,
+            showSpinButtons: true,
+            disabled: this.data.disabled,
+            inputAttr: { 'aria-label': this.data.displayName, id: this.data.editorInputId }
+        };
+    }
+}
+NumericEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NumericEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NumericEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NumericEditorComponent, selector: "dxa-numeric", usesInheritance: true, ngImport: i0, 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.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.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NumericEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxa-numeric',
+                    templateUrl: './editor.numeric.html'
+                }]
+        }] });
+
+class ColorPickerComponent extends EditorDropDownComponentBase {
+    getEditorOptions() {
+        return {
+            value: this.data.displayValue,
+            placeholder: getLocalization('(Not set)', 'ReportStringId.UD_PropertyGrid_NotSetText'),
+            editAlphaChannel: true,
+            disabled: this.data.disabled,
+            inputAttr: { 'aria-label': this.data.displayName, id: this.data.editorInputId }
+        };
+    }
+    beforeDetectChanges() {
+        super.beforeDetectChanges();
+        this.dropDownOptions = {
+            container: this.container,
+            position: {
+                at: 'left bottom',
+                collision: 'flipfit flipfit',
+                my: 'left top',
+                boundary: this.container,
+                of: this.currentElement
+            }
+        };
+    }
+}
+ColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ColorPickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ColorPickerComponent, selector: "dxa-colorpicker", usesInheritance: true, ngImport: i0, 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.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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ColorPickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxa-colorpicker',
+                    templateUrl: './editor.colorpicker.html'
+                }]
+        }] });
+
+class CollectionEditorComponent {
+    constructor() {
+    }
+    ngOnDestroy() {
+        this._model.dispose();
+    }
+    ngOnInit() {
+        this._model = new CollectionEditorViewModel(this.options);
+        this.data = this._model.getViewModel();
+    }
+    onScrollViewInitialized(args) {
+        args.component.option('useKeyboard', false);
+    }
+}
+CollectionEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CollectionEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CollectionEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CollectionEditorComponent, selector: "dxa-collectioneditor", inputs: { options: ["data", "options"], contentTemplate: "contentTemplate" }, ngImport: i0, template: "<div class=\"dx-collectioneditor\">\n    <div [dxaAccordion]=\"data\" [dxMutationObserver]=\"data.keyboardHelper\">\n        <div class=\"dx-collectioneditor-header dx-accordion-header\">\n            <div class=\"dx-editor-header\">\n                <div role=\"treeitem\"\n                    class=\"dx-field dx-accessibility-focus-border-accented dxrd-accessibility-accordion-trigger\"\n                    [attr.aria-expanded]=\"data.alwaysShow || !data.collapsed ? 'true' : 'false'\"\n                    [attr.aria-owns]=\"data.contentId\" [attr.id]=\"data.headerId\">\n                    <div *ngIf=\"data.showButtons\" class=\"dx-collectioneditor-actions-wrapper\">\n                        <dx-button *ngIf=\"data.buttons.up.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.up.action($event)\" [disabled]=\"data.buttons.up.disabled\"\n                            icon=\"dxrd-svg-operations-moveup\" iconClass=\"dx-image-moveup\"\n                            [template]=\"data.buttons.up.template\"\n                            [attr.title]=\"data.buttons.up.text\"></dx-button>\n                        <dx-button *ngIf=\"data.buttons.down.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.down.action($event)\" [disabled]=\"data.buttons.down.disabled\"\n                            icon=\"dxrd-svg-operations-movedown\" iconClass=\"dx-image-movedown\"\n                            [template]=\"data.buttons.down.template\"\n                            [attr.title]=\"data.buttons.down.text\"></dx-button>\n                        <div class=\"dx-collectioneditor-action-separator\"></div>\n                        <dx-button *ngIf=\"data.buttons.add.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.add.action($event)\" [disabled]=\"data.buttons.add.disabled\"\n                            [template]=\"data.buttons.add.template\"\n                            icon=\"dxrd-svg-operations-add\" iconClass=\"dx-image-add\"\n                            [attr.title]=\"data.buttons.add.text\"></dx-button>\n                        <dx-button *ngIf=\"data.buttons.delete.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.delete.action($event)\" [disabled]=\"data.buttons.delete.disabled\"\n                            [template]=\"data.buttons.delete.template\"\n                            icon=\"dxrd-svg-operations-remove\" iconClass=\"dx-image-remove\"\n                            [attr.title]=\"data.buttons.delete.text\"></dx-button>\n                    </div>\n                    <div *ngIf=\"!!data.displayName\" class=\"dx-collectioneditor-header-text dxd-text-primary\"\n                        [style.padding-left]=\"data.padding + 'px'\">\n                        <dxa-template class=\"propertygrid-editor-collapsed dx-collapsing-image\"\n                            template=\"dxrd-svg-collapsed\"\n                            [class.dx-image-expanded]=\"!data.collapsed \"></dxa-template>\n                        <div class=\"dx-group-header-font dxd-text-primary\" [attr.title]=\"data.displayName\">\n                            {{data.displayName}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div role=\"group\" class=\"dx-accordion-content\"\n            [attr.aria-hidden]=\"!data.alwaysShow && data.collapsed ? 'true' : 'false'\"\n            [attr.aria-labelledby]=\"data.headerId\" [attr.id]=\"data.contentId\">\n            <dx-scroll-view [hidden]=\"data.disabled\" showScrollbar=\"onHover\" [disabled]=\"!data.showScroll\"\n                [useNative]=\"false\" [scrollByThumb]=\"true\" (onInitialized)=\"onScrollViewInitialized($event)\">\n                <div *ngIf=\"data.values.length === 0\"\n                    class=\"dx-collectioneditor-empty dxd-empty-area-placeholder-text-color dxd-text-info\">\n                    <span class=\"dx-collectioneditor-empty-text\">{{data.emptyAreaText}}</span>\n                </div>\n                <div *ngIf=\"data.values.length !== 0\" class=\"dx-collectioneditor-items\">\n                    <div *ngFor=\"let value of data.values\"\n                        class=\"dx-collectioneditor-item-container dxd-button-back-color dxd-state-normal dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented\"\n                        [attr.aria-selected]=\"value.selected\" [dxActionModel]=\"value\" [dxAction]=\"value.select\"\n                        [class.dxd-state-selected]=\"value.selected\">\n                        <div class=\"dx-collection-item\">\n                            <ng-container *ngTemplateOutlet=\"contentTemplate, context: { data: value }\"></ng-container>\n                        </div>\n                    </div>\n                </div>\n            </dx-scroll-view>\n        </div>\n    </div>\n</div>", components: [{ type: i1.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.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DxActionDirective, selector: "[dxAction]", inputs: ["dxActionModel", "dxAction"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CollectionEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxa-collectioneditor',
+                    templateUrl: './collectioneditor.component.html'
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { options: [{
+                type: Input,
+                args: ['data']
+            }], contentTemplate: [{
+                type: Input,
+                args: ['contentTemplate']
+            }] } });
+
+class DesignerComponent {
+    constructor(_cd) {
+        this._cd = _cd;
+    }
+    ngAfterViewInit() {
+        this.surfaceClass = this.data['surfaceClass'](this.root.nativeElement);
+        this._cd.detectChanges();
+    }
+}
+DesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DesignerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+DesignerComponent.ɵcmp = i0.ɵɵ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, 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DesignerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxa-designer',
+                    templateUrl: './designer.component.html'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }], root: [{
+                type: ViewChild,
+                args: ['root']
+            }] } });
+
+class TemplatesComponent {
+    constructor(_templateEngine) {
+        this._templateEngine = _templateEngine;
+    }
+    ngAfterViewInit() {
+        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);
+    }
+}
+TemplatesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TemplatesComponent, deps: [{ token: TemplateEngine }], target: i0.ɵɵFactoryTarget.Component });
+TemplatesComponent.ɵcmp = i0.ɵɵ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, 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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TemplatesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxa-templates',
+                    templateUrl: './templates.component.html'
+                }]
+        }], ctorParameters: function () { return [{ type: TemplateEngine }]; }, propDecorators: { tabPanel: [{
+                type: ViewChild,
+                args: ['tabpanel']
+            }], toolbar: [{
+                type: ViewChild,
+                args: ['toolbar']
+            }], propertygrid: [{
+                type: ViewChild,
+                args: ['propertygrid']
+            }], textbox: [{
+                type: ViewChild,
+                args: ['textbox']
+            }], treelistItem: [{
+                type: ViewChild,
+                args: ['treelistitem']
+            }], treelistHeaderItem: [{
+                type: ViewChild,
+                args: ['treelistheaderitem']
+            }], treelistItemTextContent: [{
+                type: ViewChild,
+                args: ['treelistitemtextcontent']
+            }], treelistHeaderItemCaptionContent: [{
+                type: ViewChild,
+                args: ['treelistheaderitemcaptioncontent']
+            }], datebox: [{
+                type: ViewChild,
+                args: ['datebox']
+            }], selectbox: [{
+                type: ViewChild,
+                args: ['selectbox']
+            }], boolselect: [{
+                type: ViewChild,
+                args: ['boolselect']
+            }], editor: [{
+                type: ViewChild,
+                args: ['editor']
+            }], objectEditorContent: [{
+                type: ViewChild,
+                args: ['objecteditorcontent']
+            }], boolean: [{
+                type: ViewChild,
+                args: ['boolean']
+            }], localizedSelectBox: [{
+                type: ViewChild,
+                args: ['localizedSelectBox']
+            }], numeric: [{
+                type: ViewChild,
+                args: ['numeric']
+            }], colorpicker: [{
+                type: ViewChild,
+                args: ['colorpicker']
+            }], collectionEditor: [{
+                type: ViewChild,
+                args: ['collectioneditor']
+            }], designer: [{
+                type: ViewChild,
+                args: ['designer']
+            }] } });
+
+class ExportComponent {
+    constructor(_cd) {
+        this._cd = _cd;
+        this.onSubmenuShowing = (event) => { };
+    }
+    ngAfterViewInit() {
+        this.onSubmenuShowing = this.data.widget.onSubmenuShowing(this.data.getPopupContainer(this.menuComponent.nativeElement), this.menuComponent.nativeElement);
+        this._cd.detectChanges();
+    }
+}
+ExportComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ExportComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ExportComponent.ɵcmp = i0.ɵɵ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: ElementRef }], ngImport: i0, 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.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.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ExportComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-toolbar-export',
+                    templateUrl: './export.component.html',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }], menuComponent: [{
+                type: ViewChild,
+                args: ['exportElement', { read: ElementRef }]
+            }] } });
+
+class PagerComponent {
+    constructor(_element, _cd) {
+        this._element = _element;
+        this._cd = _cd;
+    }
+    ngAfterViewInit() {
+        this.dropDownOptions = Object.assign({ container: this.data.getPopupContainer(this._element.nativeElement) }, this.data.widget.dropDownOptions);
+        this._cd.detectChanges();
+    }
+}
+PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PagerComponent, selector: "dxv-toolbar-pager", inputs: { data: "data" }, ngImport: i0, 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.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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-toolbar-pager',
+                    templateUrl: './pager.component.html'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class ZoomComponent {
+    constructor(_cd) {
+        this._cd = _cd;
+    }
+    ngAfterViewInit() {
+        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();
+    }
+}
+ZoomComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ZoomComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ZoomComponent.ɵcmp = i0.ɵɵ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: ElementRef }], ngImport: i0, 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.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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ZoomComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-toolbar-zoom',
+                    templateUrl: './zoom.component.html'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }], selectBox: [{
+                type: ViewChild,
+                args: ['selectbox', { read: ElementRef }]
+            }] } });
+
+class ToolbarContentComponent {
+    onScrollViewInitialized(args) {
+        args.component.option('useKeyboard', false);
+    }
+}
+ToolbarContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ToolbarContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToolbarContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ToolbarContentComponent, selector: "dxv-toolbar", inputs: { data: "data" }, ngImport: i0, 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.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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ToolbarContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-toolbar',
+                    templateUrl: './toolbar-content.component.html'
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class ParameterspanelComponent {
+    onScrollViewInitialized(args) {
+        args.component.option('useKeyboard', false);
+    }
+    reset(args) {
+        this.data.model.restore();
+    }
+    submit(params) {
+        this.data.model.validateAndSubmit(params);
+    }
+}
+ParameterspanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ParameterspanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ParameterspanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ParameterspanelComponent, selector: "dxv-parameters", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"dxrd-preview-parameters-wrapper dxrd-preview-property-wrapper\" [hidden]=\"!(data.active && data.visible)\">\n    <div class=\"dxrd-right-panel-header dxd-text-primary\">\n        {{data.model.headerText}}\n    </div>\n    <div *ngIf=\"!data.model || data.model.isEmpty\" class=\"dxrd-group-header-parameters-empty dxd-text-primary\">\n        {{data.model.emptyText}}\n    </div>\n    <dx-scroll-view *ngIf=\"data.model || data.model.isEmpty()\" class=\"dxrd-right-panel-body\" id=\"propertiesPanel\"\n        [showScrollbar]=\"'onHover'\"\n        [useNative]=\"false\"\n        [scrollByThumb]=\"true\"\n        (onInitialized)=\"onScrollViewInitialized($event)\"\n        [dxMutationObserver]=\"data.keyboardHelper\"\n        >\n        <div role=\"tree\" class=\"dx-fieldset dxrd-right-panel-content\">\n            <dxa-template template=\"dx-propertieseditor\" [data]=\"data.propertyGrid\"></dxa-template>\n        </div>\n        <div class=\"dxrd-preview-parameter-actions-container\">\n            <dx-load-indicator class=\"dxrd-preview-parameter-action dxrd-preview-loading\"\n                [visible]=\"data.model.parametersLoading\"></dx-load-indicator>\n            <dx-button class=\"dxrd-preview-parameter-action dxrdp-parameters-reset dx-accessibility-focus-border-accented\"\n                [text]=\"data.model.resetButton.text\"\n                (onClick)=\"data.model.resetButton.onClick($event)\">\n            </dx-button>\n            <dx-button class=\"dxrd-preview-parameter-action dxrdp-parameters-submit dx-accessibility-focus-border-accented\"\n                [text]=\"data.model.submitButton.text\"\n                (onClick)=\"data.model.submitButton.onClick($event)\">\n            </dx-button>\n        </div>\n    </dx-scroll-view>\n</div>", components: [{ type: i1.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.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.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ParameterspanelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-parameters',
+                    templateUrl: './parameterspanel.component.html'
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class EditorComponent extends EditorComponentBase {
+}
+EditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EditorComponent, selector: "dxv-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"dx-editor\" [hidden]=\"!data.visible\">\n    <div class=\"dx-group\" [dxaAccordion]=\"data\">\n        <div class=\"dx-editor-header\" [class.dxrd-empty-header]=\"data.hideEditorHeader\">\n            <div *ngIf=\"!data.hideEditorHeader\" class=\"dx-field\"\n            [attr.role]=\"'treeitem'\"\n            [attr.id]=\"data.isComplexEditor && data.headerId\"\n            [attr.aria-owns]=\"data.isComplexEditor && data.contentId\"\n            [attr.aria-expanded]=\"data.isComplexEditor && (data.alwaysShow || !data.collapsed ? 'true' : 'false')\"\n            [class.dxrd-accessibility-accordion-trigger]=\"data.isComplexEditor\"\n            [class.dx-accessibility-focus-border-accented]=\"data.isComplexEditor\"\n            [class.dxrd-vertical-label]=\"data.editorOptions && data.editorOptions.hasVerticalLabel\"\n            >\n                    <div class=\"dx-field-label dxrd-group-label dx-accordion-header dxd-text-primary\"\n                    [style.padding-left]=\"data.padding['padding-left'] + 'px'\"\n                    [class.dx-accordion-empty]=\"data.templateName === 'dx-emptyHeader'\"\n                    [class.dxd-back-secondary]=\"data.isGroupLabel\"\n                    [class.dx-accordion-hide-collapsing-image]=\"data.alwaysShow\">\n                        <div *ngIf=\"data.isComplexEditor\" [attr.disabled]=\"data.templateName !== 'dx-emptyHeader'\">\n                            <dxa-template *ngIf=\"!data.alwaysShow\" \n                            template=\"dxrd-svg-collapsed\" \n                            class=\"propertygrid-editor-collapsed dx-collapsing-image\"\n                            [class.dx-image-expanded]=\"!data.collapsed\"\n                            ></dxa-template>\n                            <div *ngIf=\"!!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\" data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"></div>\n                            <div *ngIf=\"!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\">\n                                {{data.displayName}}\n                            </div>\n                        </div>\n                        <label *ngIf=\"!data.isComplexEditor && !!data.textToSearch\" \n                        class=\"propertygrid-editor-displayName\"\n                        data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"\n                        [attr.title]=\"data.displayName\"\n                        [attr.for]=\"data.editorInputId\"\n                        [class.dx-field-label-required]=\"data.isRequired\"\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\n                        ></label>\n                        <label *ngIf=\"!data.isComplexEditor && !data.textToSearch\" \n                        class=\"propertygrid-editor-displayName\"\n                        [attr.title]=\"data.displayName\"\n                        [attr.for]=\"data.editorInputId\"\n                        [class.dx-field-label-required]=\"data.isRequired\"\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\n                        >{{data.displayName}}</label>                    \n                </div>\n                <div class=\"dx-field-value\" \n                [class.dxd-border-accented]=\"data.isPropertyHighlighted\">\n                    <div data-bind=\"service: { name: 'createEditorAddOn' }\"></div>\n                    <dxa-lazy-template *ngIf=\"data.templateName !== 'dx-emptyHeader'\" [isResolved]=\"isResolved\" [template]=\"data.templateName\" [data]=\"data\"></dxa-lazy-template>\n                    <!-- ko if: templateName !== 'dx-emptyHeader' -->\n                    <!-- ko lazy: { innerBindings: { template: templateName }, isResolved: function(val) { $data.setIsRendered(val) } } -->\n                    <!-- /ko -->\n                    <!-- /ko -->\n                </div>\n            </div>\n        </div>\n        <div *ngIf=\"data.isComplexEditor\" class=\"dx-editor-content dx-accordion-content\" role=\"group\" \n            [attr.aria-labelledby]=\"data.headerId\"\n            [attr.id]=\"data.contentId\"\n            [attr.aria-hidden]=\"!data.alwaysShow && data.collapsed ? 'true' : 'false'\">\n            <dxa-template *ngIf=\"data.editorCreated\" [template]=\"data.contentTemplateName\" [data]=\"data\"></dxa-template>\n        </div>\n    </div>\n</div>", 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-editor',
+                    templateUrl: './editor.component.html'
+                }]
+        }] });
+
+class MultiValueComponent extends EditorDropDownComponentBase {
+    constructor(_cd) {
+        super(_cd);
+    }
+    getOptions() {
+        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
+        });
+    }
+    beforeDetectChanges() {
+        super.beforeDetectChanges();
+        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);
+    }
+}
+MultiValueComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MultiValueComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+MultiValueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MultiValueComponent, selector: "dxv-multivalue", usesInheritance: true, ngImport: i0, template: "<dx-tag-box #target #widget\n    [dataSource]=\"options.dataSource\"\n    [searchEnabled]=\"options.searchEnabled\"\n    [useItemTextAsTitle]=\"options.useItemTextAsTitle\"\n    [searchExpr]=\"options.searchExpr\"\n    [value]=\"options.value\"\n    [displayExpr]=\"options.displayExpr\"\n    [valueExpr]=\"options.valueExpr\"\n    [multiline]=\"options.multiline\"\n    [showSelectionControls]=\"options.showSelectionControls\"\n    (onValueChanged)=\"options.onValueChanged($event)\"\n    [inputAttr]=\"options.inputAttr\"\n    [disabled]=\"options.disabled\"\n    [selectAllText]=\"options.selectAllText\"\n    [placeholder]=\"options.placeholder\"\n    [maxDisplayedTags]=\"options.maxDisplayedTags\"\n    [showMultiTagOnly]=\"options.showMultiTagOnly\"\n    [dropDownOptions]=\"dropDownOptions\"\n    >\n    <dx-validator *ngIf=\"!!data.validationRules\" [validationRules]=\"validatorOptions.validationRules\">\n    </dx-validator>\n</dx-tag-box>\n", components: [{ type: i1.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.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MultiValueComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-multivalue',
+                    templateUrl: './multi-value.component.html'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
+
+class ExportOptionsComponent {
+    constructor() {
+        this.headerText = getLocalization('Export Options', 'DevExpress.XtraReports.UI.XtraReport.ExportOptions');
+    }
+    onScrollViewInitialized(args) {
+        args.component.option('useKeyboard', false);
+    }
+}
+ExportOptionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ExportOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ExportOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ExportOptionsComponent, selector: "dxv-export-options", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"dxrd-preview-export-options-wrapper dxrd-preview-property-wrapper\" [hidden]=\"!(data.active && data.visible)\">\n    <div class=\"dxrd-right-panel-header dxd-text-primary\">\n        <span>{{headerText}}</span>\n    </div>\n    <dx-scroll-view class=\"dxrd-right-panel-body\" \n        showScrollbar=\"onHover\"\n        [useNative]=\"false\"\n        [scrollByThumb]=\"true\"\n        (onInitialized)=\"onScrollViewInitialized($event)\">\n        <div class=\"dx-fieldset\" [dxMutationObserver]=\"data.keyboardHelper\">\n            <div class=\"dxrd-right-panel-content dxrd-export-options-content\" role=\"tree\">\n                <dxa-template template=\"dx-propertieseditor\" [data]=\"data.propertyGrid\"></dxa-template>\n            </div>\n        </div>\n    </dx-scroll-view>\n</div>", components: [{ type: i1.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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ExportOptionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-export-options',
+                    templateUrl: './export-options.component.html',
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class ZoomDirective {
+    constructor(_element) {
+        this._element = _element;
+    }
+    set options(newVal) {
+        updateZoomBinding(this._element.nativeElement, newVal);
+    }
+}
+ZoomDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ZoomDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ZoomDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: ZoomDirective, selector: "[dxaZoom]", inputs: { options: ["dxaZoom", "options"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ZoomDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dxaZoom]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { options: [{
+                type: Input,
+                args: ['dxaZoom']
+            }] } });
+
+class CheckEditingFieldComponent {
+}
+CheckEditingFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CheckEditingFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CheckEditingFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CheckEditingFieldComponent, selector: "dxv-editing-field-checkbox", inputs: { data: "data" }, ngImport: i0, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CheckEditingFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-editing-field-checkbox',
+                    templateUrl: './editing-field-checkbox.component.html'
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class RadioEditingFieldComponent {
+}
+RadioEditingFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RadioEditingFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RadioEditingFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RadioEditingFieldComponent, selector: "dxv-editing-field-radio", inputs: { data: "data" }, ngImport: i0, 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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RadioEditingFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-editing-field-radio',
+                    templateUrl: './editing-field-radio.component.html'
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class CharacterCombEditingFieldComponent {
+}
+CharacterCombEditingFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CharacterCombEditingFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CharacterCombEditingFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CharacterCombEditingFieldComponent, selector: "dxv-editing-field-character-comb", inputs: { data: "data" }, ngImport: i0, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CharacterCombEditingFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-editing-field-character-comb',
+                    templateUrl: './editing-field-character-comb.component.html'
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class TextEditingFieldComponent {
+}
+TextEditingFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TextEditingFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TextEditingFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TextEditingFieldComponent, selector: "dxv-editing-field-text", inputs: { data: "data" }, ngImport: i0, 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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TextEditingFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-editing-field-text',
+                    templateUrl: './editing-field-text.component.html'
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class ChildStyleDirective {
+    constructor(_element) {
+        this._element = _element;
+    }
+    ngAfterViewInit() {
+        initializeChildStyleBinding(this._element.nativeElement, this.options);
+    }
+}
+ChildStyleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ChildStyleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ChildStyleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: ChildStyleDirective, selector: "[dxvChildStyle]", inputs: { options: ["dxvChildStyle", "options"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ChildStyleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dxvChildStyle]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { options: [{
+                type: Input,
+                args: ['dxvChildStyle']
+            }] } });
+
+class TextEditingFieldMaskComponent {
+}
+TextEditingFieldMaskComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TextEditingFieldMaskComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TextEditingFieldMaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TextEditingFieldMaskComponent, selector: "dxv-editing-field-mask", inputs: { data: "data" }, ngImport: i0, 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.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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TextEditingFieldMaskComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-editing-field-mask',
+                    templateUrl: './editing-field-mask.component.html'
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class TextEditingFieldDateBoxComponent {
+    constructor(_element, _cd) {
+        this._element = _element;
+        this._cd = _cd;
+    }
+    ngAfterViewInit() {
+        const 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();
+    }
+}
+TextEditingFieldDateBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TextEditingFieldDateBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TextEditingFieldDateBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TextEditingFieldDateBoxComponent, selector: "dxv-editing-field-datetime", inputs: { data: "data" }, ngImport: i0, 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.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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TextEditingFieldDateBoxComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-editing-field-datetime',
+                    templateUrl: './editing-field-datetime.component.html'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class TextEditingFieldNumberComponent {
+}
+TextEditingFieldNumberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TextEditingFieldNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TextEditingFieldNumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TextEditingFieldNumberComponent, selector: "dxv-editing-field-number", inputs: { data: "data" }, ngImport: i0, 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.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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TextEditingFieldNumberComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-editing-field-number',
+                    templateUrl: './editing-field-number.component.html'
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class TextEditingFieldContainerComponent {
+}
+TextEditingFieldContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TextEditingFieldContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TextEditingFieldContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TextEditingFieldContainerComponent, selector: "dxv-editing-field-container", inputs: { data: "data" }, ngImport: i0, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TextEditingFieldContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-editing-field-container',
+                    templateUrl: './editing-field-container.component.html'
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class PictureEditorComponent {
+    constructor(_element, _cd) {
+        this._element = _element;
+        this._cd = _cd;
+    }
+    ngAfterViewInit() {
+        this.editingFieldModel = this.viewModel.getModel();
+        this.model = new PictureEditorModel(this.editingFieldModel, this.element.nativeElement, () => this._cd.detectChanges());
+        this.data = this.model.getViewModel();
+        this.editingFieldModel._setPictureEditor && this.editingFieldModel._setPictureEditor(this.model);
+        const 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(() => {
+            this.editingFieldModel._renderedHandler && this.editingFieldModel._renderedHandler();
+        });
+        this._cd.detectChanges();
+    }
+    ngOnDestroy() {
+        this.model.dispose();
+        this.editingFieldModel._setPictureEditor(null);
+    }
+}
+PictureEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PictureEditorComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PictureEditorComponent.ɵcmp = i0.ɵɵ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, 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.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PictureEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-picture-editor',
+                    templateUrl: './picture-editor.component.html'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { element: [{
+                type: ViewChild,
+                args: ['pictureEditing']
+            }], viewModel: [{
+                type: Input,
+                args: ['options']
+            }] } });
+
+class ImageEditingFieldEditorComponent {
+}
+ImageEditingFieldEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ImageEditingFieldEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ImageEditingFieldEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ImageEditingFieldEditorComponent, selector: "dxv-image-editing-field-editor", inputs: { data: "data" }, ngImport: i0, 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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ImageEditingFieldEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-image-editing-field-editor',
+                    templateUrl: './image-editing-field-editor.component.html'
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class ImageEditingFieldComponent {
+}
+ImageEditingFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ImageEditingFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ImageEditingFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ImageEditingFieldComponent, selector: "dxv-image-editing-field", inputs: { data: "data" }, ngImport: i0, 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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ImageEditingFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-image-editing-field',
+                    templateUrl: './image-editing-field.component.html'
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class PainterComponent {
+    constructor(_element, _cd) {
+        this._element = _element;
+        this._cd = _cd;
+    }
+    ngAfterViewInit() {
+        this.model = new Painter(this._element.nativeElement, this.options);
+        this.options.setPainter(this.model);
+        this._cd.detectChanges();
+    }
+    ngOnDestroy() {
+        this.model.dispose();
+        this.options.setPainter(null);
+    }
+}
+PainterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PainterComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PainterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PainterComponent, selector: "dxv-painter", inputs: { options: "options" }, ngImport: i0, template: "<div class=\"dx-painter\">\n    <canvas [dxaZoom]=\"model?.scale\"></canvas>\n</div>", directives: [{ type: ZoomDirective, selector: "[dxaZoom]", inputs: ["dxaZoom"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PainterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-painter',
+                    templateUrl: './painter.component.html'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { options: [{
+                type: Input,
+                args: ['options']
+            }] } });
+
+class PopupImageEditingFieldComponent {
+    constructor(_element, _cd) {
+        this._element = _element;
+        this._cd = _cd;
+    }
+    ngAfterViewInit() {
+        const element = this._element.nativeElement;
+        const container = this.data.popupData.getPopupContainer(element);
+        this.popupOptions = {
+            position: {
+                boundary: container,
+                of: this.popupContainer.nativeElement,
+                collision: 'flipfit flipfit'
+            },
+            container: container
+        };
+        this._cd.detectChanges();
+    }
+}
+PopupImageEditingFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PopupImageEditingFieldComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PopupImageEditingFieldComponent.ɵcmp = i0.ɵɵ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, 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.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PopupImageEditingFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-popup-image-editing-field',
+                    templateUrl: './popup-image-editing-field.component.html'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }], popupContainer: [{
+                type: ViewChild,
+                args: ['popupContainer']
+            }] } });
+
+class PictureEditorToolBarPopupComponent {
+    constructor(_element, _cd) {
+        this._element = _element;
+        this._cd = _cd;
+    }
+    ngAfterViewInit() {
+        const target = this.data.getPositionTarget();
+        this.popupOptions = {
+            container: target,
+            position: {
+                my: 'left top',
+                at: 'right top',
+                boundary: getParentContainer(this._element.nativeElement),
+                of: target,
+                collision: 'flipfit fit',
+                offset: '-10 0'
+            },
+        };
+        this._cd.detectChanges();
+    }
+}
+PictureEditorToolBarPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PictureEditorToolBarPopupComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PictureEditorToolBarPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PictureEditorToolBarPopupComponent, selector: "dxv-picture-editor-toolbar-popup", inputs: { data: "data" }, ngImport: i0, template: "<dx-popover *ngIf=\"!!popupOptions\" class=\"dx-picture-edit-popup-content\"\n    [width]=\"data.width\"\n    [height]=\"data.height\"\n    [wrapperAttr]=\"{ class: 'dx-picture-edit-popup-content' }\"\n    [hideOnOutsideClick]=\"data.hideOnOutsideClick\"\n    (onShown)=\"data.onShown($event)\"\n    (onHidden)=\"data.onHidden($event)\"\n    (onContentReady)=\"data.onContentReady($event)\"\n    [position]=\"popupOptions.position\"\n    [container]=\"popupOptions.container\"\n    [showTitle]=\"false\"\n    [showCloseButton]=\"false\"\n    [shading]=\"false\"\n    [animation]=\"{}\"\n    [visible]=\"data.visible\">\n    <dxa-template [template]=\"data.contentTemplate\" [data]=\"data.contentData\"></dxa-template>\n</dx-popover>", components: [{ type: i1.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PictureEditorToolBarPopupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-picture-editor-toolbar-popup',
+                    templateUrl: './picture-editor-toolbar-popup.component.html'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class PictureEditorBrushOptionsComponent {
+}
+PictureEditorBrushOptionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PictureEditorBrushOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PictureEditorBrushOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PictureEditorBrushOptionsComponent, selector: "dxv-picture-editing-brush-options", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"dx-picture-editing-brush-options\">\n    <div class=\"dx-picture-editing-line-width\">\n        <div class=\"dx-picture-editing-text\">{{data.brushWidthText}}</div>\n        <dx-slider class=\"dx-picture-editing-line-width-slider\"\n            [min]=\"1\"\n            [max]=\"9\"\n            [value]=\"data.lineWidth\"\n            [label]=\"{ visible: true }\"\n            [tooltip]=\"{ enabled: true, showMode: 'always', position: 'bottom' }\"\n            (onValueChanged)=\"data.onLineWidthChanged($event)\">\n        </dx-slider>\n    </div>\n    <div class=\"dx-picture-editing-line-color\">\n        <div class=\"dx-picture-editing-text\">{{data.brushColorText}}</div>\n        <div class=\"dx-picture-editing-brush-options-colors\">\n            <div class=\"dx-picture-editing-brush-options-color\" *ngFor=\"let color of data.colors\" [class.selected]=\"color.isSelected\">\n                <div class=\"dx-picture-editing-brush-options-color-cell\" [style.background]=\"color.value\" (click)=\"color.action()\"></div>\n            </div>\n        </div>\n    </div>\n</div>", components: [{ type: i1.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PictureEditorBrushOptionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-picture-editing-brush-options',
+                    templateUrl: './picture-editing-brush-options.component.html'
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class PictureEditorSizeOptionsComponent {
+}
+PictureEditorSizeOptionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PictureEditorSizeOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PictureEditorSizeOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PictureEditorSizeOptionsComponent, selector: "dxv-picture-editing-size-options", inputs: { data: "data" }, ngImport: i0, 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PictureEditorSizeOptionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-picture-editing-size-options',
+                    templateUrl: './picture-editing-size-options.component.html'
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class SearchHighlightingDirective {
+    constructor(_element) {
+        this._element = _element;
+    }
+    set text(newVal) {
+        this._text = newVal;
+        this.updateModel();
+    }
+    set textToSearch(newVal) {
+        this._textToSearch = newVal;
+        this.updateModel();
+    }
+    updateModel() {
+        const options = {
+            text: this._text,
+            textToSearch: this._textToSearch
+        };
+        if (!this.model) {
+            this.model = new HighlightEngine(options);
+        }
+        else {
+            this.model.update(options);
+        }
+        this._element.nativeElement.innerHTML = this.model.content;
+    }
+    ngOnDestroy() {
+        var _a;
+        (_a = this.model) === null || _a === void 0 ? void 0 : _a.dispose();
+    }
+}
+SearchHighlightingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SearchHighlightingDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+SearchHighlightingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: SearchHighlightingDirective, selector: "[dxaSearchHighlighting]", inputs: { text: "text", textToSearch: "textToSearch" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SearchHighlightingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dxaSearchHighlighting]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { text: [{
+                type: Input,
+                args: ['text']
+            }], textToSearch: [{
+                type: Input,
+                args: ['textToSearch']
+            }] } });
+
+class PictureEditorImagespickerComponent {
+}
+PictureEditorImagespickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PictureEditorImagespickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PictureEditorImagespickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PictureEditorImagespickerComponent, selector: "dxv-picture-editing-imagespicker", inputs: { data: "data" }, ngImport: i0, 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.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SearchHighlightingDirective, selector: "[dxaSearchHighlighting]", inputs: ["text", "textToSearch"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PictureEditorImagespickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-picture-editing-imagespicker',
+                    templateUrl: './picture-editing-imagespicker.component.html'
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class PictureEditorImagespickerWithFilterComponent extends PictureEditorImagespickerComponent {
+}
+PictureEditorImagespickerWithFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PictureEditorImagespickerWithFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PictureEditorImagespickerWithFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PictureEditorImagespickerWithFilterComponent, selector: "dxv-picture-editing-imagespickerwithfilter", usesInheritance: true, ngImport: i0, 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.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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PictureEditorImagespickerWithFilterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-picture-editing-imagespickerwithfilter',
+                    templateUrl: './picture-editing-imagespickerwithfilter.component.html'
+                }]
+        }] });
+
+class TreeListGroupComponent {
+}
+TreeListGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TreeListGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TreeListGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TreeListGroupComponent, selector: "dxa-treelist-group", inputs: { data: "data" }, ngImport: i0, 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TreeListGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxa-treelist-group',
+                    templateUrl: './treelist-group.component.html',
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class TreelistComponent {
+    constructor(_element) {
+        this._element = _element;
+        this._updateTreeList = () => {
+            this._disposeCallback && this._disposeCallback();
+            this._disposeCallback = initTreeListBinding({
+                values: this._options,
+                element: this._element.nativeElement,
+                createChildContext: (viewModel) => {
+                    this.viewModel = viewModel;
+                }
+            });
+        };
+    }
+    set options(newVal) {
+        this._options = newVal;
+        if (this.treeList)
+            this._updateTreeList();
+    }
+    ngAfterViewInit() {
+        this._updateTreeList();
+    }
+    ngOnDestroy() {
+        this._disposeCallback && this._disposeCallback();
+    }
+}
+TreelistComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TreelistComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+TreelistComponent.ɵcmp = i0.ɵɵ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, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TreelistComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxa-treelist',
+                    templateUrl: './treelist.component.html'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { options: [{
+                type: Input,
+                args: ['options']
+            }], treeList: [{
+                type: ViewChild,
+                args: ['treelist']
+            }] } });
+
+class DocumentMapComponent {
+    constructor() {
+        this.headerText = getLocalization('Document Map', 'ASPxReportsStringId.DocumentViewer_RibbonCommandText_DocumentMap');
+    }
+    ngOnInit() {
+        var _a;
+        this.viewModel = (_a = this.data.model) === null || _a === void 0 ? void 0 : _a.getViewModel();
+    }
+}
+DocumentMapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DocumentMapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DocumentMapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DocumentMapComponent, selector: "dxv-document-map", inputs: { data: "data" }, ngImport: i0, 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.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DocumentMapComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-document-map',
+                    templateUrl: './document-map.component.html',
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class MultiValueEditableComponent extends EditorComponentBase {
+    constructor(_cd) {
+        super(_cd);
+    }
+    getEditorOptions() {
+        const editor = this.data.getModel();
+        const getOptionsInfoProperty = (propertyName) => !propertyName ? this.data.info
+            : this.data.info && this.data.info[propertyName];
+        const addHandler = () => (getOptionsInfoProperty('addHandler')).call(this);
+        return {
+            data: {
+                values: [...editor.value],
+                addHandler: () => {
+                    return addHandler();
+                },
+                onValueChanged: (array, args) => {
+                    editor._set('value', [...array]);
+                },
+                info: this.data.info,
+                level: this.data.level, displayName: getLocalization(this.data.displayName)
+            }
+        };
+    }
+    ngAfterViewInit() {
+        this.options.contentTemplate = this.properties;
+        this._cd.detectChanges();
+    }
+}
+MultiValueEditableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MultiValueEditableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+MultiValueEditableComponent.ɵcmp = i0.ɵɵ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, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MultiValueEditableComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-multivalue-editable',
+                    templateUrl: './multi-value.editable.component.html'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { properties: [{
+                type: ViewChild,
+                args: ['properties']
+            }] } });
+
+class SignatureEditorComponent extends EditorDropDownComponentBase {
+    constructor(_cd) {
+        super(_cd);
+    }
+    getOptions() {
+        return this.data.getOptions({
+            dataSource: this.data.values,
+            onValueChanged: (event) => this.data.onValueChanged(event),
+            itemTemplate: 'item',
+            displayExpr: 'displayName',
+            valueExpr: 'key',
+            showClearButton: true,
+            noDataText: noDataText(),
+            encodeNoDataText: true,
+            inputAttr: { 'aria-label': this.data.displayName, id: this.data.editorInputId }
+        });
+    }
+    beforeDetectChanges() {
+        super.beforeDetectChanges();
+        this.dropDownOptions = {
+            minWidth: '300px',
+            container: this.container
+        };
+        this.options = this.data.getOptions(this.options);
+    }
+}
+SignatureEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SignatureEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SignatureEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SignatureEditorComponent, selector: "dxv-signature-editor", usesInheritance: true, ngImport: i0, 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.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.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SignatureEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-signature-editor',
+                    templateUrl: './signature-editor.component.html'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
+
+class DateRangeComponent {
+    constructor(_currentElement) {
+        this._currentElement = _currentElement;
+    }
+    ngOnDestroy() {
+        this._editor.dispose();
+    }
+    ngOnInit() {
+        this._editor = new DateRangeEditor(this.options, this._currentElement.nativeElement);
+        this.data = this._editor.getViewModel();
+        this.data.cacheElement(this._currentElement.nativeElement);
+        this.showPopupOptions = {
+            disabled: false,
+            onClick: (e) => {
+                this.data.showPopup();
+            },
+            template: generateIconTemplate('dx-ellipsis-image'),
+            icon: 'dxrd-svg-ellipsis'
+        };
+    }
+}
+DateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DateRangeComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DateRangeComponent, selector: "dxv-date-range", inputs: { options: ["data", "options"] }, ngImport: i0, 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.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$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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DateRangeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-date-range',
+                    templateUrl: './date-range.component.html'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { options: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class PopupContainerComponent {
+    ngOnInit() {
+        this.popupOptions = this.data.getPopupSettings();
+        this.popupOptions.height = calculateWithZoomFactor(362);
+    }
+}
+PopupContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PopupContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PopupContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PopupContainerComponent, selector: "dxv-daterange-popup", inputs: { data: "data" }, ngImport: i0, template: "<dx-popup role=\"dialog\" aria-modal=\"true\" \n[width]=\"popupOptions.width\"\n[height]=\"popupOptions.height\"\n[wrapperAttr]=\"popupOptions.wrapperAttr\"\n[position]=\"popupOptions.position\"\n[container]=\"popupOptions.container\"\n[showTitle]=\"popupOptions.showTitle\"\n[showCloseButton]=\"popupOptions.showCloseButton\"\n[hideOnOutsideClick]=\"popupOptions.hideOnOutsideClick\"\n(onHidden)=\"popupOptions.onHidden($event)\"\n[animation]=\"popupOptions.animation\"\n[shading]=\"popupOptions.shading\"\n[visible]=\"popupOptions.visible\"\n>\n    <dx-scroll-view \n    [showScrollbar]=\"data.scrollViewOptions.showScrollbar\"\n    [direction]=\"data.scrollViewOptions.direction\"\n    [useNative]=\"data.scrollViewOptions.useNative\"\n    (onInitialized)=\"data.scrollViewOptions.onInitialized($event)\"\n    >\n        <div class=\"dxrv-daterange-editor-popup-container\" [dxMutationObserver]=\"data.dialogKeyboardHelper\">\n            <dx-scroll-view role=\"listbox\" class=\"dxrv-daterange-editor-list dxrv-daterange-editor-item dxd-border-primary dx-accessibility-daterange-item\" \n            [showScrollbar]=\"data.predefinedRanges.scrollViewOptions.showScrollbar\"\n            [scrollByContent]=\"data.predefinedRanges.scrollViewOptions.scrollByContent\"\n            [bounceEnabled]=\"data.predefinedRanges.scrollViewOptions.bounceEnabled\"\n            [useNative]=\"data.predefinedRanges.scrollViewOptions.useNative\"\n            [scrollByThumb]=\"data.predefinedRanges.scrollViewOptions.scrollByThumb\"\n            (onInitialized)=\"data.predefinedRanges.scrollViewOptions.onInitialized($event)\"\n            >\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.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.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DxActionDirective, selector: "[dxAction]", inputs: ["dxActionModel", "dxAction"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PopupContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-daterange-popup',
+                    templateUrl: './popup-container.component.html'
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class CalendarComponent {
+    onValueChanged(event) {
+        this.data.onValueChanged(event);
+    }
+}
+CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CalendarComponent, selector: "dxv-daterange-calendar", inputs: { data: "data" }, ngImport: i0, template: "<dx-calendar [tabIndex]=\"0\" class=\"dx-accessibility-calendar-item dx-accessibility-daterange-item\"\n    [value]=\"data.value\"\n    cellTemplate=\"select_cell\" \n    [height]=\"data.height\"\n    [min]=\"data.min\"\n    (onValueChanged)=\"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.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.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CalendarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-daterange-calendar',
+                    templateUrl: './calendar.component.html'
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class AutoFitDirective extends BaseDisposableDirective {
+    InitAndReturnDisposeFunc(element) {
+        return initializeAutoFitBinding(element, this.options);
+    }
+}
+AutoFitDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AutoFitDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+AutoFitDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: AutoFitDirective, selector: "[dxvAutoFit]", inputs: { options: ["dxvAutoFit", "options"] }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AutoFitDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dxvAutoFit]'
+                }]
+        }], propDecorators: { options: [{
+                type: Input,
+                args: ['dxvAutoFit']
+            }] } });
+
+class LazyImagesDirective extends BaseDisposableDirective {
+    InitAndReturnDisposeFunc(element) {
+        return initializeLazyImagesBinding(element, this.options);
+    }
+}
+LazyImagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LazyImagesDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+LazyImagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: LazyImagesDirective, selector: "[dxvLazyImages]", inputs: { options: ["dxvLazyImages", "options"] }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LazyImagesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dxvLazyImages]'
+                }]
+        }], propDecorators: { options: [{
+                type: Input,
+                args: ['dxvLazyImages']
+            }] } });
+
+class ToViewDirective extends BaseDisposableDirective {
+    InitAndReturnDisposeFunc(element) {
+        return initializeToViewBinding(element, this.options);
+    }
+}
+ToViewDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ToViewDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+ToViewDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: ToViewDirective, selector: "[dxvToView]", inputs: { options: ["dxvToView", "options"] }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ToViewDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dxvToView]'
+                }]
+        }], propDecorators: { options: [{
+                type: Input,
+                args: ['dxvToView']
+            }] } });
+
+class SurfaceComponent {
+    constructor() {
+        this.clipboardMessage = getLocalization$1('Clipboard', 'ASPxReportsStringId.WebDocumentViewer_AriaClipboard');
+    }
+}
+SurfaceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurfaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SurfaceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SurfaceComponent, selector: "dxv-surface", inputs: { data: "data" }, ngImport: i0, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: AutoFitDirective, selector: "[dxvAutoFit]", inputs: ["dxvAutoFit"] }, { type: LazyImagesDirective, selector: "[dxvLazyImages]", inputs: ["dxvLazyImages"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ToViewDirective, selector: "[dxvToView]", inputs: ["dxvToView"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SurfaceComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-surface',
+                    templateUrl: './surface.component.html'
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class BrickSelectionDirective extends BaseDisposableDirective {
+    constructor() {
+        super(...arguments);
+        this.eventName = null;
+    }
+    set brickSelection(newVal) {
+        this.options = newVal;
+        this._disposeFunc();
+        this._disposeFunc = initializeBrickSelectionProg(this.element, this.options);
+    }
+    InitAndReturnDisposeFunc(element) { return void 0; }
+}
+BrickSelectionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BrickSelectionDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+BrickSelectionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: BrickSelectionDirective, selector: "[dxvBrickSelection]", inputs: { brickSelection: ["dxvBrickSelection", "brickSelection"] }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BrickSelectionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dxvBrickSelection]'
+                }]
+        }], propDecorators: { brickSelection: [{
+                type: Input,
+                args: ['dxvBrickSelection']
+            }] } });
+
+class PageComponent {
+}
+PageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PageComponent, selector: "dxv-page", inputs: { data: "data" }, ngImport: i0, 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-page',
+                    templateUrl: './page.component.html'
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class EditorContentComponent {
+}
+EditorContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditorContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+EditorContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EditorContentComponent, selector: "dxv-editor-content", inputs: { data: "data" }, ngImport: i0, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditorContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-editor-content',
+                    templateUrl: './editor-content.component.html'
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class GroupEditorComponent {
+    getCorrectLayoutClass(editor) {
+        return editor.editorTemplate !== 'dxrd-parameters-separator' ?
+            'dx-fill-available' : 'dx-display-content';
+    }
+    trackByFn(_, item) {
+        return item.editorInputId;
+    }
+}
+GroupEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GroupEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GroupEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GroupEditorComponent, selector: "dxv-group-editor", inputs: { data: "data" }, ngImport: i0, 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GroupEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-group-editor',
+                    templateUrl: './group-editor.component.html'
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class SearchComponent {
+    ngOnInit() {
+        this.viewModel = this.data.model.getViewModel();
+    }
+}
+SearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SearchComponent, selector: "dxv-search", inputs: { data: "data" }, ngImport: i0, 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.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.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.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.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.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { type: DxActionDirective, selector: "[dxAction]", inputs: ["dxActionModel", "dxAction"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SearchComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-search',
+                    templateUrl: './search.component.html'
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class BrickComponent {
+}
+BrickComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BrickComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BrickComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BrickComponent, selector: "dxv-brick", inputs: { data: "data" }, ngImport: i0, 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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BrickComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-brick',
+                    templateUrl: './brick.component.html'
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class BrickClickableComponent {
+}
+BrickClickableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BrickClickableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BrickClickableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BrickClickableComponent, selector: "dxv-brick-clickable", inputs: { data: "data" }, ngImport: i0, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BrickClickableComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-brick-clickable',
+                    templateUrl: './brick-clickable.component.html'
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class ExportToolComponent {
+    constructor(_element, _cd) {
+        this._element = _element;
+        this._cd = _cd;
+    }
+    ngAfterViewInit() {
+        const element = this._element.nativeElement;
+        const container = this.data.popupOptions.getPopupContainer(element);
+        this.popupOptions = {
+            container: container,
+            position: { of: container }
+        };
+        initializeViewerExportBinding(element, this.data);
+        this._cd.detectChanges();
+    }
+}
+ExportToolComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ExportToolComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ExportToolComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ExportToolComponent, selector: "dxv-export-tool", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"dxrd-visually-hidden\">\n    <form [attr.action]=\"data.exportActionUri\" method=\"post\">\n        <input *ngFor=\"let input of data.exportFormData\" [attr.name]=\"input.name\" [attr.value]=\"input.value\"/>\n    </form>\n</div>\n<dx-popup\n    [width]=\"data.popupOptions.width\"\n    [height]=\"data.popupOptions.height\"\n    [title]=\"data.popupOptions.title\"\n    [visible]=\"data.popupOptions.visible\"\n    [showCloseButton]=\"true\"\n    (onHidden)=\"data.popupOptions.onHidden()\"\n    [toolbarItems]=\"data.popupOptions.toolbarItems\"\n    [wrapperAttr]=\"data.popupOptions.wrapperAttr\"\n    [container]=\"popupOptions?.container\"\n    [position]=\"popupOptions?.position\">\n        <div class=\"dxrd-print-dialog-content\">\n            <div>{{data.printingTexts.caption}}</div>\n            <p></p>\n            <div *ngIf=\"!!data.printingTexts.prefix\" class=\"dxrdp-print-text-prefix\">{{data.printingTexts.prefix}}\n            </div>&nbsp;<a href=\"\" class=\"dxrd-preview-printing-link\" (click)=\"data.printingLinkCallback(data, $event)\">{{data.printingTexts.link}}</a>\n            <div *ngIf=\"!!data.printingTexts.postfix\" class=\"dxrdp-print-text-postfix\">{{data.printingTexts.postfix}}</div>\n        </div>\n</dx-popup>", components: [{ type: i1.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ExportToolComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-export-tool',
+                    templateUrl: './export-tool.component.html'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class ProgressBarComponent {
+}
+ProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ProgressBarComponent, selector: "dxv-progress-bar", inputs: { viewModel: ["data", "viewModel"] }, ngImport: i0, 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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-progress-bar',
+                    templateUrl: './progress-bar.component.html'
+                }]
+        }], propDecorators: { viewModel: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class EditingFieldCheckboxGlyphComponent {
+}
+EditingFieldCheckboxGlyphComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditingFieldCheckboxGlyphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+EditingFieldCheckboxGlyphComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EditingFieldCheckboxGlyphComponent, selector: "dxv-editing-field-checkbox-glyph", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"dxrd-checkbox-custom-glyph\" [style]=\"data.customGlyphStyleCss\"></div>" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditingFieldCheckboxGlyphComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-editing-field-checkbox-glyph',
+                    templateUrl: './editing-field-checkbox-glyph.component.html'
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class MobileGalleryComponent {
+    constructor() {
+        this._gallery = null;
+        this._slideOptions = null;
+    }
+    set gallery(newVal) {
+        if (this._dxgallery) {
+            this._gallery = newVal;
+            this._dxgallery.option('gallery', newVal);
+        }
+    }
+    set slideOptions(newVal) {
+        if (this._dxgallery) {
+            this._slideOptions = newVal;
+            this._dxgallery.option('slideOptions', newVal);
+        }
+    }
+    ngAfterViewInit() {
+        this._dxgallery = this.galleryComponent.instance;
+        this._dxgallery.option('gallery', this._gallery || this.data.gallery);
+        this._dxgallery.option('slideOptions', this._slideOptions || this.data.slideOptions);
+        new dxGalleryExtender(this._dxgallery).extend(this._dxgallery.$element());
+    }
+    Max(val1, val2) {
+        return Math.max(val1, val2);
+    }
+}
+MobileGalleryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MobileGalleryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MobileGalleryComponent.ɵcmp = i0.ɵɵ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, 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.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.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.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MobileGalleryComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-mobile-gallery',
+                    templateUrl: './mobile.gallery.component.html'
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }], gallery: [{
+                type: Input,
+                args: ['gallery']
+            }], slideOptions: [{
+                type: Input,
+                args: ['slideOptions']
+            }], galleryComponent: [{
+                type: ViewChild,
+                args: ['gallery']
+            }] } });
+
+class MobileSlideDirective extends BaseDisposableDirective {
+    InitAndReturnDisposeFunc(element) {
+        return initializeSlideBinding(element, this.options);
+    }
+}
+MobileSlideDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MobileSlideDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+MobileSlideDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: MobileSlideDirective, selector: "[dxvMobileSlide]", inputs: { options: ["dxvMobileSlide", "options"] }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MobileSlideDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dxvMobileSlide]'
+                }]
+        }], propDecorators: { options: [{
+                type: Input,
+                args: ['dxvMobileSlide']
+            }] } });
+
+class MobileZoomDirective extends BaseDisposableDirective {
+    InitAndReturnDisposeFunc(element) {
+        initializeMobileZoomBinding(element, this.options);
+        return () => void 0;
+    }
+}
+MobileZoomDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MobileZoomDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+MobileZoomDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: MobileZoomDirective, selector: "[dxvMobileZoom]", inputs: { options: ["dxvMobileZoom", "options"] }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MobileZoomDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dxvMobileZoom]'
+                }]
+        }], propDecorators: { options: [{
+                type: Input,
+                args: ['dxvMobileZoom']
+            }] } });
+
+class MobileSurfaceComponent {
+}
+MobileSurfaceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MobileSurfaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MobileSurfaceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MobileSurfaceComponent, selector: "dxv-mobile-surface", inputs: { data: "data" }, ngImport: i0, 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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MobileSurfaceComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-mobile-surface',
+                    templateUrl: './mobile.surface.component.html',
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class MobileAutofitDirective extends BaseDisposableDirective {
+    InitAndReturnDisposeFunc(element) {
+        return initializeAutoFitBinding(element, this.options);
+    }
+}
+MobileAutofitDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MobileAutofitDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+MobileAutofitDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: MobileAutofitDirective, selector: "[dxvMobileAutofit]", inputs: { options: ["dxvMobileAutofit", "options"] }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MobileAutofitDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dxvMobileAutofit]'
+                }]
+        }], propDecorators: { options: [{
+                type: Input,
+                args: ['dxvMobileAutofit']
+            }] } });
+
+class MobilePageComponent {
+}
+MobilePageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MobilePageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MobilePageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MobilePageComponent, selector: "dxv-mobile-page", inputs: { data: "data" }, ngImport: i0, 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MobilePageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-mobile-page',
+                    templateUrl: './mobile.page.component.html'
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class MobileActionsComponent {
+}
+MobileActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MobileActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MobileActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MobileActionsComponent, selector: "dxv-mobile-actions", inputs: { data: "data" }, ngImport: i0, 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MobileActionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-mobile-actions',
+                    templateUrl: './mobile.actions.component.html'
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class MobileParametersComponent {
+    constructor(_element, _cd) {
+        this._element = _element;
+        this._cd = _cd;
+    }
+    ngAfterViewInit() {
+        this.data.cacheElementContent(this.buttonGroup.nativeElement);
+        this._cd.detectChanges();
+    }
+}
+MobileParametersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MobileParametersComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+MobileParametersComponent.ɵcmp = i0.ɵɵ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, 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.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.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MobileParametersComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-mobile-parameters',
+                    templateUrl: './mobile.parameters.component.html'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }], buttonGroup: [{
+                type: ViewChild,
+                args: ['buttonGroup']
+            }] } });
+
+class ComponentWithParentContainer {
+    constructor(_element) {
+        this._element = _element;
+    }
+    ngOnInit() {
+        this.parentContainer = getParentContainer(this._element.nativeElement);
+    }
+}
+ComponentWithParentContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ComponentWithParentContainer, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ComponentWithParentContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ComponentWithParentContainer, selector: "dxa-contained-element", ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ComponentWithParentContainer, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxa-contained-element',
+                    template: ''
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+class MobileParametersPopupComponent extends ComponentWithParentContainer {
+}
+MobileParametersPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MobileParametersPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+MobileParametersPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MobileParametersPopupComponent, selector: "dxv-mobile-parameters-popup", inputs: { data: "data" }, usesInheritance: true, ngImport: i0, template: "<dx-popup [wrapperAttr]=\"{ class: 'dxrd-menu-parameters-popup' }\" [showTitle]=\"false\" (onHidden)=\"data.onHidden($event)\" width=\"100vw\" height=\"100vh\" [visible]=\"data.visible\" [container]=\"parentContainer\">\n    <dxa-template template=\"dxrv-preview-parameters-mobile\" [data]=\"data\"></dxa-template>\n</dx-popup>", components: [{ type: i1.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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MobileParametersPopupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-mobile-parameters-popup',
+                    templateUrl: './mobile.parameters.popup.component.html'
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class MobileParametersDateRangeComponent extends DateRangeComponent {
+    ngOnInit() {
+        this.options.isMobile = true;
+        super.ngOnInit();
+    }
+}
+MobileParametersDateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MobileParametersDateRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+MobileParametersDateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MobileParametersDateRangeComponent, selector: "dxv-mobile-parameters-daterange", usesInheritance: true, ngImport: i0, template: "<dxv-date-range [data]=\"options\"></dxv-date-range>", components: [{ type: DateRangeComponent, selector: "dxv-date-range", inputs: ["data"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MobileParametersDateRangeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-mobile-parameters-daterange',
+                    templateUrl: './mobile.parameters.daterange.component.html'
+                }]
+        }] });
+
+class DateRangeMobileComponent {
+}
+DateRangeMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DateRangeMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DateRangeMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DateRangeMobileComponent, selector: "dxv-date-range-mobile", inputs: { data: "data" }, ngImport: i0, 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.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.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DateRangeMobileComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-date-range-mobile',
+                    templateUrl: './date-range-mobile.component.html'
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class MobileActionsExportComponent extends ComponentWithParentContainer {
+}
+MobileActionsExportComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MobileActionsExportComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+MobileActionsExportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MobileActionsExportComponent, selector: "dxv-mobile-actions-export", inputs: { data: "data" }, usesInheritance: true, ngImport: i0, template: "<dx-popover class=\"dxrd-menu-export-popover\"\n    [wrapperAttr]=\"{ class: 'dxrd-menu-export-popover' }\"\n    width=\"266px\"\n    height=\"266px\"\n    [visible]=\"data.visible\"\n    target=\".dxrdp-mobile-action.dxrd-image-export-to\"\n    [container]=\"parentContainer\">\n    <div *dxTemplate=\"let contentData of 'content'\">\n        <div *ngFor=\"let item of data.items\" class=\"dxrd-menu-export-item\" (click)=\"item.action()\">{{item.text}}</div>\n    </div>\n</dx-popover>", components: [{ type: i1.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.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MobileActionsExportComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-mobile-actions-export',
+                    templateUrl: './mobile.actions.export.component.html'
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class MobileSearchBarDirective extends BaseDisposableDirective {
+    InitAndReturnDisposeFunc(element) {
+        return initializeMobileSearchBinding(element, this.options);
+    }
+}
+MobileSearchBarDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MobileSearchBarDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+MobileSearchBarDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: MobileSearchBarDirective, selector: "[dxvSearchBar]", inputs: { options: ["dxvSearchBar", "options"] }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MobileSearchBarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dxvSearchBar]'
+                }]
+        }], propDecorators: { options: [{
+                type: Input,
+                args: ['dxvSearchBar']
+            }] } });
+
+class MobileSearchComponent {
+}
+MobileSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MobileSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MobileSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MobileSearchComponent, selector: "dxv-search-mobile", inputs: { data: "data" }, ngImport: i0, 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.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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MobileSearchComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-search-mobile',
+                    templateUrl: './mobile.search.component.html'
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class MobilePaginatorDirective extends BaseDisposableDirective {
+    InitAndReturnDisposeFunc(element) {
+        initializeMobilePaginatorBinding(element, this.options);
+        return () => void 0;
+    }
+}
+MobilePaginatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MobilePaginatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+MobilePaginatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: MobilePaginatorDirective, selector: "[dxvPaginator]", inputs: { options: ["dxvPaginator", "options"] }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MobilePaginatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dxvPaginator]'
+                }]
+        }], propDecorators: { options: [{
+                type: Input,
+                args: ['dxvPaginator']
+            }] } });
+
+class MobilePaginatorComponent {
+}
+MobilePaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MobilePaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MobilePaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MobilePaginatorComponent, selector: "dxv-pages-mobile", inputs: { data: "data" }, ngImport: i0, 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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MobilePaginatorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-pages-mobile',
+                    templateUrl: './mobile.pages.component.html'
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class ViewerTemplatesComponent {
+    constructor(_templateEngine) {
+        this._templateEngine = _templateEngine;
+    }
+    ngAfterViewInit() {
+        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);
+    }
+}
+ViewerTemplatesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ViewerTemplatesComponent, deps: [{ token: TemplateEngine }], target: i0.ɵɵFactoryTarget.Component });
+ViewerTemplatesComponent.ɵcmp = i0.ɵɵ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, 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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ViewerTemplatesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxv-templates',
+                    templateUrl: './templates.component.html'
+                }]
+        }], ctorParameters: function () { return [{ type: TemplateEngine }]; }, propDecorators: { toolbar: [{
+                type: ViewChild,
+                args: ['toolbar']
+            }], exportAction: [{
+                type: ViewChild,
+                args: ['exportAction']
+            }], pagerAction: [{
+                type: ViewChild,
+                args: ['pagerAction']
+            }], zoomAction: [{
+                type: ViewChild,
+                args: ['zoomAction']
+            }], parameters: [{
+                type: ViewChild,
+                args: ['parameters']
+            }], editor: [{
+                type: ViewChild,
+                args: ['editor']
+            }], multivalue: [{
+                type: ViewChild,
+                args: ['multivalue']
+            }], multivalueEditable: [{
+                type: ViewChild,
+                args: ['multivalueEditable']
+            }], signatureEditor: [{
+                type: ViewChild,
+                args: ['signatureEditor']
+            }], exportOptions: [{
+                type: ViewChild,
+                args: ['exportoptions']
+            }], documentMap: [{
+                type: ViewChild,
+                args: ['documentmap']
+            }], daterangeinput: [{
+                type: ViewChild,
+                args: ['daterangeinput']
+            }], daterangePopup: [{
+                type: ViewChild,
+                args: ['daterangeepopup']
+            }], daterangeecalendar: [{
+                type: ViewChild,
+                args: ['daterangeecalendar']
+            }], surface: [{
+                type: ViewChild,
+                args: ['surface']
+            }], page: [{
+                type: ViewChild,
+                args: ['page']
+            }], editorContent: [{
+                type: ViewChild,
+                args: ['editorContent']
+            }], groupEditor: [{
+                type: ViewChild,
+                args: ['groupEditor']
+            }], search: [{
+                type: ViewChild,
+                args: ['search']
+            }], brick: [{
+                type: ViewChild,
+                args: ['brick']
+            }], brickClickable: [{
+                type: ViewChild,
+                args: ['brickClickable']
+            }], separator: [{
+                type: ViewChild,
+                args: ['separator']
+            }], textEditingFieldContainer: [{
+                type: ViewChild,
+                args: ['textEditingFieldContainer']
+            }], textEditingField: [{
+                type: ViewChild,
+                args: ['textEditingField']
+            }], textEditingFieldDate: [{
+                type: ViewChild,
+                args: ['textEditingFieldDate']
+            }], textEditingFieldMask: [{
+                type: ViewChild,
+                args: ['textEditingFieldMask']
+            }], textEditingFieldNumber: [{
+                type: ViewChild,
+                args: ['textEditingFieldNumber']
+            }], characterCombEditingField: [{
+                type: ViewChild,
+                args: ['characterCombEditingField']
+            }], checkEditingField: [{
+                type: ViewChild,
+                args: ['checkEditingField']
+            }], radioEditingField: [{
+                type: ViewChild,
+                args: ['radioEditingField']
+            }], imageEditingField: [{
+                type: ViewChild,
+                args: ['imageEditingField']
+            }], imageEditingFieldEditor: [{
+                type: ViewChild,
+                args: ['imageEditingFieldEditor']
+            }], popupImageEditingField: [{
+                type: ViewChild,
+                args: ['popupImageEditingField']
+            }], pictureEditingToolbarPopup: [{
+                type: ViewChild,
+                args: ['pictureEditingToolbarPopup']
+            }], pictureEditingBrushOptions: [{
+                type: ViewChild,
+                args: ['pictureEditingBrushOptions']
+            }], pictureEditingSizeOptions: [{
+                type: ViewChild,
+                args: ['pictureEditingSizeOptions']
+            }], pictureEditingImagesPicker: [{
+                type: ViewChild,
+                args: ['pictureEditingImagesPicker']
+            }], pictureEditingImagesPickerWithFilter: [{
+                type: ViewChild,
+                args: ['pictureEditingImagesPickerWithFilter']
+            }], progressBar: [{
+                type: ViewChild,
+                args: ['progressBar']
+            }], exportTool: [{
+                type: ViewChild,
+                args: ['exportTool']
+            }], checkboxGlyph: [{
+                type: ViewChild,
+                args: ['checkboxglyph']
+            }], mobileSurface: [{
+                type: ViewChild,
+                args: ['mobilesurface']
+            }], mobilePage: [{
+                type: ViewChild,
+                args: ['mobilepage']
+            }], mobileActions: [{
+                type: ViewChild,
+                args: ['mobileactions']
+            }], mobileParameters: [{
+                type: ViewChild,
+                args: ['mobileparameters']
+            }], mobileParametersPopup: [{
+                type: ViewChild,
+                args: ['mobileparameterspopup']
+            }], mobileParametersDateRange: [{
+                type: ViewChild,
+                args: ['mobileparametersdaterange']
+            }], mobileDateRange: [{
+                type: ViewChild,
+                args: ['mobiledaterange']
+            }], mobileExport: [{
+                type: ViewChild,
+                args: ['mobileexport']
+            }], mobilesearch: [{
+                type: ViewChild,
+                args: ['mobilesearch']
+            }], mobilepaginator: [{
+                type: ViewChild,
+                args: ['mobilepaginator']
+            }] } });
+
 class DxReportViewerComponent extends DxReportingComponent {
-    constructor(renderer, platformId) {
+    constructor(renderer, platformId, _viewer, _cd, _accessibilitySettings) {
         super(renderer, platformId);
-        this.koReportUrl = ko.observable();
+        this._viewer = _viewer;
+        this._cd = _cd;
+        this._accessibilitySettings = _accessibilitySettings;
+        this._reportUrl = '';
     }
     getKoBinding(options) {
-        return new JSReportViewerBinding(options, this.getEventRaiser());
+        return new JSReportViewerBinding(options, this.getEventRaiser(), false);
     }
     getCallbacks() {
         return this.callbacksComponent;
@@ -248,7 +2811,7 @@ class DxReportViewerComponent extends DxReportingComponent {
             developmentMode: this.developmentMode,
             isMobile: this.isMobile,
             accessibilityCompliant: this.accessibilityCompliant,
-            reportUrl: this.koReportUrl,
+            reportUrl: this._reportUrl,
             requestOptions: this.requestOptionsComponent,
             mobileModeSettings: this.mobileModeSettingsComponent,
             remoteSettings: this.remoteSettingsComponent,
@@ -263,21 +2826,45 @@ class DxReportViewerComponent extends DxReportingComponent {
     GetPreviewModel() {
         return this.bindingSender.GetPreviewModel();
     }
+    ngAfterViewInit() {
+        var _a;
+        super.ngAfterViewInit();
+        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', (args) => {
+            if (args.propertyName === 'previewModel') {
+                this.viewModel = this.model.GetPreviewModel().getViewModel();
+            }
+        });
+        this._cd.detectChanges();
+    }
+    ngOnDestroy() {
+        this._disposableCallback && this._disposableCallback();
+        super.ngOnDestroy();
+    }
+    get accessibilityCompliant() {
+        return this._accessibilitySettings.accessibilityCompliant;
+    }
+    set accessibilityCompliant(value) {
+        this._accessibilitySettings.accessibilityCompliant = value;
+    }
     get reportUrl() {
-        return this.koReportUrl();
+        return this._reportUrl;
     }
     set reportUrl(reportUrl) {
-        this.koReportUrl(reportUrl);
+        this._reportUrl = reportUrl;
+        if (this.bindingSender)
+            this.bindingSender.OpenReport(reportUrl);
     }
 }
-DxReportViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DxReportViewerComponent, deps: [{ token: i0.Renderer2 }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
-DxReportViewerComponent.ɵcmp = i0.ɵɵ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, template: "<div #control [ngClass]=\"cssClass\" [ngStyle]=\"{'width': width, 'height': height }\">\n  <div data-bind=\"dxReportViewer: $data\"></div>\n</div>", directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None });
+DxReportViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DxReportViewerComponent, deps: [{ token: i0.Renderer2 }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AccessibilitySettings }], target: i0.ɵɵFactoryTarget.Component });
+DxReportViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "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, 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 __decorate([
     _inputConverter(_booleanConverter)
 ], DxReportViewerComponent.prototype, "isMobile", void 0);
 __decorate([
     _inputConverter(_booleanConverter)
-], DxReportViewerComponent.prototype, "accessibilityCompliant", void 0);
+], DxReportViewerComponent.prototype, "accessibilityCompliant", null);
 __decorate([
     _inputConverter(_booleanConverter)
 ], DxReportViewerComponent.prototype, "keepReportOnComponentDisposal", void 0);
@@ -285,14 +2872,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Component,
             args: [{
                     selector: 'dx-report-viewer',
-                    encapsulation: ViewEncapsulation.None,
                     templateUrl: './dx-report-viewer.component.html',
-                    styleUrls: []
+                    styleUrls: [],
+                    providers: [AccessibilitySettings]
                 }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
-                }] }]; }, propDecorators: { requestOptionsComponent: [{
+                }] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AccessibilitySettings }]; }, propDecorators: { requestOptionsComponent: [{
                 type: ContentChild,
                 args: [DxReportViewerRequestOptionsComponent]
             }], callbacksComponent: [{
@@ -337,7 +2924,120 @@ DxReportViewerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ve
         DxReportViewerProgressBarSettingsComponent,
         DxReportViewerExportSettingsComponent,
         DxReportViewerTabPanelSettingsComponent,
-        DxReportViewerSearchSettingsComponent], imports: [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: [CommonModule,
+        DxButtonModule,
+        DxLoadIndicatorModule,
+        DxScrollViewModule,
+        DxSelectBoxModule,
+        DxMenuModule,
+        DxTagBoxModule,
+        DxTextBoxModule,
+        DxValidatorModule,
+        DxDateBoxModule,
+        DxCheckBoxModule,
+        DxNumberBoxModule,
+        DxColorBoxModule,
+        DxPopupModule,
+        DxPopoverModule,
+        DxSliderModule,
+        DxCalendarModule,
+        DxListModule,
+        DxGalleryModule], exports: [DxReportViewerComponent,
         DxReportViewerCallbacksComponent,
         DxReportViewerMobileModeSettingsComponent,
         DxReportViewerRemoteSettingsComponent,
@@ -346,12 +3046,52 @@ DxReportViewerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ve
         DxReportViewerExportSettingsComponent,
         DxReportViewerTabPanelSettingsComponent,
         DxReportViewerSearchSettingsComponent], id: 'DxReportViewerModule' });
-DxReportViewerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DxReportViewerModule, imports: [[CommonModule]] });
+DxReportViewerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DxReportViewerModule, providers: [TemplateEngine], imports: [[
+            CommonModule,
+            DxButtonModule,
+            DxLoadIndicatorModule,
+            DxScrollViewModule,
+            DxSelectBoxModule,
+            DxMenuModule,
+            DxTagBoxModule,
+            DxTextBoxModule,
+            DxValidatorModule,
+            DxDateBoxModule,
+            DxCheckBoxModule,
+            DxNumberBoxModule,
+            DxColorBoxModule,
+            DxPopupModule,
+            DxPopoverModule,
+            DxSliderModule,
+            DxCalendarModule,
+            DxListModule,
+            DxGalleryModule
+        ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DxReportViewerModule, decorators: [{
             type: NgModule,
             args: [{
                     id: 'DxReportViewerModule',
-                    imports: [CommonModule],
+                    imports: [
+                        CommonModule,
+                        DxButtonModule,
+                        DxLoadIndicatorModule,
+                        DxScrollViewModule,
+                        DxSelectBoxModule,
+                        DxMenuModule,
+                        DxTagBoxModule,
+                        DxTextBoxModule,
+                        DxValidatorModule,
+                        DxDateBoxModule,
+                        DxCheckBoxModule,
+                        DxNumberBoxModule,
+                        DxColorBoxModule,
+                        DxPopupModule,
+                        DxPopoverModule,
+                        DxSliderModule,
+                        DxCalendarModule,
+                        DxListModule,
+                        DxGalleryModule
+                    ],
                     declarations: [
                         DxReportViewerComponent,
                         DxReportViewerCallbacksComponent,
@@ -361,7 +3101,102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         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,
@@ -373,7 +3208,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         DxReportViewerExportSettingsComponent,
                         DxReportViewerTabPanelSettingsComponent,
                         DxReportViewerSearchSettingsComponent
-                    ]
+                    ],
+                    providers: [TemplateEngine]
                 }]
         }] });
 
@@ -385,5 +3221,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DxReportViewerCallbacksComponent, DxReportViewerComponent, DxReportViewerExportSettingsComponent, DxReportViewerMobileModeSettingsComponent, DxReportViewerModule, DxReportViewerProgressBarSettingsComponent, DxReportViewerRemoteSettingsComponent, DxReportViewerRequestOptionsComponent, DxReportViewerSearchSettingsComponent, DxReportViewerTabPanelSettingsComponent };
+export { DxReportViewerCallbacksComponent, DxReportViewerComponent, DxReportViewerExportSettingsComponent, DxReportViewerMobileModeSettingsComponent, DxReportViewerModule, DxReportViewerProgressBarSettingsComponent, DxReportViewerRemoteSettingsComponent, DxReportViewerRequestOptionsComponent, DxReportViewerSearchSettingsComponent, DxReportViewerTabPanelSettingsComponent, TemplateEngine };
 //# sourceMappingURL=devexpress-reporting-angular-dx-report-viewer.js.map