devexpress-reporting-angular 23.2.6 → 24.1.2-beta

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

@@ -0,0 +1,3525 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, Output, Input, Injectable, PLATFORM_ID, Inject, ViewChild, Directive, HostListener, ElementRef, ContentChild, NgModule } from '@angular/core';
+import { __decorate } from 'tslib';
+import { _inputConverter, _booleanConverter, DxReportingComponent } from 'devexpress-reporting-angular/core';
+import '@devexpress/analytics-core/dx-analytics-core-svg-templates';
+import 'devexpress-reporting/dx-reporting-svg-templates';
+import { JSReportViewerBinding } from 'devexpress-reporting/viewer/binding/jsReportViewerBinding';
+import { ViewModelChangedEvent } from '@devexpress/analytics-core/serializer/native/viewModels/viewModelGenerator';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { SvgTemplatesEngine } from '@devexpress/analytics-core/property-grid/widgets/internal/_svgTemplateEngine';
+import { getTemplate } from '@devexpress/analytics-core/property-grid/widgets/templateUtils';
+import { KeyboardEnum } from '@devexpress/analytics-core/property-grid/widgets/internal/_utils';
+import { initializeResize, initializeBaseResizableOptions } from '@devexpress/analytics-core/core/internal/_resizable';
+import { initializeMutationObserver } from '@devexpress/analytics-core/accessibility/_dxMutationObserver';
+import { extend } from '@devexpress/analytics-core/analytics-internal-native';
+import { InitAccordion } from '@devexpress/analytics-core/property-grid/bindings.accordion';
+import { InitButtonWithTemplate } from '@devexpress/analytics-core/core/widgets/_buttonInlineEditor';
+import { globalResolver } from '@devexpress/analytics-core/property-grid/internal/_codeResolver';
+import { getParentContainer } from '@devexpress/analytics-core/widgets/_utils';
+import * as i2 from 'devextreme-angular';
+import { DxButtonModule, DxLoadIndicatorModule, DxScrollViewModule, DxSelectBoxModule, DxMenuModule, DxTagBoxModule, DxTextBoxModule, DxValidatorModule, DxDateBoxModule, DxCheckBoxModule, DxNumberBoxModule, DxColorBoxModule, DxPopupModule, DxPopoverModule, DxSliderModule, DxCalendarModule, DxListModule, DxGalleryModule } from 'devextreme-angular';
+import { CollectionEditorViewModel } from '@devexpress/analytics-core/property-grid/widgets/collectioneditor/_editor';
+import { noDataText, getLocalization } from '@devexpress/analytics-core/property-grid/localization/_localization';
+import * as i2$1 from 'devextreme-angular/core';
+import { GetWindowKeyDownHandlersManager } from '@devexpress/analytics-core/core/tools/_keyboardHelper';
+import { createDateRangeEditor } from 'devexpress-reporting/viewer/widgets/dateRange/dateRangeEditor';
+import { dxEllipsisEditor } from '@devexpress/analytics-core/property-grid/widgets/ellipsiseditor/_editor';
+import { calculateWithZoomFactor } from '@devexpress/analytics-core/accessibility/_internal';
+import { getLocalization as getLocalization$1 } from '@devexpress/analytics-core/property-grid/localization/localization_utils';
+import { initializeLazyImagesBinding, initializeAutoFitBinding, initializeToViewBinding, initializeChildStyleBinding, initializeViewerExportBinding } from 'devexpress-reporting/viewer/internal/_bindings';
+import { initializeBrickSelectionProg } from 'devexpress-reporting/viewer/internal/_previewSelection';
+import { initTreeListBinding } from '@devexpress/analytics-core/widgets/treelist/_binding';
+import { updateZoomBinding } from '@devexpress/analytics-core/core/_updateZoomBinding';
+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 * as i1$1 from '@angular/platform-browser';
+import { initializeSlideBinding, initializeMobileZoomBinding, initializeMobileSearchBinding, initializeMobilePaginatorBinding } from 'devexpress-reporting/viewer/mobile/internal/_mobileBindings';
+import { dxGalleryExtender } from 'devexpress-reporting/viewer/mobile/internal/gallery/_galleryComponent';
+import { JSReportParametersPanelBinding } from 'devexpress-reporting/viewer/binding/jsReportParametersPanelBinding';
+
+class DxReportViewerCallbacksBaseComponent {
+    CustomizeParameterEditors = new EventEmitter();
+    CustomizeParameterLookUpSource = new EventEmitter();
+    ParametersReset = new EventEmitter();
+    ParametersSubmitted = new EventEmitter();
+    ParametersInitialized = new EventEmitter();
+    CustomizeLocalization = new EventEmitter();
+    OnInitializing = new EventEmitter();
+    BeforeRender = new EventEmitter();
+    OnServerError = new EventEmitter();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DxReportViewerCallbacksBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DxReportViewerCallbacksBaseComponent, selector: "ng-component", outputs: { CustomizeParameterEditors: "CustomizeParameterEditors", CustomizeParameterLookUpSource: "CustomizeParameterLookUpSource", ParametersReset: "ParametersReset", ParametersSubmitted: "ParametersSubmitted", ParametersInitialized: "ParametersInitialized", CustomizeLocalization: "CustomizeLocalization", OnInitializing: "OnInitializing", BeforeRender: "BeforeRender", OnServerError: "OnServerError" }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DxReportViewerCallbacksBaseComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: ''
+                }]
+        }], propDecorators: { CustomizeParameterEditors: [{
+                type: Output
+            }], CustomizeParameterLookUpSource: [{
+                type: Output
+            }], ParametersReset: [{
+                type: Output
+            }], ParametersSubmitted: [{
+                type: Output
+            }], ParametersInitialized: [{
+                type: Output
+            }], CustomizeLocalization: [{
+                type: Output
+            }], OnInitializing: [{
+                type: Output
+            }], BeforeRender: [{
+                type: Output
+            }], OnServerError: [{
+                type: Output
+            }] } });
+
+class DxReportViewerCallbacksComponent extends DxReportViewerCallbacksBaseComponent {
+    CustomizeElements = new EventEmitter();
+    PreviewClick = new EventEmitter();
+    EditingFieldChanged = new EventEmitter();
+    DocumentReady = new EventEmitter();
+    CustomizeExportOptions = new EventEmitter();
+    CustomizeMenuActions = new EventEmitter();
+    OnExport = new EventEmitter();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DxReportViewerCallbacksComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DxReportViewerCallbacksComponent, selector: "dxrv-callbacks", outputs: { CustomizeElements: "CustomizeElements", PreviewClick: "PreviewClick", EditingFieldChanged: "EditingFieldChanged", DocumentReady: "DocumentReady", CustomizeExportOptions: "CustomizeExportOptions", CustomizeMenuActions: "CustomizeMenuActions", OnExport: "OnExport" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DxReportViewerCallbacksComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                    selector: 'dxrv-callbacks'
+                }]
+        }], propDecorators: { CustomizeElements: [{
+                type: Output
+            }], PreviewClick: [{
+                type: Output
+            }], EditingFieldChanged: [{
+                type: Output
+            }], DocumentReady: [{
+                type: Output
+            }], CustomizeExportOptions: [{
+                type: Output
+            }], CustomizeMenuActions: [{
+                type: Output
+            }], OnExport: [{
+                type: Output
+            }] } });
+
+class DxRequestOptionsBaseComponent {
+    invokeAction = '/DXXRDV';
+    getLocalizationAction;
+    host;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DxRequestOptionsBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DxRequestOptionsBaseComponent, selector: "ng-component", inputs: { invokeAction: "invokeAction", getLocalizationAction: "getLocalizationAction", host: "host" }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DxRequestOptionsBaseComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: ''
+                }]
+        }], propDecorators: { invokeAction: [{
+                type: Input
+            }], getLocalizationAction: [{
+                type: Input
+            }], host: [{
+                type: Input
+            }] } });
+
+class DxReportViewerRequestOptionsComponent extends DxRequestOptionsBaseComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DxReportViewerRequestOptionsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DxReportViewerRequestOptionsComponent, selector: "dxrv-request-options", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DxReportViewerRequestOptionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                    selector: 'dxrv-request-options'
+                }]
+        }] });
+
+class DxReportViewerExportSettingsComponent {
+    useSameTab;
+    useAsynchronousExport;
+    showPrintNotificationDialog;
+    getSerializableSettings() {
+        return {
+            useSameTab: this.useSameTab,
+            useAsynchronousExport: this.useAsynchronousExport,
+            showPrintNotificationDialog: this.showPrintNotificationDialog
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DxReportViewerExportSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DxReportViewerExportSettingsComponent, selector: "dxrv-export-settings", inputs: { useSameTab: "useSameTab", useAsynchronousExport: "useAsynchronousExport", showPrintNotificationDialog: "showPrintNotificationDialog" }, ngImport: i0, template: '', isInline: true });
+}
+__decorate([
+    _inputConverter(_booleanConverter)
+], DxReportViewerExportSettingsComponent.prototype, "useSameTab", void 0);
+__decorate([
+    _inputConverter(_booleanConverter)
+], DxReportViewerExportSettingsComponent.prototype, "useAsynchronousExport", void 0);
+__decorate([
+    _inputConverter(_booleanConverter)
+], DxReportViewerExportSettingsComponent.prototype, "showPrintNotificationDialog", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DxReportViewerExportSettingsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                    selector: 'dxrv-export-settings'
+                }]
+        }], propDecorators: { useSameTab: [{
+                type: Input
+            }], useAsynchronousExport: [{
+                type: Input
+            }], showPrintNotificationDialog: [{
+                type: Input
+            }] } });
+
+class DxReportViewerMobileModeSettingsComponent {
+    readerMode;
+    animationEnabled;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DxReportViewerMobileModeSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DxReportViewerMobileModeSettingsComponent, selector: "dxrv-mobile-mode-settings", inputs: { readerMode: "readerMode", animationEnabled: "animationEnabled" }, ngImport: i0, template: '', isInline: true });
+}
+__decorate([
+    _inputConverter(_booleanConverter)
+], DxReportViewerMobileModeSettingsComponent.prototype, "readerMode", void 0);
+__decorate([
+    _inputConverter(_booleanConverter)
+], DxReportViewerMobileModeSettingsComponent.prototype, "animationEnabled", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DxReportViewerMobileModeSettingsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                    selector: 'dxrv-mobile-mode-settings'
+                }]
+        }], propDecorators: { readerMode: [{
+                type: Input
+            }], animationEnabled: [{
+                type: Input
+            }] } });
+
+class DxReportViewerProgressBarSettingsComponent {
+    position;
+    keepOnVisibleArea;
+    getSerializableSettings() {
+        return {
+            position: this.position,
+            keepOnVisibleArea: this.keepOnVisibleArea,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DxReportViewerProgressBarSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DxReportViewerProgressBarSettingsComponent, selector: "dxrv-progressbar-settings", inputs: { position: "position", keepOnVisibleArea: "keepOnVisibleArea" }, ngImport: i0, template: '', isInline: true });
+}
+__decorate([
+    _inputConverter(_booleanConverter)
+], DxReportViewerProgressBarSettingsComponent.prototype, "keepOnVisibleArea", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DxReportViewerProgressBarSettingsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                    selector: 'dxrv-progressbar-settings'
+                }]
+        }], propDecorators: { position: [{
+                type: Input
+            }], keepOnVisibleArea: [{
+                type: Input
+            }] } });
+
+class DxReportViewerRemoteSettingsComponent {
+    authToken;
+    serverUri;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DxReportViewerRemoteSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DxReportViewerRemoteSettingsComponent, selector: "dxrv-remote-settings", inputs: { authToken: "authToken", serverUri: "serverUri" }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DxReportViewerRemoteSettingsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                    selector: 'dxrv-remote-settings'
+                }]
+        }], propDecorators: { authToken: [{
+                type: Input
+            }], serverUri: [{
+                type: Input
+            }] } });
+
+class DxReportViewerTabPanelSettingsComponent {
+    position;
+    width;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DxReportViewerTabPanelSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DxReportViewerTabPanelSettingsComponent, selector: "dxrv-tabpanel-settings", inputs: { position: "position", width: "width" }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DxReportViewerTabPanelSettingsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                    selector: 'dxrv-tabpanel-settings'
+                }]
+        }], propDecorators: { position: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }] } });
+
+class DxReportViewerSearchSettingsComponent {
+    searchEnabled;
+    useAsyncSearch;
+    getSerializableSettings() {
+        return {
+            useAsyncSearch: this.useAsyncSearch,
+            searchEnabled: this.searchEnabled
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DxReportViewerSearchSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DxReportViewerSearchSettingsComponent, selector: "dxrv-search-settings", inputs: { searchEnabled: "searchEnabled", useAsyncSearch: "useAsyncSearch" }, ngImport: i0, template: '', isInline: true });
+}
+__decorate([
+    _inputConverter(_booleanConverter)
+], DxReportViewerSearchSettingsComponent.prototype, "searchEnabled", void 0);
+__decorate([
+    _inputConverter(_booleanConverter)
+], DxReportViewerSearchSettingsComponent.prototype, "useAsyncSearch", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DxReportViewerSearchSettingsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                    selector: 'dxrv-search-settings'
+                }]
+        }], propDecorators: { searchEnabled: [{
+                type: Input
+            }], useAsyncSearch: [{
+                type: Input
+            }] } });
+
+class AccessibilitySettings {
+    accessibilityCompliant = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccessibilitySettings, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccessibilitySettings, providedIn: null });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccessibilitySettings, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: null
+                }]
+        }] });
+
+class DxReportViewerBaseComponent extends DxReportingComponent {
+    _viewer;
+    _cd;
+    _accessibilitySettings;
+    _reportUrl = '';
+    _disposableCallback;
+    _disposeViewModelChangedSubscription;
+    viewModel;
+    model;
+    _binding;
+    bindingSender;
+    constructor(renderer, platformId, _viewer, _cd, _accessibilitySettings) {
+        super(renderer, platformId);
+        this._viewer = _viewer;
+        this._cd = _cd;
+        this._accessibilitySettings = _accessibilitySettings;
+    }
+    getControlOptions() {
+        return {
+            rtl: this.rtl,
+            accessibilityCompliant: this.accessibilityCompliant,
+            reportUrl: this._reportUrl,
+            keepReportOnComponentDisposal: this.keepReportOnComponentDisposal,
+            callbacks: {}
+        };
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        this.model = this._binding.sender;
+        this.viewModel = this.model.GetPreviewModel()?.getViewModel();
+        this._disposeViewModelChangedSubscription = this._subscribeToViewModelChanged(this.viewModel);
+        this._disposableCallback = this.model.events.on('propertyChanged', (args) => {
+            if (args.propertyName === 'previewModel') {
+                this.viewModel = this.model.GetPreviewModel().getViewModel();
+                this._disposeViewModelChangedSubscription && this._disposeViewModelChangedSubscription();
+                this._disposeViewModelChangedSubscription = this._subscribeToViewModelChanged(this.viewModel);
+            }
+        });
+        this._cd.detectChanges();
+    }
+    ngOnDestroy() {
+        this._disposableCallback && this._disposableCallback();
+        this._disposeViewModelChangedSubscription && this._disposeViewModelChangedSubscription();
+        this._binding.dispose();
+        super.ngOnDestroy();
+    }
+    _subscribeToViewModelChanged(viewModel) {
+        const eventHolder = viewModel;
+        return eventHolder?._viewModelEvents?.on(ViewModelChangedEvent, () => this._cd.markForCheck());
+    }
+    get accessibilityCompliant() {
+        return this._accessibilitySettings.accessibilityCompliant;
+    }
+    set accessibilityCompliant(value) {
+        this._accessibilitySettings.accessibilityCompliant = value;
+    }
+    keepReportOnComponentDisposal;
+    rtl;
+    get reportUrl() {
+        return this._reportUrl;
+    }
+    set reportUrl(reportUrl) {
+        this._reportUrl = reportUrl;
+        if (this.bindingSender)
+            this.bindingSender.OpenReport(reportUrl);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DxReportViewerBaseComponent, deps: [{ token: i0.Renderer2 }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AccessibilitySettings }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DxReportViewerBaseComponent, selector: "ng-component", inputs: { accessibilityCompliant: "accessibilityCompliant", keepReportOnComponentDisposal: "keepReportOnComponentDisposal", rtl: "rtl", reportUrl: "reportUrl" }, providers: [AccessibilitySettings], usesInheritance: true, ngImport: i0, template: '', isInline: true });
+}
+__decorate([
+    _inputConverter(_booleanConverter)
+], DxReportViewerBaseComponent.prototype, "accessibilityCompliant", null);
+__decorate([
+    _inputConverter(_booleanConverter)
+], DxReportViewerBaseComponent.prototype, "keepReportOnComponentDisposal", void 0);
+__decorate([
+    _inputConverter(_booleanConverter)
+], DxReportViewerBaseComponent.prototype, "rtl", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DxReportViewerBaseComponent, decorators: [{
+            type: Component,
+            args: [{ template: '', providers: [AccessibilitySettings] }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AccessibilitySettings }]; }, propDecorators: { accessibilityCompliant: [{
+                type: Input
+            }], keepReportOnComponentDisposal: [{
+                type: Input
+            }], rtl: [{
+                type: Input
+            }], reportUrl: [{
+                type: Input
+            }] } });
+
+class TemplateEngine {
+    templates;
+    constructor() {
+        this.templates = [];
+    }
+    register(id, ref) {
+        this.templates.push({ ref, id });
+    }
+    hasTemplate(id) {
+        const template = this.templates.find((template) => template.id === id);
+        return !!template;
+    }
+    getTemplateRef(templateId) {
+        const template = this.templates.find((template) => template.id === templateId);
+        return template ? template.ref : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TemplateEngine, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TemplateEngine, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TemplateEngine, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class ImageTemplateComponent {
+    _template;
+    _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();
+    }
+    image;
+    ngAfterViewInit() {
+        this._updateImage();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: "16.2.12", 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 {
+    _templateEngine;
+    _cd;
+    data;
+    template;
+    isImage = false;
+    templateRef;
+    constructor(_templateEngine, _cd) {
+        this._templateEngine = _templateEngine;
+        this._cd = _cd;
+    }
+    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();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TemplateComponent, deps: [{ token: TemplateEngine }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TemplateComponent, selector: "dxa-template", inputs: { data: "data", template: "template" }, ngImport: i0, template: "<ng-container *ngIf=\"!isImage\" [ngTemplateOutlet]=\"templateRef\" [ngTemplateOutletContext]=\"{ data: data }\"></ng-container>\n<dxa-image-template *ngIf=\"isImage\" [template]=\"template\"></dxa-image-template> ", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ImageTemplateComponent, selector: "dxa-image-template", inputs: ["template"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TemplateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxa-template', template: "<ng-container *ngIf=\"!isImage\" [ngTemplateOutlet]=\"templateRef\" [ngTemplateOutletContext]=\"{ data: data }\"></ng-container>\n<dxa-image-template *ngIf=\"isImage\" [template]=\"template\"></dxa-image-template> " }]
+        }], ctorParameters: function () { return [{ type: TemplateEngine }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }], template: [{
+                type: Input,
+                args: ['template']
+            }] } });
+
+class DxActionDirective {
+    model;
+    action;
+    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);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DxActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", 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: "16.2.12", 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 {
+    _element;
+    _disposeFunc;
+    set options(newVal) {
+        if (!this._disposeFunc && newVal) {
+            this._disposeFunc = initializeResize(this._element.nativeElement, initializeBaseResizableOptions(newVal));
+        }
+    }
+    constructor(_element) {
+        this._element = _element;
+    }
+    ngOnDestroy() {
+        this._disposeFunc && this._disposeFunc();
+        this._disposeFunc = undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResizableDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ResizableDirective, selector: "[dxaResizable]", inputs: { options: ["dxaResizable", "options"] }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResizableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dxaResizable]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { options: [{
+                type: Input,
+                args: ['dxaResizable']
+            }] } });
+
+class BaseDisposableDirective {
+    _element;
+    eventName = 'onInit';
+    _disposeFunc = () => void 0;
+    constructor(_element) {
+        this._element = _element;
+    }
+    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;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseDisposableDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: BaseDisposableDirective, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseDisposableDirective, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+class DxMutationObserverDirective extends BaseDisposableDirective {
+    _accessibilitySettings;
+    mutationObserverArgs;
+    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;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DxMutationObserverDirective, deps: [{ token: i0.ElementRef }, { token: AccessibilitySettings }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: { mutationObserverArgs: ["dxMutationObserver", "mutationObserverArgs"] }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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 TabpanelComponent {
+    _cd;
+    tabPanel;
+    resizableOptions;
+    rightPanel;
+    constructor(_cd) {
+        this._cd = _cd;
+    }
+    ngAfterViewInit() {
+        this.resizableOptions = this.tabPanel.getResizableOptions(this.rightPanel.nativeElement, 50, 396);
+        this._cd.detectChanges();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabpanelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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.aria-label]=\"tab.text\"\n            [attr.aria-expanded]=\"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>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "directive", type: DxActionDirective, selector: "[dxAction]", inputs: ["dxActionModel", "dxAction"] }, { kind: "directive", type: ResizableDirective, selector: "[dxaResizable]", inputs: ["dxaResizable"] }, { kind: "directive", type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabpanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxa-tabpanel', 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.aria-label]=\"tab.text\"\n            [attr.aria-expanded]=\"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>" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { tabPanel: [{
+                type: Input,
+                args: ['data']
+            }], rightPanel: [{
+                type: ViewChild,
+                args: ['rightPanel', { read: ElementRef }]
+            }] } });
+
+class PropertygridComponent {
+    data;
+    trackByFn(_, item) {
+        return item.editorInputId;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PropertygridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PropertygridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxa-propertygrid', 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>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class TreeListItemComponent {
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeListItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxa-treelist-item', 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>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class TreeListHeaderItemComponent {
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeListHeaderItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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.ContextMenusEnabled && $root.ContextMenusEnabled() ? { contextmenu: toggleSelected } : null, 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.ContextMenusEnabled && $root.ContextMenusEnabled() ? { contextmenu: toggleSelected } : null\">\n                    <dxa-template [template]=\"data.templates.headerItemContent\" [data]=\"data\"></dxa-template>\n                </div>\n            </div>\n        </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeListHeaderItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxa-treelist-header-item', 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.ContextMenusEnabled && $root.ContextMenusEnabled() ? { contextmenu: toggleSelected } : null, 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.ContextMenusEnabled && $root.ContextMenusEnabled() ? { contextmenu: toggleSelected } : null\">\n                    <dxa-template [template]=\"data.templates.headerItemContent\" [data]=\"data\"></dxa-template>\n                </div>\n            </div>\n        </div>\n</div>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class TreeListItemTextComponent {
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeListItemTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeListItemTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxa-treelist-item-text-content', 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>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class TreeListHeaderItemCaptionContentComponent {
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeListHeaderItemCaptionContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeListHeaderItemCaptionContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxa-treelist-header-item-caption-content', 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>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class AccordionDirective extends BaseDisposableDirective {
+    options;
+    InitAndReturnDisposeFunc(element) {
+        return InitAccordion(element, this.options);
+    }
+    eventName = 'afterViewInit';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccordionDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AccordionDirective, selector: "[dxaAccordion]", inputs: { options: ["dxaAccordion", "options"] }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccordionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dxaAccordion]'
+                }]
+        }], propDecorators: { options: [{
+                type: Input,
+                args: ['dxaAccordion']
+            }] } });
+
+class ButtonWithTemplateDirective extends BaseDisposableDirective {
+    options;
+    InitAndReturnDisposeFunc(element) {
+        return InitButtonWithTemplate(element, this.options);
+    }
+    eventName = 'afterViewInit';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonWithTemplateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ButtonWithTemplateDirective, selector: "[dxaButtonWithTemplate]", inputs: { options: ["dxaButtonWithTemplate", "options"] }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonWithTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dxaButtonWithTemplate]'
+                }]
+        }], propDecorators: { options: [{
+                type: Input,
+                args: ['dxaButtonWithTemplate']
+            }] } });
+
+class LazyTemplateComponent extends TemplateComponent {
+    task;
+    _isDisposed = false;
+    resolver;
+    isResolved;
+    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;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LazyTemplateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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> ", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ImageTemplateComponent, selector: "dxa-image-template", inputs: ["template"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LazyTemplateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxa-lazy-template', 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> " }]
+        }], propDecorators: { resolver: [{
+                type: Input,
+                args: ['resolver']
+            }], isResolved: [{
+                type: Input,
+                args: ['isResolved']
+            }] } });
+
+class EditorComponentBase {
+    _cd;
+    data;
+    widget;
+    options;
+    _disposableCallbacks = [];
+    validatorOptions;
+    getEditorOptions() {
+        return {};
+    }
+    getOptions() {
+        return this.data.getOptions(this.getEditorOptions());
+    }
+    getPrivateWidgetOptions() {
+        return null;
+    }
+    onPropertyChanged() {
+        const currentOptions = this.getOptions();
+        for (const name in currentOptions) {
+            if (typeof currentOptions[name] !== 'function' && currentOptions[name] !== this.options[name]) {
+                if (Array.isArray(currentOptions[name])) {
+                    if (JSON.stringify(this.options[name]) !== JSON.stringify(currentOptions[name]))
+                        this.options[name] = currentOptions[name];
+                }
+                else {
+                    this.options[name] = currentOptions[name];
+                }
+            }
+        }
+    }
+    constructor(_cd) {
+        this._cd = _cd;
+    }
+    ngAfterViewInit() {
+        if (!this.widget || !(this.data.extendedOptions || this.getPrivateWidgetOptions()))
+            return;
+        const dxWidget = this.widget.instance;
+        dxWidget.beginUpdate();
+        const options = extend(true, {}, this.getPrivateWidgetOptions(), this.data.extendedOptions);
+        dxWidget.option(options);
+        dxWidget.endUpdate();
+        this._cd.detectChanges();
+    }
+    ngOnInit() {
+        this.options = this.getOptions();
+        const model = this.data.getModel();
+        this._disposableCallbacks.push(model.events.on('propertyChanged', (args) => {
+            this.onPropertyChanged();
+        }));
+        this.validatorOptions = this.data.getValidatorOptions(this.data.validatorOptions || { validationRules: this.data.validationRules || [] });
+    }
+    ngOnDestroy() {
+        this._disposableCallbacks?.forEach(disposer => disposer());
+    }
+    isResolved(newVal) {
+        this.data.setIsRendered(newVal);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorComponentBase, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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\">\n    <div class=\"dx-group\" [dxaAccordion]=\"data\">\n        <div class=\"dx-editor-header\">\n            <div class=\"dx-field\" \n                role=\"treeitem\"\n                [attr.id]=\"data.isComplexEditor ? data.headerId : undefined\"\n                [attr.aria-owns]=\"data.isComplexEditor ? data.contentId : undefined\"\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                    <div class=\"dx-field-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                        <div *ngIf=\"data.isComplexEditor\" [attr.disabled]=\"data.templateName !== 'dx-emptyHeader'\">\n                            <dxa-template class=\"dx-collapsing-image dxrd-display-inline-block\" template=\"dxrd-svg-collapsed\" \n                             [class.dx-image-expanded]=\"!data.collapsed\"></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 *ngIf=\"!data.isComplexEditor && data.editorDescriptionAddon\"\n                            class=\"propertygrid-editor-description\"\n                            [dxaButtonWithTemplate]=\"{ onClick: data.editorDescriptionAddon.data.onClick, icon: 'dxrd-svg-tabs-description_info' }\"></div>\n                        </div>\n                <div class=\"dx-field-value\" \n                [class.dxd-border-accented]=\"data.isPropertyHighlighted\">\n                    <!-- <div data-bind=\"service: { name: 'createEditorAddOn' }\"></div> -->\n                    <dxa-lazy-template *ngIf=\"data.templateName !== 'dx-emptyHeader'\" [isResolved]=\"isResolved\" [template]=\"data.templateName\" [data]=\"data\"></dxa-lazy-template>\n                    <!-- ko if: templateName !== 'dx-emptyHeader' -->\n                    <!-- ko lazy: { innerBindings: { template: templateName }, isResolved: function(val) { $data.setIsRendered(val) } } -->\n                    <!-- /ko -->\n                    <!-- /ko -->\n                </div>\n            </div>\n        </div>\n        <div *ngIf=\"data.isComplexEditor\" class=\"dx-editor-content dx-accordion-content\" role=\"group\" \n        [attr.aria-labelledby]=\"data.headerId\"\n        [attr.id]=\"data.contentId\"\n        [attr.aria-hidden]=\"!data.alwaysShow && data.collapsed ? 'true' : 'false'\">\n        <dxa-template *ngIf=\"data.editorCreated\" [template]=\"data.contentTemplateName\" [data]=\"data\"></dxa-template>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "directive", type: AccordionDirective, selector: "[dxaAccordion]", inputs: ["dxaAccordion"] }, { kind: "directive", type: ButtonWithTemplateDirective, selector: "[dxaButtonWithTemplate]", inputs: ["dxaButtonWithTemplate"] }, { kind: "component", type: LazyTemplateComponent, selector: "dxa-lazy-template", inputs: ["resolver", "isResolved"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorComponentBase, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxa-editor', template: "<div class=\"dx-editor\" [hidden]=\"!data.visible\">\n    <div class=\"dx-group\" [dxaAccordion]=\"data\">\n        <div class=\"dx-editor-header\">\n            <div class=\"dx-field\" \n                role=\"treeitem\"\n                [attr.id]=\"data.isComplexEditor ? data.headerId : undefined\"\n                [attr.aria-owns]=\"data.isComplexEditor ? data.contentId : undefined\"\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                    <div class=\"dx-field-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                        <div *ngIf=\"data.isComplexEditor\" [attr.disabled]=\"data.templateName !== 'dx-emptyHeader'\">\n                            <dxa-template class=\"dx-collapsing-image dxrd-display-inline-block\" template=\"dxrd-svg-collapsed\" \n                             [class.dx-image-expanded]=\"!data.collapsed\"></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 *ngIf=\"!data.isComplexEditor && data.editorDescriptionAddon\"\n                            class=\"propertygrid-editor-description\"\n                            [dxaButtonWithTemplate]=\"{ onClick: data.editorDescriptionAddon.data.onClick, icon: 'dxrd-svg-tabs-description_info' }\"></div>\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>" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }], widget: [{
+                type: ViewChild,
+                args: ['widget']
+            }] } });
+
+class EditorDropDownComponentBase extends EditorComponentBase {
+    currentElement;
+    container;
+    target;
+    beforeDetectChanges() {
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        this.container = getParentContainer(this.target.nativeElement);
+        this.currentElement = this.target.nativeElement;
+        this.beforeDetectChanges();
+        this._cd.detectChanges();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorDropDownComponentBase, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: "16.2.12", ngImport: i0, type: EditorDropDownComponentBase, decorators: [{
+            type: Component,
+            args: [{
+                    template: ''
+                }]
+        }], propDecorators: { target: [{
+                type: ViewChild,
+                args: ['target', { read: ElementRef }]
+            }] } });
+
+class DateEditorComponent extends EditorDropDownComponentBase {
+    dropDownOptions;
+    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
+            }
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateEditorComponent, selector: "dxa-date", usesInheritance: true, ngImport: i0, template: "<div class=\"dx-datebox-container\">\n    <dx-date-box #target #widget\n        [value]=\"options.value\"\n        [type]=\"options.type\"\n        [disabled]=\"options.disabled\"\n        (onValueChanged)=\"options.onValueChanged($event)\"\n        [inputAttr]=\"options.inputAttr\"\n        [placeholder]=\"options.placeholder\"\n        [showClearButton]=\"options.showClearButton\"\n        [dropDownOptions]=\"dropDownOptions\">\n        <dx-validator [validationRules]=\"validatorOptions.validationRules\">\n        </dx-validator>\n    </dx-date-box>\n</div>", dependencies: [{ kind: "component", type: i2.DxValidatorComponent, selector: "dx-validator", inputs: ["adapter", "elementAttr", "height", "name", "validationGroup", "validationRules", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValidated", "adapterChange", "elementAttrChange", "heightChange", "nameChange", "validationGroupChange", "validationRulesChange", "widthChange"] }, { kind: "component", type: i2.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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxa-date', template: "<div class=\"dx-datebox-container\">\n    <dx-date-box #target #widget\n        [value]=\"options.value\"\n        [type]=\"options.type\"\n        [disabled]=\"options.disabled\"\n        (onValueChanged)=\"options.onValueChanged($event)\"\n        [inputAttr]=\"options.inputAttr\"\n        [placeholder]=\"options.placeholder\"\n        [showClearButton]=\"options.showClearButton\"\n        [dropDownOptions]=\"dropDownOptions\">\n        <dx-validator [validationRules]=\"validatorOptions.validationRules\">\n        </dx-validator>\n    </dx-date-box>\n</div>" }]
+        }] });
+
+class CollectionEditorComponent {
+    _changeDetectorRef;
+    options;
+    contentTemplate;
+    data;
+    _vmSubscription;
+    _model;
+    constructor(_changeDetectorRef) {
+        this._changeDetectorRef = _changeDetectorRef;
+    }
+    ngOnDestroy() {
+        this._vmSubscription && this._vmSubscription();
+        this._model.dispose();
+    }
+    ngOnInit() {
+        this._model = new CollectionEditorViewModel(this.options);
+        this.data = this._model.getViewModel();
+        this._vmSubscription = this.data
+            ._viewModelEvents.on(ViewModelChangedEvent, () => this._changeDetectorRef.markForCheck());
+    }
+    onScrollViewInitialized(args) {
+        args.component.option('useKeyboard', false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CollectionEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CollectionEditorComponent, selector: "dxa-collectioneditor", inputs: { options: ["data", "options"], contentTemplate: "contentTemplate" }, ngImport: i0, template: "<div class=\"dx-collectioneditor\">\n    <div [dxaAccordion]=\"data\" [dxMutationObserver]=\"data.keyboardHelper\">\n        <div class=\"dx-collectioneditor-header dx-accordion-header\">\n            <div class=\"dx-editor-header\">\n                <div role=\"treeitem\"\n                    class=\"dx-field dx-accessibility-focus-border-accented dxrd-accessibility-accordion-trigger\"\n                    [attr.aria-expanded]=\"data.alwaysShow || !data.collapsed ? 'true' : 'false'\"\n                    [attr.aria-owns]=\"data.contentId\" [attr.id]=\"data.headerId\">\n                    <div *ngIf=\"data.showButtons\" class=\"dx-collectioneditor-actions-wrapper\">\n                        <dx-button *ngIf=\"data.buttons.up.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.up.action($event)\" [disabled]=\"data.buttons.up.disabled\"\n                            icon=\"dxrd-svg-operations-moveup\" iconClass=\"dx-image-moveup\"\n                            [template]=\"data.buttons.up.template\"\n                            [attr.title]=\"data.buttons.up.text\"></dx-button>\n                        <dx-button *ngIf=\"data.buttons.down.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.down.action($event)\" [disabled]=\"data.buttons.down.disabled\"\n                            icon=\"dxrd-svg-operations-movedown\" iconClass=\"dx-image-movedown\"\n                            [template]=\"data.buttons.down.template\"\n                            [attr.title]=\"data.buttons.down.text\"></dx-button>\n                        <div class=\"dx-collectioneditor-action-separator\"></div>\n                        <dx-button *ngIf=\"data.buttons.add.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.add.action($event)\" [disabled]=\"data.buttons.add.disabled\"\n                            [template]=\"data.buttons.add.template\"\n                            icon=\"dxrd-svg-operations-add\" iconClass=\"dx-image-add\"\n                            [attr.title]=\"data.buttons.add.text\"></dx-button>\n                        <dx-button *ngIf=\"data.buttons.delete.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.delete.action($event)\" [disabled]=\"data.buttons.delete.disabled\"\n                            [template]=\"data.buttons.delete.template\"\n                            icon=\"dxrd-svg-operations-remove\" iconClass=\"dx-image-remove\"\n                            [attr.title]=\"data.buttons.delete.text\"></dx-button>\n                    </div>\n                    <div *ngIf=\"!!data.displayName\" class=\"dx-collectioneditor-header-text dxd-text-primary\"\n                        [style.padding-left]=\"data.padding + 'px'\">\n                        <dxa-template class=\"dx-collapsing-image dxrd-display-inline-block\"\n                            template=\"dxrd-svg-collapsed\"\n                            [class.dx-image-expanded]=\"!data.collapsed \"></dxa-template>\n                        <div class=\"dx-group-header-font dxd-text-primary dxrd-display-inline-block\" [attr.title]=\"data.displayName\">\n                            {{data.displayName}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div role=\"group\" class=\"dx-accordion-content\"\n            [attr.aria-hidden]=\"!data.alwaysShow && data.collapsed ? 'true' : 'false'\"\n            [attr.aria-labelledby]=\"data.headerId\" [attr.id]=\"data.contentId\">\n            <dx-scroll-view [hidden]=\"data.disabled\" showScrollbar=\"onHover\" [disabled]=\"!data.showScroll\"\n                [useNative]=\"false\" [scrollByThumb]=\"true\" (onInitialized)=\"onScrollViewInitialized($event)\">\n                <div *ngIf=\"data.values.length === 0\"\n                    class=\"dx-collectioneditor-empty dxd-empty-area-placeholder-text-color dxd-text-info\">\n                    <span class=\"dx-collectioneditor-empty-text\">{{data.emptyAreaText}}</span>\n                </div>\n                <div *ngIf=\"data.values.length !== 0\" class=\"dx-collectioneditor-items\">\n                    <div *ngFor=\"let value of data.values\"\n                        class=\"dx-collectioneditor-item-container dxd-button-back-color dxd-state-normal dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented\"\n                        [attr.aria-selected]=\"value.selected\" [dxActionModel]=\"value\" [dxAction]=\"value.select\"\n                        [class.dxd-state-selected]=\"value.selected\">\n                        <div class=\"dx-collection-item\">\n                            <ng-container *ngTemplateOutlet=\"contentTemplate, context: { data: value }\"></ng-container>\n                        </div>\n                    </div>\n                </div>\n            </dx-scroll-view>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: i2.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "directive", type: DxActionDirective, selector: "[dxAction]", inputs: ["dxActionModel", "dxAction"] }, { kind: "directive", type: AccordionDirective, selector: "[dxaAccordion]", inputs: ["dxaAccordion"] }, { kind: "directive", type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CollectionEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxa-collectioneditor', template: "<div class=\"dx-collectioneditor\">\n    <div [dxaAccordion]=\"data\" [dxMutationObserver]=\"data.keyboardHelper\">\n        <div class=\"dx-collectioneditor-header dx-accordion-header\">\n            <div class=\"dx-editor-header\">\n                <div role=\"treeitem\"\n                    class=\"dx-field dx-accessibility-focus-border-accented dxrd-accessibility-accordion-trigger\"\n                    [attr.aria-expanded]=\"data.alwaysShow || !data.collapsed ? 'true' : 'false'\"\n                    [attr.aria-owns]=\"data.contentId\" [attr.id]=\"data.headerId\">\n                    <div *ngIf=\"data.showButtons\" class=\"dx-collectioneditor-actions-wrapper\">\n                        <dx-button *ngIf=\"data.buttons.up.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.up.action($event)\" [disabled]=\"data.buttons.up.disabled\"\n                            icon=\"dxrd-svg-operations-moveup\" iconClass=\"dx-image-moveup\"\n                            [template]=\"data.buttons.up.template\"\n                            [attr.title]=\"data.buttons.up.text\"></dx-button>\n                        <dx-button *ngIf=\"data.buttons.down.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.down.action($event)\" [disabled]=\"data.buttons.down.disabled\"\n                            icon=\"dxrd-svg-operations-movedown\" iconClass=\"dx-image-movedown\"\n                            [template]=\"data.buttons.down.template\"\n                            [attr.title]=\"data.buttons.down.text\"></dx-button>\n                        <div class=\"dx-collectioneditor-action-separator\"></div>\n                        <dx-button *ngIf=\"data.buttons.add.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.add.action($event)\" [disabled]=\"data.buttons.add.disabled\"\n                            [template]=\"data.buttons.add.template\"\n                            icon=\"dxrd-svg-operations-add\" iconClass=\"dx-image-add\"\n                            [attr.title]=\"data.buttons.add.text\"></dx-button>\n                        <dx-button *ngIf=\"data.buttons.delete.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.delete.action($event)\" [disabled]=\"data.buttons.delete.disabled\"\n                            [template]=\"data.buttons.delete.template\"\n                            icon=\"dxrd-svg-operations-remove\" iconClass=\"dx-image-remove\"\n                            [attr.title]=\"data.buttons.delete.text\"></dx-button>\n                    </div>\n                    <div *ngIf=\"!!data.displayName\" class=\"dx-collectioneditor-header-text dxd-text-primary\"\n                        [style.padding-left]=\"data.padding + 'px'\">\n                        <dxa-template class=\"dx-collapsing-image dxrd-display-inline-block\"\n                            template=\"dxrd-svg-collapsed\"\n                            [class.dx-image-expanded]=\"!data.collapsed \"></dxa-template>\n                        <div class=\"dx-group-header-font dxd-text-primary dxrd-display-inline-block\" [attr.title]=\"data.displayName\">\n                            {{data.displayName}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div role=\"group\" class=\"dx-accordion-content\"\n            [attr.aria-hidden]=\"!data.alwaysShow && data.collapsed ? 'true' : 'false'\"\n            [attr.aria-labelledby]=\"data.headerId\" [attr.id]=\"data.contentId\">\n            <dx-scroll-view [hidden]=\"data.disabled\" showScrollbar=\"onHover\" [disabled]=\"!data.showScroll\"\n                [useNative]=\"false\" [scrollByThumb]=\"true\" (onInitialized)=\"onScrollViewInitialized($event)\">\n                <div *ngIf=\"data.values.length === 0\"\n                    class=\"dx-collectioneditor-empty dxd-empty-area-placeholder-text-color dxd-text-info\">\n                    <span class=\"dx-collectioneditor-empty-text\">{{data.emptyAreaText}}</span>\n                </div>\n                <div *ngIf=\"data.values.length !== 0\" class=\"dx-collectioneditor-items\">\n                    <div *ngFor=\"let value of data.values\"\n                        class=\"dx-collectioneditor-item-container dxd-button-back-color dxd-state-normal dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented\"\n                        [attr.aria-selected]=\"value.selected\" [dxActionModel]=\"value\" [dxAction]=\"value.select\"\n                        [class.dxd-state-selected]=\"value.selected\">\n                        <div class=\"dx-collection-item\">\n                            <ng-container *ngTemplateOutlet=\"contentTemplate, context: { data: value }\"></ng-container>\n                        </div>\n                    </div>\n                </div>\n            </dx-scroll-view>\n        </div>\n    </div>\n</div>" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { options: [{
+                type: Input,
+                args: ['data']
+            }], contentTemplate: [{
+                type: Input,
+                args: ['contentTemplate']
+            }] } });
+
+class ActionsComponent {
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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\" [style.display]=\"action.visible ? '' : 'none'\" class=\"dxrd-toolbar-item\" [class]=\"action.actionClass\">\n        <div role=\"button\" class=\"dx-accessibility-toolbar-item dx-accessibility-focus-border-accented\"\n            [attr.aria-label]=\"action.block.attr['aria-label']\" [attr.aria-disabled]=\"action.block.attr['aria-disabled']\"\n            [attr.aria-pressed]=\"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>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxa-actions', 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\" [style.display]=\"action.visible ? '' : 'none'\" class=\"dxrd-toolbar-item\" [class]=\"action.actionClass\">\n        <div role=\"button\" class=\"dx-accessibility-toolbar-item dx-accessibility-focus-border-accented\"\n            [attr.aria-label]=\"action.block.attr['aria-label']\" [attr.aria-disabled]=\"action.block.attr['aria-disabled']\"\n            [attr.aria-pressed]=\"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>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class TextBoxEditorComponent extends EditorComponentBase {
+    getEditorOptions() {
+        return {
+            value: this.data.value,
+            disabled: this.data.disabled,
+            inputAttr: {
+                'aria-label': this.data.displayName,
+                'id': this.data.editorInputId
+            }
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextBoxEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TextBoxEditorComponent, selector: "dxa-text", usesInheritance: true, ngImport: i0, template: "<dx-text-box #widget\n[value]=\"options.value\"\n[disabled]=\"options.disabled\"\n[inputAttr]=\"options.inputAttr\"\n(onValueChanged)=\"options.onValueChanged($event)\"\n(onFocusIn)=\"options.onFocusIn && options.onFocusIn($event)\"\n(onKeyDown)=\"options.onKeyDown && options.onKeyDown($event)\"\n(onPaste)=\"options.onPaste && options.onPaste($event)\"\n[placeholder]=\"options.placeholder\"\n[showClearButton]=\"options.showClearButton\"\n>\n    <dx-validator *ngIf=\"!!data.validationRules\" [validationRules]=\"validatorOptions.validationRules\">\n    </dx-validator>\n</dx-text-box>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.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"] }, { kind: "component", type: i2.DxValidatorComponent, selector: "dx-validator", inputs: ["adapter", "elementAttr", "height", "name", "validationGroup", "validationRules", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValidated", "adapterChange", "elementAttrChange", "heightChange", "nameChange", "validationGroupChange", "validationRulesChange", "widthChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextBoxEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxa-text', template: "<dx-text-box #widget\n[value]=\"options.value\"\n[disabled]=\"options.disabled\"\n[inputAttr]=\"options.inputAttr\"\n(onValueChanged)=\"options.onValueChanged($event)\"\n(onFocusIn)=\"options.onFocusIn && options.onFocusIn($event)\"\n(onKeyDown)=\"options.onKeyDown && options.onKeyDown($event)\"\n(onPaste)=\"options.onPaste && options.onPaste($event)\"\n[placeholder]=\"options.placeholder\"\n[showClearButton]=\"options.showClearButton\"\n>\n    <dx-validator *ngIf=\"!!data.validationRules\" [validationRules]=\"validatorOptions.validationRules\">\n    </dx-validator>\n</dx-text-box>" }]
+        }] });
+
+class SelectBoxComponent extends EditorDropDownComponentBase {
+    dropDownOptions;
+    getEditorOptions() {
+        return {
+            dataSource: this.data.values,
+            value: this.data.value,
+            valueExpr: 'value',
+            displayExpr: 'displayValue',
+            disabled: this.data.disabled,
+            useItemTextAsTitle: true,
+            noDataText: noDataText(),
+            inputAttr: { 'aria-label': this.data.displayName, id: this.data.editorInputId }
+        };
+    }
+    getPrivateWidgetOptions() {
+        return {
+            allowClearing: this.data.editorOptions?.allowClearing,
+            displayCustomValue: true,
+            encodeNoDataText: true,
+        };
+    }
+    beforeDetectChanges() {
+        this.dropDownOptions = {
+            container: this.container
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SelectBoxComponent, selector: "dxa-selectbox", usesInheritance: true, ngImport: i0, template: "<dx-select-box #target #widget [dataSource]=\"options.dataSource\" [value]=\"options.value\" [valueExpr]=\"options.valueExpr\"\n    [displayExpr]=\"options.displayExpr\" [disabled]=\"options.disabled\"\n    (onValueChanged)=\"options.onValueChanged($event)\"\n    [useItemTextAsTitle]=\"options.useItemTextAsTitle\" [noDataText]=\"options.noDataText\"\n    [dropDownOptions]=\"dropDownOptions\"\n    [inputAttr]=\"options.inputAttr\"\n    [placeholder]=\"options.placeholder\"\n    [showClearButton]=\"options.showClearButton\"\n    [searchEnabled]=\"options.searchEnabled\">\n    <dx-validator *ngIf=\"!!data.validationRules\" [validationRules]=\"validatorOptions.validationRules\">\n    </dx-validator>\n</dx-select-box>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.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"] }, { kind: "component", type: i2.DxValidatorComponent, selector: "dx-validator", inputs: ["adapter", "elementAttr", "height", "name", "validationGroup", "validationRules", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValidated", "adapterChange", "elementAttrChange", "heightChange", "nameChange", "validationGroupChange", "validationRulesChange", "widthChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxa-selectbox', template: "<dx-select-box #target #widget [dataSource]=\"options.dataSource\" [value]=\"options.value\" [valueExpr]=\"options.valueExpr\"\n    [displayExpr]=\"options.displayExpr\" [disabled]=\"options.disabled\"\n    (onValueChanged)=\"options.onValueChanged($event)\"\n    [useItemTextAsTitle]=\"options.useItemTextAsTitle\" [noDataText]=\"options.noDataText\"\n    [dropDownOptions]=\"dropDownOptions\"\n    [inputAttr]=\"options.inputAttr\"\n    [placeholder]=\"options.placeholder\"\n    [showClearButton]=\"options.showClearButton\"\n    [searchEnabled]=\"options.searchEnabled\">\n    <dx-validator *ngIf=\"!!data.validationRules\" [validationRules]=\"validatorOptions.validationRules\">\n    </dx-validator>\n</dx-select-box>" }]
+        }] });
+
+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
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BoolSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BoolSelectComponent, selector: "dxa-boolselect", usesInheritance: true, ngImport: i0, template: "<dx-select-box #target #widget [dataSource]=\"options.dataSource\" [value]=\"options.value\" [valueExpr]=\"options.valueExpr\"\n    [displayExpr]=\"options.displayExpr\" [disabled]=\"options.disabled\"\n    (onValueChanged)=\"options.onValueChanged($event)\"\n    [useItemTextAsTitle]=\"options.useItemTextAsTitle\" [noDataText]=\"options.noDataText\"\n    [dropDownOptions]=\"dropDownOptions\"\n    [inputAttr]=\"options.inputAttr\"\n    [placeholder]=\"options.placeholder\"\n    [showClearButton]=\"options.showClearButton\"\n    [searchEnabled]=\"options.searchEnabled\">\n    <dx-validator *ngIf=\"!!data.validationRules\" [validationRules]=\"validatorOptions.validationRules\">\n    </dx-validator>\n</dx-select-box>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.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"] }, { kind: "component", type: i2.DxValidatorComponent, selector: "dx-validator", inputs: ["adapter", "elementAttr", "height", "name", "validationGroup", "validationRules", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValidated", "adapterChange", "elementAttrChange", "heightChange", "nameChange", "validationGroupChange", "validationRulesChange", "widthChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BoolSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxa-boolselect', template: "<dx-select-box #target #widget [dataSource]=\"options.dataSource\" [value]=\"options.value\" [valueExpr]=\"options.valueExpr\"\n    [displayExpr]=\"options.displayExpr\" [disabled]=\"options.disabled\"\n    (onValueChanged)=\"options.onValueChanged($event)\"\n    [useItemTextAsTitle]=\"options.useItemTextAsTitle\" [noDataText]=\"options.noDataText\"\n    [dropDownOptions]=\"dropDownOptions\"\n    [inputAttr]=\"options.inputAttr\"\n    [placeholder]=\"options.placeholder\"\n    [showClearButton]=\"options.showClearButton\"\n    [searchEnabled]=\"options.searchEnabled\">\n    <dx-validator *ngIf=\"!!data.validationRules\" [validationRules]=\"validatorOptions.validationRules\">\n    </dx-validator>\n</dx-select-box>" }]
+        }] });
+
+class ObjectEditorComponent {
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ObjectEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ObjectEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxa-object-editor-content', template: "<dxa-template *ngIf=\"data.visible\" template=\"dx-propertieseditor\" [data]=\"data.viewmodel\"></dxa-template>" }]
+        }], 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 }
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BooleanEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BooleanEditorComponent, selector: "dxa-boolean", usesInheritance: true, ngImport: i0, template: "<dx-check-box #widget class=\"propertygrid-editor-checkbox\" [value]=\"options.value\" [disabled]=\"options.disabled\"\n    [elementAttr]=\"options.elementAttr\" (onValueChanged)=\"options.onValueChanged($event)\"\n    (onInitialized)=\"options.onInitialized($event)\">\n    <dx-validator *ngIf=\"!!data.validationRules\" [validationRules]=\"validatorOptions.validationRules\">\n    </dx-validator>\n</dx-check-box>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DxValidatorComponent, selector: "dx-validator", inputs: ["adapter", "elementAttr", "height", "name", "validationGroup", "validationRules", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValidated", "adapterChange", "elementAttrChange", "heightChange", "nameChange", "validationGroupChange", "validationRulesChange", "widthChange"] }, { kind: "component", type: i2.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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BooleanEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxa-boolean', template: "<dx-check-box #widget class=\"propertygrid-editor-checkbox\" [value]=\"options.value\" [disabled]=\"options.disabled\"\n    [elementAttr]=\"options.elementAttr\" (onValueChanged)=\"options.onValueChanged($event)\"\n    (onInitialized)=\"options.onInitialized($event)\">\n    <dx-validator *ngIf=\"!!data.validationRules\" [validationRules]=\"validatorOptions.validationRules\">\n    </dx-validator>\n</dx-check-box>" }]
+        }] });
+
+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,
+            inputAttr: {
+                'aria-label': this.data.displayName,
+                'id': this.data.editorInputId
+            }
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedSelectBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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\"\n    [displayExpr]=\"options.displayExpr\" [disabled]=\"options.disabled\"\n    (onValueChanged)=\"options.onValueChanged($event)\"\n    [useItemTextAsTitle]=\"options.useItemTextAsTitle\" [noDataText]=\"options.noDataText\"\n    [dropDownOptions]=\"dropDownOptions\"\n    [inputAttr]=\"options.inputAttr\"\n    [placeholder]=\"options.placeholder\"\n    [showClearButton]=\"options.showClearButton\"\n    [searchEnabled]=\"options.searchEnabled\">\n    <dx-validator *ngIf=\"!!data.validationRules\" [validationRules]=\"validatorOptions.validationRules\">\n    </dx-validator>\n</dx-select-box>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.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"] }, { kind: "component", type: i2.DxValidatorComponent, selector: "dx-validator", inputs: ["adapter", "elementAttr", "height", "name", "validationGroup", "validationRules", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValidated", "adapterChange", "elementAttrChange", "heightChange", "nameChange", "validationGroupChange", "validationRulesChange", "widthChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedSelectBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxa-selectbox-localized', template: "<dx-select-box #target #widget [dataSource]=\"options.dataSource\" [value]=\"options.value\" [valueExpr]=\"options.valueExpr\"\n    [displayExpr]=\"options.displayExpr\" [disabled]=\"options.disabled\"\n    (onValueChanged)=\"options.onValueChanged($event)\"\n    [useItemTextAsTitle]=\"options.useItemTextAsTitle\" [noDataText]=\"options.noDataText\"\n    [dropDownOptions]=\"dropDownOptions\"\n    [inputAttr]=\"options.inputAttr\"\n    [placeholder]=\"options.placeholder\"\n    [showClearButton]=\"options.showClearButton\"\n    [searchEnabled]=\"options.searchEnabled\">\n    <dx-validator *ngIf=\"!!data.validationRules\" [validationRules]=\"validatorOptions.validationRules\">\n    </dx-validator>\n</dx-select-box>" }]
+        }] });
+
+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 }
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumericEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NumericEditorComponent, selector: "dxa-numeric", usesInheritance: true, ngImport: i0, template: "<dx-number-box #widget\n    [value]=\"options.value\"\n    [showSpinButtons]=\"options.showSpinButtons\"\n    [inputAttr]=\"options.inputAttr\"\n    [disabled]=\"options.disabled\"\n    (onValueChanged)=\"options.onValueChanged($event)\">\n    <dx-validator *ngIf=\"!!data.validationRules\" [validationRules]=\"validatorOptions.validationRules\">\n    </dx-validator>\n</dx-number-box>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DxValidatorComponent, selector: "dx-validator", inputs: ["adapter", "elementAttr", "height", "name", "validationGroup", "validationRules", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValidated", "adapterChange", "elementAttrChange", "heightChange", "nameChange", "validationGroupChange", "validationRulesChange", "widthChange"] }, { kind: "component", type: i2.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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumericEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxa-numeric', template: "<dx-number-box #widget\n    [value]=\"options.value\"\n    [showSpinButtons]=\"options.showSpinButtons\"\n    [inputAttr]=\"options.inputAttr\"\n    [disabled]=\"options.disabled\"\n    (onValueChanged)=\"options.onValueChanged($event)\">\n    <dx-validator *ngIf=\"!!data.validationRules\" [validationRules]=\"validatorOptions.validationRules\">\n    </dx-validator>\n</dx-number-box>" }]
+        }] });
+
+class ColorPickerComponent extends EditorDropDownComponentBase {
+    dropDownOptions;
+    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
+            }
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorPickerComponent, selector: "dxa-colorpicker", usesInheritance: true, ngImport: i0, template: "<dx-color-box #target #widget\n    [value]=\"options.value\"\n    (onValueChanged)=\"options.onValueChanged($event)\"\n    [placeholder]=\"options.placeholder\"\n    [editAlphaChannel]=\"options.editAlphaChannel\"\n    [disabled]=\"options.disabled\"\n    [dropDownOptions]=\"dropDownOptions\"\n    [inputAttr]=\"options.inputAttr\"></dx-color-box>", dependencies: [{ kind: "component", type: i2.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: "16.2.12", ngImport: i0, type: ColorPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxa-colorpicker', template: "<dx-color-box #target #widget\n    [value]=\"options.value\"\n    (onValueChanged)=\"options.onValueChanged($event)\"\n    [placeholder]=\"options.placeholder\"\n    [editAlphaChannel]=\"options.editAlphaChannel\"\n    [disabled]=\"options.disabled\"\n    [dropDownOptions]=\"dropDownOptions\"\n    [inputAttr]=\"options.inputAttr\"></dx-color-box>" }]
+        }] });
+
+class DesignerComponent {
+    _cd;
+    data;
+    root;
+    surfaceClass;
+    constructor(_cd) {
+        this._cd = _cd;
+    }
+    ngAfterViewInit() {
+        this.surfaceClass = this.data['surfaceClass'](this.root.nativeElement);
+        this._cd.detectChanges();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DesignerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DesignerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxa-designer', 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>" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }], root: [{
+                type: ViewChild,
+                args: ['root']
+            }] } });
+
+class TemplatesComponent {
+    _templateEngine;
+    tabPanel;
+    toolbar;
+    propertygrid;
+    textbox;
+    treelistItem;
+    treelistHeaderItem;
+    treelistItemTextContent;
+    treelistHeaderItemCaptionContent;
+    datebox;
+    selectbox;
+    boolselect;
+    editor;
+    objectEditorContent;
+    boolean;
+    localizedSelectBox;
+    numeric;
+    colorpicker;
+    collectionEditor;
+    designer;
+    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);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TemplatesComponent, deps: [{ token: TemplateEngine }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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>", dependencies: [{ kind: "component", type: TabpanelComponent, selector: "dxa-tabpanel", inputs: ["data"] }, { kind: "component", type: PropertygridComponent, selector: "dxa-propertygrid", inputs: ["data"] }, { kind: "component", type: TreeListItemComponent, selector: "dxa-treelist-item", inputs: ["data"] }, { kind: "component", type: TreeListHeaderItemComponent, selector: "dxa-treelist-header-item", inputs: ["data"] }, { kind: "component", type: TreeListItemTextComponent, selector: "dxa-treelist-item-text-content", inputs: ["data"] }, { kind: "component", type: TreeListHeaderItemCaptionContentComponent, selector: "dxa-treelist-header-item-caption-content", inputs: ["data"] }, { kind: "component", type: DateEditorComponent, selector: "dxa-date" }, { kind: "component", type: CollectionEditorComponent, selector: "dxa-collectioneditor", inputs: ["data", "contentTemplate"] }, { kind: "component", type: ActionsComponent, selector: "dxa-actions", inputs: ["data"] }, { kind: "component", type: EditorComponentBase, selector: "dxa-editor", inputs: ["data"] }, { kind: "component", type: TextBoxEditorComponent, selector: "dxa-text" }, { kind: "component", type: SelectBoxComponent, selector: "dxa-selectbox" }, { kind: "component", type: BoolSelectComponent, selector: "dxa-boolselect" }, { kind: "component", type: ObjectEditorComponent, selector: "dxa-object-editor-content", inputs: ["data"] }, { kind: "component", type: BooleanEditorComponent, selector: "dxa-boolean" }, { kind: "component", type: LocalizedSelectBoxComponent, selector: "dxa-selectbox-localized" }, { kind: "component", type: NumericEditorComponent, selector: "dxa-numeric" }, { kind: "component", type: ColorPickerComponent, selector: "dxa-colorpicker" }, { kind: "component", type: DesignerComponent, selector: "dxa-designer", inputs: ["data"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TemplatesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxa-templates', 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>" }]
+        }], 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 ParameterspanelComponent {
+    data;
+    onScrollViewInitialized(args) {
+        args.component.option('useKeyboard', false);
+    }
+    reset(args) {
+        this.data.model.restore();
+    }
+    submit(params) {
+        this.data.model.validateAndSubmit(params);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ParameterspanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ParameterspanelComponent, selector: "dxv-parameters", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"dxrd-preview-parameters-wrapper dxrd-preview-property-wrapper\" [hidden]=\"!(data.active && data.visible)\">\n    <div class=\"dxrd-right-panel-header dxd-text-primary\" [hidden]=\"!data.model.showHeader\">\n        {{data.model.headerText}}\n    </div>\n    <div *ngIf=\"!data.model || data.model.isEmpty\" class=\"dxrd-group-header-parameters-empty dxd-text-primary\">\n        {{data.model.emptyText}}\n    </div>\n    <dx-scroll-view *ngIf=\"data.model || data.model.isEmpty()\" class=\"dxrd-right-panel-body\" id=\"propertiesPanel\"\n        [showScrollbar]=\"'onHover'\"\n        [useNative]=\"false\"\n        [scrollByThumb]=\"true\"\n        (onInitialized)=\"onScrollViewInitialized($event)\"\n        [dxMutationObserver]=\"data.keyboardHelper\"\n        >\n        <div role=\"tree\" class=\"dx-fieldset dxrd-right-panel-content\">\n            <dxa-template template=\"dx-propertieseditor\" [data]=\"data.propertyGrid\"></dxa-template>\n        </div>\n        <div class=\"dxrd-preview-parameter-actions-container\" [hidden]=\"!data.model.showButtons\">\n            <dx-load-indicator class=\"dxrd-preview-parameter-action dxrd-preview-loading\"\n                [visible]=\"data.model.parametersLoading\"></dx-load-indicator>\n            <dx-button *ngFor=\"let button of data.model.buttons\" class=\"dxrd-preview-parameter-action dxrdp-parameters-reset dx-accessibility-focus-border-accented\"\n                [text]=\"button.text\"\n                (onClick)=\"button.onClick($event)\">\n            </dx-button>\n        </div>\n    </dx-scroll-view>\n</div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: i2.DxLoadIndicatorComponent, selector: "dx-load-indicator", inputs: ["elementAttr", "height", "hint", "indicatorSrc", "rtlEnabled", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "elementAttrChange", "heightChange", "hintChange", "indicatorSrcChange", "rtlEnabledChange", "visibleChange", "widthChange"] }, { kind: "component", type: i2.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "directive", type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ParameterspanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-parameters', template: "<div class=\"dxrd-preview-parameters-wrapper dxrd-preview-property-wrapper\" [hidden]=\"!(data.active && data.visible)\">\n    <div class=\"dxrd-right-panel-header dxd-text-primary\" [hidden]=\"!data.model.showHeader\">\n        {{data.model.headerText}}\n    </div>\n    <div *ngIf=\"!data.model || data.model.isEmpty\" class=\"dxrd-group-header-parameters-empty dxd-text-primary\">\n        {{data.model.emptyText}}\n    </div>\n    <dx-scroll-view *ngIf=\"data.model || data.model.isEmpty()\" class=\"dxrd-right-panel-body\" id=\"propertiesPanel\"\n        [showScrollbar]=\"'onHover'\"\n        [useNative]=\"false\"\n        [scrollByThumb]=\"true\"\n        (onInitialized)=\"onScrollViewInitialized($event)\"\n        [dxMutationObserver]=\"data.keyboardHelper\"\n        >\n        <div role=\"tree\" class=\"dx-fieldset dxrd-right-panel-content\">\n            <dxa-template template=\"dx-propertieseditor\" [data]=\"data.propertyGrid\"></dxa-template>\n        </div>\n        <div class=\"dxrd-preview-parameter-actions-container\" [hidden]=\"!data.model.showButtons\">\n            <dx-load-indicator class=\"dxrd-preview-parameter-action dxrd-preview-loading\"\n                [visible]=\"data.model.parametersLoading\"></dx-load-indicator>\n            <dx-button *ngFor=\"let button of data.model.buttons\" class=\"dxrd-preview-parameter-action dxrdp-parameters-reset dx-accessibility-focus-border-accented\"\n                [text]=\"button.text\"\n                (onClick)=\"button.onClick($event)\">\n            </dx-button>\n        </div>\n    </dx-scroll-view>\n</div>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class PagerComponent {
+    _element;
+    _cd;
+    data;
+    dropDownOptions;
+    constructor(_element, _cd) {
+        this._element = _element;
+        this._cd = _cd;
+    }
+    ngAfterViewInit() {
+        this.dropDownOptions = {
+            container: this.data.getPopupContainer(this._element.nativeElement),
+            ...this.data.widget.dropDownOptions
+        };
+        this._cd.detectChanges();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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>", dependencies: [{ kind: "component", type: i2.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: "16.2.12", ngImport: i0, type: PagerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-toolbar-pager', 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>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class ZoomComponent {
+    _cd;
+    data;
+    selectBox;
+    dropDownOptions;
+    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();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ZoomComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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>", dependencies: [{ kind: "component", type: i2.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: "16.2.12", ngImport: i0, type: ZoomComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-toolbar-zoom', 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>" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }], selectBox: [{
+                type: ViewChild,
+                args: ['selectbox', { read: ElementRef }]
+            }] } });
+
+class ExportComponent {
+    _cd;
+    data;
+    menuComponent;
+    constructor(_cd) {
+        this._cd = _cd;
+    }
+    ngAfterViewInit() {
+        this.onSubmenuShowing = this.data.widget.onSubmenuShowing(this.data.getPopupContainer(this.menuComponent.nativeElement), this.menuComponent.nativeElement);
+        this._cd.detectChanges();
+    }
+    onSubmenuShowing = (event) => { };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExportComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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'\" [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>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i2.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"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExportComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-toolbar-export', 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'\" [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>" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }], menuComponent: [{
+                type: ViewChild,
+                args: ['exportElement', { read: ElementRef }]
+            }] } });
+
+class KeyDownActionsDirective extends BaseDisposableDirective {
+    actionList;
+    InitAndReturnDisposeFunc(element) {
+        const handlersManager = GetWindowKeyDownHandlersManager();
+        const disposeFunc = handlersManager.bindHandler(e => this.actionList.processShortcut(e));
+        return () => disposeFunc();
+    }
+    eventName = 'afterViewInit';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: KeyDownActionsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: KeyDownActionsDirective, selector: "[dxKeyDownActions]", inputs: { actionList: ["dxKeyDownActions", "actionList"] }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: KeyDownActionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dxKeyDownActions]'
+                }]
+        }], propDecorators: { actionList: [{
+                type: Input,
+                args: ['dxKeyDownActions']
+            }] } });
+
+class ToolbarContentComponent {
+    data;
+    onScrollViewInitialized(args) {
+        args.component.option('useKeyboard', false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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\" [dxKeyDownActions]=\"data.actionLists\" [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.toolbarItems\"></dxa-template>\n    </div>\n</dx-scroll-view>", dependencies: [{ kind: "component", type: i2.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "directive", type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }, { kind: "directive", type: KeyDownActionsDirective, selector: "[dxKeyDownActions]", inputs: ["dxKeyDownActions"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-toolbar', 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\" [dxKeyDownActions]=\"data.actionLists\" [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.toolbarItems\"></dxa-template>\n    </div>\n</dx-scroll-view>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class EditorComponent extends EditorComponentBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EditorComponent, selector: "dxv-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"dx-editor\" [hidden]=\"!data.visible\">\n    <div class=\"dx-group\" [dxaAccordion]=\"data\">\n        <div class=\"dx-editor-header\" [class.dxrd-empty-header]=\"data.hideEditorHeader\">\n            <div *ngIf=\"!data.hideEditorHeader\" class=\"dx-field\"\n            [attr.role]=\"'treeitem'\"\n            [attr.id]=\"data.isComplexEditor && data.headerId\"\n            [attr.aria-owns]=\"data.isComplexEditor && data.contentId\"\n            [attr.aria-expanded]=\"data.isComplexEditor && (data.alwaysShow || !data.collapsed ? 'true' : 'false')\"\n            [class.dxrd-accessibility-accordion-trigger]=\"data.isComplexEditor\"\n            [class.dx-accessibility-focus-border-accented]=\"data.isComplexEditor\"\n            [class.dxrd-vertical-label]=\"data.editorOptions && data.editorOptions.hasVerticalLabel\"\n            >\n                    <div class=\"dx-field-label dxrd-group-label dx-accordion-header dxd-text-primary\"\n                    [style.padding-left]=\"data.padding['padding-left'] + 'px'\"\n                    [class.dx-accordion-empty]=\"data.templateName === 'dx-emptyHeader'\"\n                    [class.dxd-back-secondary]=\"data.isGroupLabel\"\n                    [class.dx-accordion-hide-collapsing-image]=\"data.alwaysShow\">\n                        <div *ngIf=\"data.isComplexEditor\" [attr.disabled]=\"data.templateName !== 'dx-emptyHeader'\">\n                            <dxa-template *ngIf=\"!data.alwaysShow\" \n                            template=\"dxrd-svg-collapsed\" \n                            class=\"dx-collapsing-image  dxrd-display-inline-block\"\n                            [class.dx-image-expanded]=\"!data.collapsed\"\n                            ></dxa-template>\n                            <div *ngIf=\"!!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\" data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"></div>\n                            <div *ngIf=\"!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\">\n                                {{data.displayName}}\n                            </div>\n                        </div>\n                        <label *ngIf=\"!data.isComplexEditor && !!data.textToSearch\" \n                        class=\"propertygrid-editor-displayName\"\n                        data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"\n                        [attr.title]=\"data.displayName\"\n                        [attr.for]=\"data.editorInputId\"\n                        [class.dx-field-label-required]=\"data.isRequired\"\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\n                        ></label>\n                        <label *ngIf=\"!data.isComplexEditor && !data.textToSearch\" \n                        class=\"propertygrid-editor-displayName\"\n                        [attr.title]=\"data.displayName\"\n                        [attr.for]=\"data.editorInputId\"\n                        [class.dx-field-label-required]=\"data.isRequired\"\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\n                        >{{data.displayName}}</label>                    \n                </div>\n                <div class=\"dx-field-value\" \n                [class.dxd-border-accented]=\"data.isPropertyHighlighted\">\n                    <!-- <div data-bind=\"service: { name: 'createEditorAddOn' }\"></div> -->\n                    <dxa-lazy-template *ngIf=\"data.templateName !== 'dx-emptyHeader'\" [isResolved]=\"isResolved\" [template]=\"data.templateName\" [data]=\"data\"></dxa-lazy-template>\n                    <!-- ko if: templateName !== 'dx-emptyHeader' -->\n                    <!-- ko lazy: { innerBindings: { template: templateName }, isResolved: function(val) { $data.setIsRendered(val) } } -->\n                    <!-- /ko -->\n                    <!-- /ko -->\n                </div>\n            </div>\n        </div>\n        <div *ngIf=\"data.isComplexEditor\" class=\"dx-editor-content dx-accordion-content\" role=\"group\" \n            [attr.aria-labelledby]=\"data.headerId\"\n            [attr.id]=\"data.contentId\"\n            [attr.aria-hidden]=\"!data.alwaysShow && data.collapsed ? 'true' : 'false'\">\n            <dxa-template *ngIf=\"data.editorCreated\" [template]=\"data.contentTemplateName\" [data]=\"data\"></dxa-template>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "directive", type: AccordionDirective, selector: "[dxaAccordion]", inputs: ["dxaAccordion"] }, { kind: "component", type: LazyTemplateComponent, selector: "dxa-lazy-template", inputs: ["resolver", "isResolved"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-editor', template: "<div class=\"dx-editor\" [hidden]=\"!data.visible\">\n    <div class=\"dx-group\" [dxaAccordion]=\"data\">\n        <div class=\"dx-editor-header\" [class.dxrd-empty-header]=\"data.hideEditorHeader\">\n            <div *ngIf=\"!data.hideEditorHeader\" class=\"dx-field\"\n            [attr.role]=\"'treeitem'\"\n            [attr.id]=\"data.isComplexEditor && data.headerId\"\n            [attr.aria-owns]=\"data.isComplexEditor && data.contentId\"\n            [attr.aria-expanded]=\"data.isComplexEditor && (data.alwaysShow || !data.collapsed ? 'true' : 'false')\"\n            [class.dxrd-accessibility-accordion-trigger]=\"data.isComplexEditor\"\n            [class.dx-accessibility-focus-border-accented]=\"data.isComplexEditor\"\n            [class.dxrd-vertical-label]=\"data.editorOptions && data.editorOptions.hasVerticalLabel\"\n            >\n                    <div class=\"dx-field-label dxrd-group-label dx-accordion-header dxd-text-primary\"\n                    [style.padding-left]=\"data.padding['padding-left'] + 'px'\"\n                    [class.dx-accordion-empty]=\"data.templateName === 'dx-emptyHeader'\"\n                    [class.dxd-back-secondary]=\"data.isGroupLabel\"\n                    [class.dx-accordion-hide-collapsing-image]=\"data.alwaysShow\">\n                        <div *ngIf=\"data.isComplexEditor\" [attr.disabled]=\"data.templateName !== 'dx-emptyHeader'\">\n                            <dxa-template *ngIf=\"!data.alwaysShow\" \n                            template=\"dxrd-svg-collapsed\" \n                            class=\"dx-collapsing-image  dxrd-display-inline-block\"\n                            [class.dx-image-expanded]=\"!data.collapsed\"\n                            ></dxa-template>\n                            <div *ngIf=\"!!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\" data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"></div>\n                            <div *ngIf=\"!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\">\n                                {{data.displayName}}\n                            </div>\n                        </div>\n                        <label *ngIf=\"!data.isComplexEditor && !!data.textToSearch\" \n                        class=\"propertygrid-editor-displayName\"\n                        data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"\n                        [attr.title]=\"data.displayName\"\n                        [attr.for]=\"data.editorInputId\"\n                        [class.dx-field-label-required]=\"data.isRequired\"\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\n                        ></label>\n                        <label *ngIf=\"!data.isComplexEditor && !data.textToSearch\" \n                        class=\"propertygrid-editor-displayName\"\n                        [attr.title]=\"data.displayName\"\n                        [attr.for]=\"data.editorInputId\"\n                        [class.dx-field-label-required]=\"data.isRequired\"\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\n                        >{{data.displayName}}</label>                    \n                </div>\n                <div class=\"dx-field-value\" \n                [class.dxd-border-accented]=\"data.isPropertyHighlighted\">\n                    <!-- <div data-bind=\"service: { name: 'createEditorAddOn' }\"></div> -->\n                    <dxa-lazy-template *ngIf=\"data.templateName !== 'dx-emptyHeader'\" [isResolved]=\"isResolved\" [template]=\"data.templateName\" [data]=\"data\"></dxa-lazy-template>\n                    <!-- ko if: templateName !== 'dx-emptyHeader' -->\n                    <!-- ko lazy: { innerBindings: { template: templateName }, isResolved: function(val) { $data.setIsRendered(val) } } -->\n                    <!-- /ko -->\n                    <!-- /ko -->\n                </div>\n            </div>\n        </div>\n        <div *ngIf=\"data.isComplexEditor\" class=\"dx-editor-content dx-accordion-content\" role=\"group\" \n            [attr.aria-labelledby]=\"data.headerId\"\n            [attr.id]=\"data.contentId\"\n            [attr.aria-hidden]=\"!data.alwaysShow && data.collapsed ? 'true' : 'false'\">\n            <dxa-template *ngIf=\"data.editorCreated\" [template]=\"data.contentTemplateName\" [data]=\"data\"></dxa-template>\n        </div>\n    </div>\n</div>" }]
+        }] });
+
+class MultiValueComponent extends EditorDropDownComponentBase {
+    dropDownOptions;
+    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'
+            }
+        };
+        // TODO: Ask Max about this.
+        // It looks like a useless code that causes superflous raising valueChanged event of the editor
+        // and potentially incorrect behavior of parameters panel.
+        // this.options = this.data.value.getOptions(this.options);
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        const model = this.data.getModel()?.value;
+        this._disposableCallbacks.push(model?.events.on('valueChanged', (args) => {
+            this.options.value = model.value;
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiValueComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiValueComponent, selector: "dxv-multivalue", usesInheritance: true, ngImport: i0, template: "<dx-tag-box #target #widget\n    [dataSource]=\"options.dataSource\"\n    [searchEnabled]=\"options.searchEnabled\"\n    [useItemTextAsTitle]=\"options.useItemTextAsTitle\"\n    [searchExpr]=\"options.searchExpr\"\n    [value]=\"options.value\"\n    [displayExpr]=\"options.displayExpr\"\n    [valueExpr]=\"options.valueExpr\"\n    [multiline]=\"options.multiline\"\n    [showSelectionControls]=\"options.showSelectionControls\"\n    (onValueChanged)=\"options.onValueChanged($event)\"\n    (onMultiTagPreparing)=\"options.onMultiTagPreparing($event)\"\n    [inputAttr]=\"options.inputAttr\"\n    [disabled]=\"options.disabled\"\n    [selectAllText]=\"options.selectAllText\"\n    [placeholder]=\"options.placeholder\"\n    [maxDisplayedTags]=\"options.maxDisplayedTags\"\n    [showMultiTagOnly]=\"options.showMultiTagOnly\"\n    [dropDownOptions]=\"dropDownOptions\"\n    [selectAllMode]=\"options.selectAllMode\"\n    >\n    <dx-validator *ngIf=\"!!data.validationRules\" [validationRules]=\"validatorOptions.validationRules\">\n    </dx-validator>\n</dx-tag-box>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DxTagBoxComponent, selector: "dx-tag-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyValueMode", "buttons", "customItemCreateEvent", "dataSource", "deferRendering", "disabled", "displayExpr", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hideSelectedItems", "hint", "hoverStateEnabled", "inputAttr", "isDirty", "isValid", "items", "itemTemplate", "label", "labelMode", "maxDisplayedTags", "maxFilterQueryLength", "maxLength", "minSearchLength", "multiline", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectAllMode", "selectAllText", "selectedItems", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showMultiTagOnly", "showSelectionControls", "stylingMode", "tabIndex", "tagTemplate", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCustomItemCreating", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onMultiTagPreparing", "onOpened", "onOptionChanged", "onSelectAllValueChanged", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyValueModeChange", "buttonsChange", "customItemCreateEventChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hideSelectedItemsChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isDirtyChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxDisplayedTagsChange", "maxFilterQueryLengthChange", "maxLengthChange", "minSearchLengthChange", "multilineChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectAllModeChange", "selectAllTextChange", "selectedItemsChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showMultiTagOnlyChange", "showSelectionControlsChange", "stylingModeChange", "tabIndexChange", "tagTemplateChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i2.DxValidatorComponent, selector: "dx-validator", inputs: ["adapter", "elementAttr", "height", "name", "validationGroup", "validationRules", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValidated", "adapterChange", "elementAttrChange", "heightChange", "nameChange", "validationGroupChange", "validationRulesChange", "widthChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiValueComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-multivalue', template: "<dx-tag-box #target #widget\n    [dataSource]=\"options.dataSource\"\n    [searchEnabled]=\"options.searchEnabled\"\n    [useItemTextAsTitle]=\"options.useItemTextAsTitle\"\n    [searchExpr]=\"options.searchExpr\"\n    [value]=\"options.value\"\n    [displayExpr]=\"options.displayExpr\"\n    [valueExpr]=\"options.valueExpr\"\n    [multiline]=\"options.multiline\"\n    [showSelectionControls]=\"options.showSelectionControls\"\n    (onValueChanged)=\"options.onValueChanged($event)\"\n    (onMultiTagPreparing)=\"options.onMultiTagPreparing($event)\"\n    [inputAttr]=\"options.inputAttr\"\n    [disabled]=\"options.disabled\"\n    [selectAllText]=\"options.selectAllText\"\n    [placeholder]=\"options.placeholder\"\n    [maxDisplayedTags]=\"options.maxDisplayedTags\"\n    [showMultiTagOnly]=\"options.showMultiTagOnly\"\n    [dropDownOptions]=\"dropDownOptions\"\n    [selectAllMode]=\"options.selectAllMode\"\n    >\n    <dx-validator *ngIf=\"!!data.validationRules\" [validationRules]=\"validatorOptions.validationRules\">\n    </dx-validator>\n</dx-tag-box>\n" }]
+        }] });
+
+class PopoverComponent {
+    _element;
+    _cd;
+    popover;
+    container;
+    constructor(_element, _cd) {
+        this._element = _element;
+        this._cd = _cd;
+    }
+    ngAfterViewInit() {
+        const element = this._element.nativeElement;
+        this.container = this.popover.getPopupContainer(element);
+        this._cd.detectChanges();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PopoverComponent, selector: "dxa-propertygrid-popoverservice", inputs: { popover: ["data", "popover"] }, ngImport: i0, template: "<dx-popover\n    [container]=\"container\"\n    [target]=\"popover.target\"\n    position=\"bottom\"\n    [showCloseButton]=\"false\"\n    (onHiding)=\"popover.onHiding()\"\n    [hideOnOutsideClick]=\"true\"\n    [hideOnParentScroll]=\"true\"\n    [width]=\"350\"\n    [(visible)]=\"popover.visible\"\n>\n<div class=\"propertygrid-editor-description-popover-content\">\n    <span>{{popover.data}}</span>\n</div>\n</dx-popover>", dependencies: [{ kind: "component", type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "enableBodyScroll", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "deferRenderingChange", "disabledChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxa-propertygrid-popoverservice', template: "<dx-popover\n    [container]=\"container\"\n    [target]=\"popover.target\"\n    position=\"bottom\"\n    [showCloseButton]=\"false\"\n    (onHiding)=\"popover.onHiding()\"\n    [hideOnOutsideClick]=\"true\"\n    [hideOnParentScroll]=\"true\"\n    [width]=\"350\"\n    [(visible)]=\"popover.visible\"\n>\n<div class=\"propertygrid-editor-description-popover-content\">\n    <span>{{popover.data}}</span>\n</div>\n</dx-popover>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { popover: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class ExportOptionsComponent {
+    data;
+    headerText;
+    constructor() {
+        this.headerText = getLocalization('Export Options', 'DevExpress.XtraReports.UI.XtraReport.ExportOptions');
+    }
+    onScrollViewInitialized(args) {
+        args.component.option('useKeyboard', false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExportOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ExportOptionsComponent, selector: "dxv-export-options", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"dxrd-preview-export-options-wrapper dxrd-preview-property-wrapper\" [hidden]=\"!(data.active && data.visible)\">\n    <div class=\"dxrd-right-panel-header dxd-text-primary\">\n        <span>{{headerText}}</span>\n    </div>\n    <dx-scroll-view class=\"dxrd-right-panel-body\" \n        showScrollbar=\"onHover\"\n        [useNative]=\"false\"\n        [scrollByThumb]=\"true\"\n        (onInitialized)=\"onScrollViewInitialized($event)\">\n        <div class=\"dx-fieldset\" [dxMutationObserver]=\"data.keyboardHelper\">\n            <div class=\"dxrd-right-panel-content dxrd-export-options-content\" role=\"tree\">\n                <dxa-template template=\"dx-propertieseditor\" [data]=\"data.propertyGrid\"></dxa-template>\n            </div>\n            <dxa-propertygrid-popoverservice [data]=\"data.propertyGrid.popover\"></dxa-propertygrid-popoverservice>\n        </div>\n    </dx-scroll-view>\n</div>", dependencies: [{ kind: "component", type: i2.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { kind: "component", type: PopoverComponent, selector: "dxa-propertygrid-popoverservice", inputs: ["data"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "directive", type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExportOptionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-export-options', template: "<div class=\"dxrd-preview-export-options-wrapper dxrd-preview-property-wrapper\" [hidden]=\"!(data.active && data.visible)\">\n    <div class=\"dxrd-right-panel-header dxd-text-primary\">\n        <span>{{headerText}}</span>\n    </div>\n    <dx-scroll-view class=\"dxrd-right-panel-body\" \n        showScrollbar=\"onHover\"\n        [useNative]=\"false\"\n        [scrollByThumb]=\"true\"\n        (onInitialized)=\"onScrollViewInitialized($event)\">\n        <div class=\"dx-fieldset\" [dxMutationObserver]=\"data.keyboardHelper\">\n            <div class=\"dxrd-right-panel-content dxrd-export-options-content\" role=\"tree\">\n                <dxa-template template=\"dx-propertieseditor\" [data]=\"data.propertyGrid\"></dxa-template>\n            </div>\n            <dxa-propertygrid-popoverservice [data]=\"data.propertyGrid.popover\"></dxa-propertygrid-popoverservice>\n        </div>\n    </dx-scroll-view>\n</div>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class MultiValueEditableComponent extends EditorComponentBase {
+    properties;
+    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();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiValueEditableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiValueEditableComponent, selector: "dxv-multivalue-editable", viewQueries: [{ propertyName: "properties", first: true, predicate: ["properties"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"data.value\" class=\"dxrd-editor\" [hidden]=\"!data.visible\">\n    <dxa-collectioneditor [data]=\"options.data\" [contentTemplate]=\"options.contentTemplate\"></dxa-collectioneditor>\n    <!-- <dxa-template [data]=\"options\" template=\"dx-collectioneditor\"></dxa-template> -->\n</div>\n\n<ng-template #properties let-data=\"data\">\n    <dxa-template [data]=\"data.getProperties()\" template=\"dx-propertieseditor\"></dxa-template>\n</ng-template>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollectionEditorComponent, selector: "dxa-collectioneditor", inputs: ["data", "contentTemplate"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiValueEditableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-multivalue-editable', template: "<div *ngIf=\"data.value\" class=\"dxrd-editor\" [hidden]=\"!data.visible\">\n    <dxa-collectioneditor [data]=\"options.data\" [contentTemplate]=\"options.contentTemplate\"></dxa-collectioneditor>\n    <!-- <dxa-template [data]=\"options\" template=\"dx-collectioneditor\"></dxa-template> -->\n</div>\n\n<ng-template #properties let-data=\"data\">\n    <dxa-template [data]=\"data.getProperties()\" template=\"dx-propertieseditor\"></dxa-template>\n</ng-template>" }]
+        }], propDecorators: { properties: [{
+                type: ViewChild,
+                args: ['properties']
+            }] } });
+
+class EllipsisEditorDirective {
+    _element;
+    options;
+    _editor;
+    constructor(_element) {
+        this._element = _element;
+    }
+    ngAfterViewInit() {
+        this._editor = new dxEllipsisEditor(this._element.nativeElement, this.options);
+    }
+    ngOnChanges() {
+        if (this._editor && this._editor.option('value') != this.options.value) {
+            this._editor.option('value', this.options.value);
+        }
+    }
+    ngOnDestroy() {
+        this._editor?.dispose();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EllipsisEditorDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EllipsisEditorDirective, selector: "[dxaEllipsisEditor]", inputs: { options: ["dxaEllipsisEditor", "options"] }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EllipsisEditorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dxaEllipsisEditor]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { options: [{
+                type: Input,
+                args: ['dxaEllipsisEditor']
+            }] } });
+
+class DateRangeComponent {
+    _currentElement;
+    _changeDetectorRef;
+    options;
+    _editor;
+    data;
+    _vmSubscription;
+    processClickEvent;
+    constructor(_currentElement, _changeDetectorRef) {
+        this._currentElement = _currentElement;
+        this._changeDetectorRef = _changeDetectorRef;
+    }
+    ngOnDestroy() {
+        this._vmSubscription && this._vmSubscription();
+        this._editor.dispose();
+    }
+    ngOnInit() {
+        this.options.visibilityChanged = (newValue) => {
+            this._changeDetectorRef.markForCheck();
+        };
+        this._editor = createDateRangeEditor(this.options, this._currentElement.nativeElement, this.options);
+        this.data = this._editor.getViewModel();
+        this._vmSubscription = this.data._viewModelEvents.on(ViewModelChangedEvent, () => {
+            this._changeDetectorRef.markForCheck();
+        });
+        this.data.cacheElement(this._currentElement.nativeElement);
+        this.processClickEvent = () => {
+            this.data.showPopup();
+            this._changeDetectorRef.markForCheck();
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateRangeComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateRangeComponent, selector: "dxv-date-range", inputs: { options: ["data", "options"] }, ngImport: i0, template: "<div class=\"dxrv-daterange-editor\">\n    <div [dxaEllipsisEditor]=\"{\n      buttonAction: processClickEvent,\n      value: data.displayValue,\n      readOnly: true,\n      openOnFieldClick: true,\n      inputAttr: { 'aria-label': data._displayName, id: data._editorInputId }\n    }\"></div>\n    <dxa-template [template]=\"data.popupTemplate\" [data]=\"data.popupModel\"></dxa-template>\n</div>", dependencies: [{ kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "directive", type: EllipsisEditorDirective, selector: "[dxaEllipsisEditor]", inputs: ["dxaEllipsisEditor"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateRangeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-date-range', template: "<div class=\"dxrv-daterange-editor\">\n    <div [dxaEllipsisEditor]=\"{\n      buttonAction: processClickEvent,\n      value: data.displayValue,\n      readOnly: true,\n      openOnFieldClick: true,\n      inputAttr: { 'aria-label': data._displayName, id: data._editorInputId }\n    }\"></div>\n    <dxa-template [template]=\"data.popupTemplate\" [data]=\"data.popupModel\"></dxa-template>\n</div>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { options: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class PopupContainerComponent {
+    data;
+    popupOptions;
+    ngOnInit() {
+        this.popupOptions = this.data.getPopupSettings();
+        this.popupOptions.height = calculateWithZoomFactor(362);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopupContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PopupContainerComponent, selector: "dxv-daterange-popup", inputs: { data: "data" }, ngImport: i0, template: "<dx-popup role=\"dialog\" aria-modal=\"true\" \n[width]=\"popupOptions.width\"\n[height]=\"popupOptions.height\"\n[wrapperAttr]=\"popupOptions.wrapperAttr\"\n[position]=\"popupOptions.position\"\n[container]=\"popupOptions.container\"\n[showTitle]=\"popupOptions.showTitle\"\n[showCloseButton]=\"popupOptions.showCloseButton\"\n[hideOnOutsideClick]=\"popupOptions.hideOnOutsideClick\"\n(onHidden)=\"popupOptions.onHidden($event)\"\n[animation]=\"popupOptions.animation\"\n[shading]=\"popupOptions.shading\"\n[visible]=\"popupOptions.visible\"\n>\n    <dx-scroll-view \n    [showScrollbar]=\"data.scrollViewOptions.showScrollbar\"\n    [direction]=\"data.scrollViewOptions.direction\"\n    [useNative]=\"data.scrollViewOptions.useNative\"\n    (onInitialized)=\"data.scrollViewOptions.onInitialized($event)\"\n    >\n        <div class=\"dxrv-daterange-editor-popup-container\" [dxMutationObserver]=\"data.dialogKeyboardHelper\">\n            <dx-scroll-view role=\"listbox\" class=\"dxrv-daterange-editor-list dxrv-daterange-editor-item dxd-border-primary dx-accessibility-daterange-item\" \n            [showScrollbar]=\"data.predefinedRanges.scrollViewOptions.showScrollbar\"\n            [scrollByContent]=\"data.predefinedRanges.scrollViewOptions.scrollByContent\"\n            [bounceEnabled]=\"data.predefinedRanges.scrollViewOptions.bounceEnabled\"\n            [useNative]=\"data.predefinedRanges.scrollViewOptions.useNative\"\n            [scrollByThumb]=\"data.predefinedRanges.scrollViewOptions.scrollByThumb\"\n            (onInitialized)=\"data.predefinedRanges.scrollViewOptions.onInitialized($event)\"\n            [dxMutationObserver]=\"data.predefinedRanges.accessibilityKeyboardHelper\"\n            >\n                <div class=\"dx-accessibility-container-background dxd-back-accented\"></div>\n                <div *ngFor=\"let item of data.predefinedRanges.items\" role=\"option\" class=\"dxrv-daterange-editor-list-item dxd-state-normal dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented\"\n                [attr.aria-selected]=\"item.selected\"\n                [class.dxd-state-selected]=\"item.selected\" [dxAction]=\"item.click\">\n                    <div class=\"dx-accessibility-field-background dxd-back-accented\"></div>\n                    {{item.displayName}}\n                </div>\n            </dx-scroll-view>\n            <div class=\"dxrv-daterange-editor-item\">\n                <div class=\"dx-accessibility-container-background dxd-back-accented\"></div>\n                <dxa-template template=\"dxrv-daterange-calendar\" [data]=\"data.startRange\"></dxa-template>\n            </div>\n            <div class=\"dxrv-daterange-editor-item\">\n                <div class=\"dx-accessibility-container-background dxd-back-accented\"></div>\n                <dxa-template template=\"dxrv-daterange-calendar\" [data]=\"data.endRange\"></dxa-template>\n            </div>\n        </div>\n    </dx-scroll-view>\n</dx-popup>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { kind: "component", type: i2.DxPopupComponent, selector: "dx-popup", inputs: ["accessKey", "animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "dragAndResizeArea", "dragEnabled", "dragOutsideBoundary", "enableBodyScroll", "focusStateEnabled", "fullScreen", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "resizeEnabled", "restorePosition", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showTitle", "tabIndex", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onResize", "onResizeEnd", "onResizeStart", "onShowing", "onShown", "onTitleRendered", "accessKeyChange", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "deferRenderingChange", "disabledChange", "dragAndResizeAreaChange", "dragEnabledChange", "dragOutsideBoundaryChange", "enableBodyScrollChange", "focusStateEnabledChange", "fullScreenChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "resizeEnabledChange", "restorePositionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showTitleChange", "tabIndexChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "directive", type: DxActionDirective, selector: "[dxAction]", inputs: ["dxActionModel", "dxAction"] }, { kind: "directive", type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopupContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-daterange-popup', template: "<dx-popup role=\"dialog\" aria-modal=\"true\" \n[width]=\"popupOptions.width\"\n[height]=\"popupOptions.height\"\n[wrapperAttr]=\"popupOptions.wrapperAttr\"\n[position]=\"popupOptions.position\"\n[container]=\"popupOptions.container\"\n[showTitle]=\"popupOptions.showTitle\"\n[showCloseButton]=\"popupOptions.showCloseButton\"\n[hideOnOutsideClick]=\"popupOptions.hideOnOutsideClick\"\n(onHidden)=\"popupOptions.onHidden($event)\"\n[animation]=\"popupOptions.animation\"\n[shading]=\"popupOptions.shading\"\n[visible]=\"popupOptions.visible\"\n>\n    <dx-scroll-view \n    [showScrollbar]=\"data.scrollViewOptions.showScrollbar\"\n    [direction]=\"data.scrollViewOptions.direction\"\n    [useNative]=\"data.scrollViewOptions.useNative\"\n    (onInitialized)=\"data.scrollViewOptions.onInitialized($event)\"\n    >\n        <div class=\"dxrv-daterange-editor-popup-container\" [dxMutationObserver]=\"data.dialogKeyboardHelper\">\n            <dx-scroll-view role=\"listbox\" class=\"dxrv-daterange-editor-list dxrv-daterange-editor-item dxd-border-primary dx-accessibility-daterange-item\" \n            [showScrollbar]=\"data.predefinedRanges.scrollViewOptions.showScrollbar\"\n            [scrollByContent]=\"data.predefinedRanges.scrollViewOptions.scrollByContent\"\n            [bounceEnabled]=\"data.predefinedRanges.scrollViewOptions.bounceEnabled\"\n            [useNative]=\"data.predefinedRanges.scrollViewOptions.useNative\"\n            [scrollByThumb]=\"data.predefinedRanges.scrollViewOptions.scrollByThumb\"\n            (onInitialized)=\"data.predefinedRanges.scrollViewOptions.onInitialized($event)\"\n            [dxMutationObserver]=\"data.predefinedRanges.accessibilityKeyboardHelper\"\n            >\n                <div class=\"dx-accessibility-container-background dxd-back-accented\"></div>\n                <div *ngFor=\"let item of data.predefinedRanges.items\" role=\"option\" class=\"dxrv-daterange-editor-list-item dxd-state-normal dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented\"\n                [attr.aria-selected]=\"item.selected\"\n                [class.dxd-state-selected]=\"item.selected\" [dxAction]=\"item.click\">\n                    <div class=\"dx-accessibility-field-background dxd-back-accented\"></div>\n                    {{item.displayName}}\n                </div>\n            </dx-scroll-view>\n            <div class=\"dxrv-daterange-editor-item\">\n                <div class=\"dx-accessibility-container-background dxd-back-accented\"></div>\n                <dxa-template template=\"dxrv-daterange-calendar\" [data]=\"data.startRange\"></dxa-template>\n            </div>\n            <div class=\"dxrv-daterange-editor-item\">\n                <div class=\"dx-accessibility-container-background dxd-back-accented\"></div>\n                <dxa-template template=\"dxrv-daterange-calendar\" [data]=\"data.endRange\"></dxa-template>\n            </div>\n        </div>\n    </dx-scroll-view>\n</dx-popup>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class CalendarComponent {
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CalendarComponent, selector: "dxv-daterange-calendar", inputs: { data: "data" }, ngImport: i0, template: "<dx-calendar tabindex=\"0\" class=\"dx-accessibility-calendar-item dx-accessibility-daterange-item\"\n    [min]=\"data.min\"\n    [value]=\"data.value\"\n    cellTemplate=\"select_cell\" \n    [height]=\"data.height\"\n    (onValueChanged)=\"data.onValueChanged($event)\"\n>\n    <div *dxTemplate=\"let item of 'select_cell'\" class=\"dxrv-daterange-cell\">\n        <div class=\"dxrv-daterange-cell-text\">{{item.text}}</div>\n        <div [class.dxd-back-accented]=\"data.inRange(item.date)\"></div>\n    </div>\n</dx-calendar>", dependencies: [{ kind: "directive", type: i2$1.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i2.DxCalendarComponent, selector: "dx-calendar", inputs: ["accessKey", "activeStateEnabled", "cellTemplate", "dateSerializationFormat", "disabled", "disabledDates", "elementAttr", "firstDayOfWeek", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "isDirty", "isValid", "max", "maxZoomLevel", "min", "minZoomLevel", "name", "readOnly", "rtlEnabled", "selectionMode", "selectWeekOnClick", "showTodayButton", "showWeekNumbers", "tabIndex", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "visible", "weekNumberRule", "width", "zoomLevel"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "cellTemplateChange", "dateSerializationFormatChange", "disabledChange", "disabledDatesChange", "elementAttrChange", "firstDayOfWeekChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "isDirtyChange", "isValidChange", "maxChange", "maxZoomLevelChange", "minChange", "minZoomLevelChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "selectionModeChange", "selectWeekOnClickChange", "showTodayButtonChange", "showWeekNumbersChange", "tabIndexChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "visibleChange", "weekNumberRuleChange", "widthChange", "zoomLevelChange", "onBlur"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-daterange-calendar', template: "<dx-calendar tabindex=\"0\" class=\"dx-accessibility-calendar-item dx-accessibility-daterange-item\"\n    [min]=\"data.min\"\n    [value]=\"data.value\"\n    cellTemplate=\"select_cell\" \n    [height]=\"data.height\"\n    (onValueChanged)=\"data.onValueChanged($event)\"\n>\n    <div *dxTemplate=\"let item of 'select_cell'\" class=\"dxrv-daterange-cell\">\n        <div class=\"dxrv-daterange-cell-text\">{{item.text}}</div>\n        <div [class.dxd-back-accented]=\"data.inRange(item.date)\"></div>\n    </div>\n</dx-calendar>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class LazyImagesDirective extends BaseDisposableDirective {
+    options;
+    InitAndReturnDisposeFunc(element) {
+        return initializeLazyImagesBinding(element, this.options);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LazyImagesDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LazyImagesDirective, selector: "[dxvLazyImages]", inputs: { options: ["dxvLazyImages", "options"] }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LazyImagesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dxvLazyImages]'
+                }]
+        }], propDecorators: { options: [{
+                type: Input,
+                args: ['dxvLazyImages']
+            }] } });
+
+class AutoFitDirective extends BaseDisposableDirective {
+    options;
+    InitAndReturnDisposeFunc(element) {
+        return initializeAutoFitBinding(element, this.options);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutoFitDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AutoFitDirective, selector: "[dxvAutoFit]", inputs: { options: ["dxvAutoFit", "options"] }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutoFitDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dxvAutoFit]'
+                }]
+        }], propDecorators: { options: [{
+                type: Input,
+                args: ['dxvAutoFit']
+            }] } });
+
+class ToViewDirective extends BaseDisposableDirective {
+    options;
+    InitAndReturnDisposeFunc(element) {
+        return initializeToViewBinding(element, this.options);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToViewDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ToViewDirective, selector: "[dxvToView]", inputs: { options: ["dxvToView", "options"] }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToViewDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dxvToView]'
+                }]
+        }], propDecorators: { options: [{
+                type: Input,
+                args: ['dxvToView']
+            }] } });
+
+class SurfaceComponent {
+    data;
+    clipboardMessage = getLocalization$1('Clipboard', 'ASPxReportsStringId.WebDocumentViewer_AriaClipboard');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SurfaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "directive", type: LazyImagesDirective, selector: "[dxvLazyImages]", inputs: ["dxvLazyImages"] }, { kind: "directive", type: AutoFitDirective, selector: "[dxvAutoFit]", inputs: ["dxvAutoFit"] }, { kind: "directive", type: ToViewDirective, selector: "[dxvToView]", inputs: ["dxvToView"] }, { kind: "directive", type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SurfaceComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-surface', 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>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class BrickSelectionDirective extends BaseDisposableDirective {
+    set brickSelection(newVal) {
+        this.options = newVal;
+        this._disposeFunc();
+        this._disposeFunc = initializeBrickSelectionProg(this.element, this.options);
+    }
+    options;
+    eventName = null;
+    InitAndReturnDisposeFunc(element) { return void 0; }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BrickSelectionDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: BrickSelectionDirective, selector: "[dxvBrickSelection]", inputs: { brickSelection: ["dxvBrickSelection", "brickSelection"] }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BrickSelectionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dxvBrickSelection]'
+                }]
+        }], propDecorators: { brickSelection: [{
+                type: Input,
+                args: ['dxvBrickSelection']
+            }] } });
+
+class PageComponent {
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "directive", type: BrickSelectionDirective, selector: "[dxvBrickSelection]", inputs: ["dxvBrickSelection"] }, { kind: "directive", type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-page', 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>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class EditorContentComponent {
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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\"></dxa-template>\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-editor-content', 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\"></dxa-template>\n</div>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class GroupEditorComponent {
+    data;
+    getCorrectLayoutClass(editor) {
+        return editor.editorTemplate !== 'dxrd-parameters-separator' ?
+            'dx-fill-available' : 'dx-display-content';
+    }
+    trackByFn(_, item) {
+        return item.editorInputId;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GroupEditorComponent, selector: "dxv-group-editor", inputs: { data: "data" }, ngImport: i0, template: "<div [class.dx-rtl]=\"data.viewmodel.rtl\">\n    <div class=\"dx-editors\">\n        <div class=\"dx-fieldset dxrd-parameters-fieldset dxd-border-primary\"\n            [style.display]=\"data.showHorizontally ? 'flex' : 'block'\">\n            <dxa-template *ngFor=\"let editor of data.viewmodel.editors; trackBy: trackByFn\" \n            [class]=\"getCorrectLayoutClass(editor)\"\n            [template]=\"editor.editorTemplate\" \n            [data]=\"editor\"></dxa-template>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-group-editor', template: "<div [class.dx-rtl]=\"data.viewmodel.rtl\">\n    <div class=\"dx-editors\">\n        <div class=\"dx-fieldset dxrd-parameters-fieldset dxd-border-primary\"\n            [style.display]=\"data.showHorizontally ? 'flex' : 'block'\">\n            <dxa-template *ngFor=\"let editor of data.viewmodel.editors; trackBy: trackByFn\" \n            [class]=\"getCorrectLayoutClass(editor)\"\n            [template]=\"editor.editorTemplate\" \n            [data]=\"editor\"></dxa-template>\n        </div>\n    </div>\n</div>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class SearchComponent {
+    data;
+    viewModel;
+    ngOnInit() {
+        this.viewModel = this.data.model.getViewModel();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "directive", type: i2$1.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i2.DxLoadIndicatorComponent, selector: "dx-load-indicator", inputs: ["elementAttr", "height", "hint", "indicatorSrc", "rtlEnabled", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "elementAttrChange", "heightChange", "hintChange", "indicatorSrcChange", "rtlEnabledChange", "visibleChange", "widthChange"] }, { kind: "component", type: i2.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"] }, { kind: "component", type: i2.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"] }, { kind: "component", type: i2.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"] }, { kind: "directive", type: DxActionDirective, selector: "[dxAction]", inputs: ["dxActionModel", "dxAction"] }, { kind: "directive", type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-search', 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" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class TreeListGroupComponent {
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeListGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TreeListGroupComponent, selector: "dxa-treelist-group", inputs: ["data"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeListGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxa-treelist-group', 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>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class TreelistComponent {
+    _element;
+    _disposeCallback;
+    _options;
+    _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();
+    }
+    treeList;
+    viewModel;
+    constructor(_element) {
+        this._element = _element;
+    }
+    ngAfterViewInit() {
+        this._updateTreeList();
+    }
+    ngOnDestroy() {
+        this._disposeCallback && this._disposeCallback();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreelistComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TreeListGroupComponent, selector: "dxa-treelist-group", inputs: ["data"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreelistComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxa-treelist', template: "<dxa-treelist-group #treelist *ngIf=\"!!viewModel\" template=\"dx-treelist\" [data]=\"viewModel\"></dxa-treelist-group>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { options: [{
+                type: Input,
+                args: ['options']
+            }], treeList: [{
+                type: ViewChild,
+                args: ['treelist']
+            }] } });
+
+class DocumentMapComponent {
+    data;
+    headerText;
+    viewModel;
+    constructor() {
+        this.headerText = getLocalization('Document Map', 'ASPxReportsStringId.DocumentViewer_RibbonCommandText_DocumentMap');
+    }
+    ngOnInit() {
+        this.viewModel = this.data.model?.getViewModel();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DocumentMapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { kind: "component", type: TreelistComponent, selector: "dxa-treelist", inputs: ["options"] }, { kind: "directive", type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DocumentMapComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-document-map', 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>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class TextEditingFieldComponent {
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextEditingFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: "16.2.12", ngImport: i0, type: TextEditingFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-editing-field-text', 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>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class ChildStyleDirective {
+    _element;
+    options;
+    constructor(_element) {
+        this._element = _element;
+    }
+    ngAfterViewInit() {
+        initializeChildStyleBinding(this._element.nativeElement, this.options);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChildStyleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ChildStyleDirective, selector: "[dxvChildStyle]", inputs: { options: ["dxvChildStyle", "options"] }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChildStyleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dxvChildStyle]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { options: [{
+                type: Input,
+                args: ['dxvChildStyle']
+            }] } });
+
+class TextEditingFieldMaskComponent {
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextEditingFieldMaskComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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>", dependencies: [{ kind: "component", type: i2.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"] }, { kind: "directive", type: ChildStyleDirective, selector: "[dxvChildStyle]", inputs: ["dxvChildStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextEditingFieldMaskComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-editing-field-mask', 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>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class TextEditingFieldNumberComponent {
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextEditingFieldNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TextEditingFieldNumberComponent, selector: "dxv-editing-field-number", inputs: { data: "data" }, ngImport: i0, template: "<dx-number-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-number-box>", dependencies: [{ kind: "component", type: i2.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"] }, { kind: "directive", type: ChildStyleDirective, selector: "[dxvChildStyle]", inputs: ["dxvChildStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextEditingFieldNumberComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-editing-field-number', template: "<dx-number-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-number-box>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class TextEditingFieldDateBoxComponent {
+    _element;
+    _cd;
+    data;
+    dropDownOptions;
+    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();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextEditingFieldDateBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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>", dependencies: [{ kind: "component", type: i2.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"] }, { kind: "directive", type: ChildStyleDirective, selector: "[dxvChildStyle]", inputs: ["dxvChildStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextEditingFieldDateBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-editing-field-datetime', 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>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class ZoomDirective {
+    _element;
+    set options(newVal) {
+        updateZoomBinding(this._element.nativeElement, newVal);
+    }
+    constructor(_element) {
+        this._element = _element;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ZoomDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ZoomDirective, selector: "[dxaZoom]", inputs: { options: ["dxaZoom", "options"] }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ZoomDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dxaZoom]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { options: [{
+                type: Input,
+                args: ['dxaZoom']
+            }] } });
+
+class TextEditingFieldContainerComponent {
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextEditingFieldContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "directive", type: ZoomDirective, selector: "[dxaZoom]", inputs: ["dxaZoom"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextEditingFieldContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-editing-field-container', 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>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class CharacterCombEditingFieldComponent {
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CharacterCombEditingFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ZoomDirective, selector: "[dxaZoom]", inputs: ["dxaZoom"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CharacterCombEditingFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-editing-field-character-comb', 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>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class CheckEditingFieldComponent {
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckEditingFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "directive", type: ZoomDirective, selector: "[dxaZoom]", inputs: ["dxaZoom"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckEditingFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-editing-field-checkbox', 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>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class RadioEditingFieldComponent {
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioEditingFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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", dependencies: [{ kind: "directive", type: ZoomDirective, selector: "[dxaZoom]", inputs: ["dxaZoom"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioEditingFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-editing-field-radio', 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" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class PictureEditorComponent {
+    _element;
+    _cd;
+    element;
+    viewModel;
+    editingFieldModel;
+    model;
+    data;
+    popupOptions;
+    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);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PictureEditorComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PictureEditorComponent, selector: "dxv-picture-editor", inputs: { viewModel: ["options", "viewModel"] }, viewQueries: [{ propertyName: "element", first: true, predicate: ["pictureEditing"], descendants: true }], ngImport: i0, template: "<div #pictureEditing class=\"dx-picture-editing\">\n    <canvas [dxaZoom]=\"data?.painter.scale\"></canvas>\n    <dx-popup *ngIf=\"!!popupOptions\" class=\"dx-picture-editing-active\"\n        width=\"48px\"\n        height=\"auto\"\n        [wrapperAttr]=\"{ class: 'dx-picture-editing-active' }\"\n        [position]=\"popupOptions.position\"\n        [container]=\"popupOptions.container\"\n        [showTitle]=\"false\"\n        [animation]=\"{}\"\n        [shading]=\"false\"\n        [visible]=\"true\">\n\n        <div class=\"dx-picture-editing-toolbar\" *dxTemplate=\"let contentData of 'content'\">\n            <div *ngFor=\"let action of data.actions\">\n                <div class=\"dx-picture-editing-toolbar-item\" (click)=\"action.action(action, $event)\" [attr.title]=\"action.title\">\n                    <dxa-template class=\"dx-picture-editing-toolbar-item-icon\" [template]=\"action.icon\"></dxa-template>\n                </div>\n                <dxa-template *ngIf=\"!!action.template\" [template]=\"action.template\" [data]=\"action.templateOptions\"></dxa-template>\n            </div>\n        </div>\n    </dx-popup>\n</div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i2.DxPopupComponent, selector: "dx-popup", inputs: ["accessKey", "animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "dragAndResizeArea", "dragEnabled", "dragOutsideBoundary", "enableBodyScroll", "focusStateEnabled", "fullScreen", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "resizeEnabled", "restorePosition", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showTitle", "tabIndex", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onResize", "onResizeEnd", "onResizeStart", "onShowing", "onShown", "onTitleRendered", "accessKeyChange", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "deferRenderingChange", "disabledChange", "dragAndResizeAreaChange", "dragEnabledChange", "dragOutsideBoundaryChange", "enableBodyScrollChange", "focusStateEnabledChange", "fullScreenChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "resizeEnabledChange", "restorePositionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showTitleChange", "tabIndexChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "directive", type: ZoomDirective, selector: "[dxaZoom]", inputs: ["dxaZoom"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PictureEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-picture-editor', template: "<div #pictureEditing class=\"dx-picture-editing\">\n    <canvas [dxaZoom]=\"data?.painter.scale\"></canvas>\n    <dx-popup *ngIf=\"!!popupOptions\" class=\"dx-picture-editing-active\"\n        width=\"48px\"\n        height=\"auto\"\n        [wrapperAttr]=\"{ class: 'dx-picture-editing-active' }\"\n        [position]=\"popupOptions.position\"\n        [container]=\"popupOptions.container\"\n        [showTitle]=\"false\"\n        [animation]=\"{}\"\n        [shading]=\"false\"\n        [visible]=\"true\">\n\n        <div class=\"dx-picture-editing-toolbar\" *dxTemplate=\"let contentData of 'content'\">\n            <div *ngFor=\"let action of data.actions\">\n                <div class=\"dx-picture-editing-toolbar-item\" (click)=\"action.action(action, $event)\" [attr.title]=\"action.title\">\n                    <dxa-template class=\"dx-picture-editing-toolbar-item-icon\" [template]=\"action.icon\"></dxa-template>\n                </div>\n                <dxa-template *ngIf=\"!!action.template\" [template]=\"action.template\" [data]=\"action.templateOptions\"></dxa-template>\n            </div>\n        </div>\n    </dx-popup>\n</div>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { element: [{
+                type: ViewChild,
+                args: ['pictureEditing']
+            }], viewModel: [{
+                type: Input,
+                args: ['options']
+            }] } });
+
+class ImageEditingFieldEditorComponent {
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageEditingFieldEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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>", dependencies: [{ kind: "component", type: PictureEditorComponent, selector: "dxv-picture-editor", inputs: ["options"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageEditingFieldEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-image-editing-field-editor', template: "<dxv-picture-editor [options]=\"data\" class=\"dxrd-height-100 dxrd-width-100\"></dxv-picture-editor>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class ImageEditingFieldComponent {
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageEditingFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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>", dependencies: [{ kind: "component", type: ImageEditingFieldEditorComponent, selector: "dxv-image-editing-field-editor", inputs: ["data"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageEditingFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-image-editing-field', 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>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class PainterComponent {
+    _element;
+    _cd;
+    options;
+    model;
+    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);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PainterComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PainterComponent, selector: "dxv-painter", inputs: { options: "options" }, ngImport: i0, template: "<div class=\"dx-painter\">\n    <canvas [dxaZoom]=\"model?.scale\"></canvas>\n</div>", dependencies: [{ kind: "directive", type: ZoomDirective, selector: "[dxaZoom]", inputs: ["dxaZoom"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PainterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-painter', template: "<div class=\"dx-painter\">\n    <canvas [dxaZoom]=\"model?.scale\"></canvas>\n</div>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { options: [{
+                type: Input,
+                args: ['options']
+            }] } });
+
+class PopupImageEditingFieldComponent {
+    _element;
+    _cd;
+    data;
+    popupContainer;
+    popupOptions;
+    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();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopupImageEditingFieldComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PopupImageEditingFieldComponent, selector: "dxv-popup-image-editing-field", inputs: { data: "data" }, viewQueries: [{ propertyName: "popupContainer", first: true, predicate: ["popupContainer"], descendants: true }], ngImport: i0, template: "<div class=\"dxrp-editing-field-container\" [style]=\"data.containerStyle\">\n    <div #popupContainer [class]=\"'dx-picture-edit-popup-content dx-picture-edit-popup-content-fullscreen ' + data.parentPopupClass\" (click)=\"data.activateEditor(data, $event)\">\n        <dxv-painter class=\"dxrp-editing-field-popup-container-cloned\" [options]=\"data.getPainterOptions()\"></dxv-painter>\n        <dx-popup *ngIf=\"!!popupOptions\" class=\"dx-picture-edit-popup-content dx-picture-edit-popup-content-fullscreen\"\n            [width]=\"data.containerStyle.width\"\n            [height]=\"data.containerStyle.height\"\n            [position]=\"popupOptions.position\"\n            [container]=\"popupOptions.container\"\n            [showTitle]=\"false\"\n            [deferRendering]=\"false\"\n            [hideOnOutsideClick]=\"true\"\n            [showCloseButton]=\"false\"\n            (onContentReady)=\"data.popupData.onContentReady($event)\"\n            (onHiding)=\"data.popupData.onHiding($event)\"\n            (onShown)=\"data.popupData.onShown($event)\"\n            [shading]=\"data.popupData.shading\"\n            [wrapperAttr]=\"{ class: 'dx-picture-edit-popup-content dx-picture-edit-popup-content-fullscreen' }\"\n            [animation]=\"{ \n                show: { type: 'slide', duration: 0, to: { opacity: 1 }, from: { opacity: 0 } },\n                hide: { type: 'fade', duration: 100, to: { opacity: 0 }, from: { opacity: 1 } }\n            }\"\n            [visible]=\"data.popupData.visible\"\n        >\n            <dxa-template *ngIf=\"data.popupData.showContent\" [template]=\"data.popupData.contentTemplate\" [data]=\"data\"></dxa-template>\n    </dx-popup>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DxPopupComponent, selector: "dx-popup", inputs: ["accessKey", "animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "dragAndResizeArea", "dragEnabled", "dragOutsideBoundary", "enableBodyScroll", "focusStateEnabled", "fullScreen", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "resizeEnabled", "restorePosition", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showTitle", "tabIndex", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onResize", "onResizeEnd", "onResizeStart", "onShowing", "onShown", "onTitleRendered", "accessKeyChange", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "deferRenderingChange", "disabledChange", "dragAndResizeAreaChange", "dragEnabledChange", "dragOutsideBoundaryChange", "enableBodyScrollChange", "focusStateEnabledChange", "fullScreenChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "resizeEnabledChange", "restorePositionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showTitleChange", "tabIndexChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "component", type: PainterComponent, selector: "dxv-painter", inputs: ["options"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopupImageEditingFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-popup-image-editing-field', template: "<div class=\"dxrp-editing-field-container\" [style]=\"data.containerStyle\">\n    <div #popupContainer [class]=\"'dx-picture-edit-popup-content dx-picture-edit-popup-content-fullscreen ' + data.parentPopupClass\" (click)=\"data.activateEditor(data, $event)\">\n        <dxv-painter class=\"dxrp-editing-field-popup-container-cloned\" [options]=\"data.getPainterOptions()\"></dxv-painter>\n        <dx-popup *ngIf=\"!!popupOptions\" class=\"dx-picture-edit-popup-content dx-picture-edit-popup-content-fullscreen\"\n            [width]=\"data.containerStyle.width\"\n            [height]=\"data.containerStyle.height\"\n            [position]=\"popupOptions.position\"\n            [container]=\"popupOptions.container\"\n            [showTitle]=\"false\"\n            [deferRendering]=\"false\"\n            [hideOnOutsideClick]=\"true\"\n            [showCloseButton]=\"false\"\n            (onContentReady)=\"data.popupData.onContentReady($event)\"\n            (onHiding)=\"data.popupData.onHiding($event)\"\n            (onShown)=\"data.popupData.onShown($event)\"\n            [shading]=\"data.popupData.shading\"\n            [wrapperAttr]=\"{ class: 'dx-picture-edit-popup-content dx-picture-edit-popup-content-fullscreen' }\"\n            [animation]=\"{ \n                show: { type: 'slide', duration: 0, to: { opacity: 1 }, from: { opacity: 0 } },\n                hide: { type: 'fade', duration: 100, to: { opacity: 0 }, from: { opacity: 1 } }\n            }\"\n            [visible]=\"data.popupData.visible\"\n        >\n            <dxa-template *ngIf=\"data.popupData.showContent\" [template]=\"data.popupData.contentTemplate\" [data]=\"data\"></dxa-template>\n    </dx-popup>\n    </div>\n</div>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }], popupContainer: [{
+                type: ViewChild,
+                args: ['popupContainer']
+            }] } });
+
+class ProgressBarComponent {
+    viewModel;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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>", dependencies: [{ kind: "directive", type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-progress-bar', 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>" }]
+        }], propDecorators: { viewModel: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class PictureEditorToolBarPopupComponent {
+    _element;
+    _cd;
+    data;
+    popupOptions;
+    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();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PictureEditorToolBarPopupComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PictureEditorToolBarPopupComponent, selector: "dxv-picture-editor-toolbar-popup", inputs: { data: "data" }, ngImport: i0, template: "<dx-popover *ngIf=\"!!popupOptions\" class=\"dx-picture-edit-popup-content\"\n    [width]=\"data.width\"\n    [height]=\"data.height\"\n    [wrapperAttr]=\"{ class: 'dx-picture-edit-popup-content' }\"\n    [hideOnOutsideClick]=\"data.hideOnOutsideClick\"\n    (onShown)=\"data.onShown($event)\"\n    (onHidden)=\"data.onHidden($event)\"\n    (onContentReady)=\"data.onContentReady($event)\"\n    [position]=\"popupOptions.position\"\n    [container]=\"popupOptions.container\"\n    [showTitle]=\"false\"\n    [showCloseButton]=\"false\"\n    [shading]=\"false\"\n    [animation]=\"{}\"\n    [visible]=\"data.visible\">\n    <dxa-template [template]=\"data.contentTemplate\" [data]=\"data.contentData\"></dxa-template>\n</dx-popover>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "enableBodyScroll", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "deferRenderingChange", "disabledChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PictureEditorToolBarPopupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-picture-editor-toolbar-popup', template: "<dx-popover *ngIf=\"!!popupOptions\" class=\"dx-picture-edit-popup-content\"\n    [width]=\"data.width\"\n    [height]=\"data.height\"\n    [wrapperAttr]=\"{ class: 'dx-picture-edit-popup-content' }\"\n    [hideOnOutsideClick]=\"data.hideOnOutsideClick\"\n    (onShown)=\"data.onShown($event)\"\n    (onHidden)=\"data.onHidden($event)\"\n    (onContentReady)=\"data.onContentReady($event)\"\n    [position]=\"popupOptions.position\"\n    [container]=\"popupOptions.container\"\n    [showTitle]=\"false\"\n    [showCloseButton]=\"false\"\n    [shading]=\"false\"\n    [animation]=\"{}\"\n    [visible]=\"data.visible\">\n    <dxa-template [template]=\"data.contentTemplate\" [data]=\"data.contentData\"></dxa-template>\n</dx-popover>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class PictureEditorBrushOptionsComponent {
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PictureEditorBrushOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PictureEditorBrushOptionsComponent, selector: "dxv-picture-editing-brush-options", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"dx-picture-editing-brush-options\">\n    <div class=\"dx-picture-editing-line-width\">\n        <div class=\"dx-picture-editing-text\">{{data.brushWidthText}}</div>\n        <dx-slider class=\"dx-picture-editing-line-width-slider\"\n            [min]=\"1\"\n            [max]=\"9\"\n            [value]=\"data.lineWidth\"\n            [label]=\"{ visible: true }\"\n            [tooltip]=\"{ enabled: true, showMode: 'always', position: 'bottom' }\"\n            (onValueChanged)=\"this.data.onLineWidthChanged($event)\">\n        </dx-slider>\n    </div>\n    <div class=\"dx-picture-editing-line-color\">\n        <div class=\"dx-picture-editing-text\">{{data.brushColorText}}</div>\n        <div class=\"dx-picture-editing-brush-options-colors\">\n            <div class=\"dx-picture-editing-brush-options-color\" *ngFor=\"let color of data.colors\" [class.selected]=\"color.isSelected\">\n                <div class=\"dx-picture-editing-brush-options-color-cell\" [style.background]=\"color.value\" (click)=\"color.action()\"></div>\n            </div>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.DxSliderComponent, selector: "dx-slider", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "isDirty", "isValid", "keyStep", "label", "max", "min", "name", "readOnly", "rtlEnabled", "showRange", "step", "tabIndex", "tooltip", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeMode", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "isDirtyChange", "isValidChange", "keyStepChange", "labelChange", "maxChange", "minChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "showRangeChange", "stepChange", "tabIndexChange", "tooltipChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeModeChange", "visibleChange", "widthChange", "onBlur"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PictureEditorBrushOptionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-picture-editing-brush-options', template: "<div class=\"dx-picture-editing-brush-options\">\n    <div class=\"dx-picture-editing-line-width\">\n        <div class=\"dx-picture-editing-text\">{{data.brushWidthText}}</div>\n        <dx-slider class=\"dx-picture-editing-line-width-slider\"\n            [min]=\"1\"\n            [max]=\"9\"\n            [value]=\"data.lineWidth\"\n            [label]=\"{ visible: true }\"\n            [tooltip]=\"{ enabled: true, showMode: 'always', position: 'bottom' }\"\n            (onValueChanged)=\"this.data.onLineWidthChanged($event)\">\n        </dx-slider>\n    </div>\n    <div class=\"dx-picture-editing-line-color\">\n        <div class=\"dx-picture-editing-text\">{{data.brushColorText}}</div>\n        <div class=\"dx-picture-editing-brush-options-colors\">\n            <div class=\"dx-picture-editing-brush-options-color\" *ngFor=\"let color of data.colors\" [class.selected]=\"color.isSelected\">\n                <div class=\"dx-picture-editing-brush-options-color-cell\" [style.background]=\"color.value\" (click)=\"color.action()\"></div>\n            </div>\n        </div>\n    </div>\n</div>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class PictureEditorSizeOptionsComponent {
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PictureEditorSizeOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PictureEditorSizeOptionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-picture-editing-size-options', 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>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class SearchHighlightingDirective {
+    _element;
+    _text;
+    _textToSearch;
+    set text(newVal) {
+        this._text = newVal;
+        this.updateModel();
+    }
+    set textToSearch(newVal) {
+        this._textToSearch = newVal;
+        this.updateModel();
+    }
+    htmlContent;
+    model;
+    constructor(_element) {
+        this._element = _element;
+    }
+    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() {
+        this.model?.dispose();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchHighlightingDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SearchHighlightingDirective, selector: "[dxaSearchHighlighting]", inputs: { text: "text", textToSearch: "textToSearch" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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 {
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PictureEditorImagespickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { kind: "directive", type: SearchHighlightingDirective, selector: "[dxaSearchHighlighting]", inputs: ["text", "textToSearch"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PictureEditorImagespickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-picture-editing-imagespicker', 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>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class PictureEditorImagespickerWithFilterComponent extends PictureEditorImagespickerComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PictureEditorImagespickerWithFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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>", dependencies: [{ kind: "component", type: i2.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"] }, { kind: "component", type: PictureEditorImagespickerComponent, selector: "dxv-picture-editing-imagespicker", inputs: ["data"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PictureEditorImagespickerWithFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-picture-editing-imagespickerwithfilter', 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>" }]
+        }] });
+
+class SignatureEditorComponent extends EditorDropDownComponentBase {
+    _sanitizer;
+    constructor(_cd, _sanitizer) {
+        super(_cd);
+        this._sanitizer = _sanitizer;
+    }
+    dropDownOptions;
+    popupPosition;
+    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);
+    }
+    processImage = (image) => this._sanitizer.bypassSecurityTrustUrl(image);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SignatureEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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]=\"processImage(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", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i2.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"] }, { kind: "component", type: i2.DxValidatorComponent, selector: "dx-validator", inputs: ["adapter", "elementAttr", "height", "name", "validationGroup", "validationRules", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValidated", "adapterChange", "elementAttrChange", "heightChange", "nameChange", "validationGroupChange", "validationRulesChange", "widthChange"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SignatureEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-signature-editor', 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]=\"processImage(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" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.DomSanitizer }]; } });
+
+class BrickComponent {
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BrickComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: "16.2.12", ngImport: i0, type: BrickComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-brick', 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>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class BrickClickableComponent {
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BrickClickableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BrickClickableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-brick-clickable', 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>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class ExportToolComponent {
+    _element;
+    _cd;
+    data;
+    popupOptions;
+    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();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExportToolComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ExportToolComponent, selector: "dxv-export-tool", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"dxrd-visually-hidden\">\n    <form [attr.action]=\"data.exportActionUri\" method=\"post\">\n        <input *ngFor=\"let input of data.exportFormData\" [attr.name]=\"input.name\" [attr.value]=\"input.value\"/>\n    </form>\n</div>\n<dx-popup\n    [width]=\"data.popupOptions.width\"\n    [height]=\"data.popupOptions.height\"\n    [title]=\"data.popupOptions.title\"\n    [visible]=\"data.popupOptions.visible\"\n    [showCloseButton]=\"true\"\n    (onHidden)=\"data.popupOptions.onHidden()\"\n    [toolbarItems]=\"data.popupOptions.toolbarItems\"\n    [wrapperAttr]=\"data.popupOptions.wrapperAttr\"\n    [container]=\"popupOptions?.container\"\n    [position]=\"popupOptions?.position\">\n        <div class=\"dxrd-print-dialog-content\">\n            <div>{{data.printingTexts.caption}}</div>\n            <p></p>\n            <div *ngIf=\"!!data.printingTexts.prefix\" class=\"dxrdp-print-text-prefix\">{{data.printingTexts.prefix}}\n            </div>&nbsp;<a href=\"\" class=\"dxrd-preview-printing-link\" (click)=\"data.printingLinkCallback(data, $event)\">{{data.printingTexts.link}}</a>\n            <div *ngIf=\"!!data.printingTexts.postfix\" class=\"dxrdp-print-text-postfix\">{{data.printingTexts.postfix}}</div>\n        </div>\n</dx-popup>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DxPopupComponent, selector: "dx-popup", inputs: ["accessKey", "animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "dragAndResizeArea", "dragEnabled", "dragOutsideBoundary", "enableBodyScroll", "focusStateEnabled", "fullScreen", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "resizeEnabled", "restorePosition", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showTitle", "tabIndex", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onResize", "onResizeEnd", "onResizeStart", "onShowing", "onShown", "onTitleRendered", "accessKeyChange", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "deferRenderingChange", "disabledChange", "dragAndResizeAreaChange", "dragEnabledChange", "dragOutsideBoundaryChange", "enableBodyScrollChange", "focusStateEnabledChange", "fullScreenChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "resizeEnabledChange", "restorePositionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showTitleChange", "tabIndexChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExportToolComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-export-tool', template: "<div class=\"dxrd-visually-hidden\">\n    <form [attr.action]=\"data.exportActionUri\" method=\"post\">\n        <input *ngFor=\"let input of data.exportFormData\" [attr.name]=\"input.name\" [attr.value]=\"input.value\"/>\n    </form>\n</div>\n<dx-popup\n    [width]=\"data.popupOptions.width\"\n    [height]=\"data.popupOptions.height\"\n    [title]=\"data.popupOptions.title\"\n    [visible]=\"data.popupOptions.visible\"\n    [showCloseButton]=\"true\"\n    (onHidden)=\"data.popupOptions.onHidden()\"\n    [toolbarItems]=\"data.popupOptions.toolbarItems\"\n    [wrapperAttr]=\"data.popupOptions.wrapperAttr\"\n    [container]=\"popupOptions?.container\"\n    [position]=\"popupOptions?.position\">\n        <div class=\"dxrd-print-dialog-content\">\n            <div>{{data.printingTexts.caption}}</div>\n            <p></p>\n            <div *ngIf=\"!!data.printingTexts.prefix\" class=\"dxrdp-print-text-prefix\">{{data.printingTexts.prefix}}\n            </div>&nbsp;<a href=\"\" class=\"dxrd-preview-printing-link\" (click)=\"data.printingLinkCallback(data, $event)\">{{data.printingTexts.link}}</a>\n            <div *ngIf=\"!!data.printingTexts.postfix\" class=\"dxrdp-print-text-postfix\">{{data.printingTexts.postfix}}</div>\n        </div>\n</dx-popup>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class EditingFieldCheckboxGlyphComponent {
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditingFieldCheckboxGlyphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: "16.2.12", ngImport: i0, type: EditingFieldCheckboxGlyphComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-editing-field-checkbox-glyph', template: "<div class=\"dxrd-checkbox-custom-glyph\" [style]=\"data.customGlyphStyleCss\"></div>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class MobileSlideDirective extends BaseDisposableDirective {
+    options;
+    InitAndReturnDisposeFunc(element) {
+        return initializeSlideBinding(element, this.options);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileSlideDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: MobileSlideDirective, selector: "[dxvMobileSlide]", inputs: { options: ["dxvMobileSlide", "options"] }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileSlideDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dxvMobileSlide]'
+                }]
+        }], propDecorators: { options: [{
+                type: Input,
+                args: ['dxvMobileSlide']
+            }] } });
+
+class MobileZoomDirective extends BaseDisposableDirective {
+    options;
+    InitAndReturnDisposeFunc(element) {
+        initializeMobileZoomBinding(element, this.options);
+        return () => void 0;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileZoomDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: MobileZoomDirective, selector: "[dxvMobileZoom]", inputs: { options: ["dxvMobileZoom", "options"] }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileZoomDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dxvMobileZoom]'
+                }]
+        }], propDecorators: { options: [{
+                type: Input,
+                args: ['dxvMobileZoom']
+            }] } });
+
+class MobileGalleryComponent {
+    _dxgallery;
+    _gallery = null;
+    _slideOptions = null;
+    data;
+    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);
+        }
+    }
+    galleryComponent;
+    constructor() {
+    }
+    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);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileGalleryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i2.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { kind: "component", type: i2.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"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileGalleryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-mobile-gallery', 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>" }]
+        }], 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 MobileSurfaceComponent {
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileSurfaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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\" />", dependencies: [{ kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "directive", type: MobileSlideDirective, selector: "[dxvMobileSlide]", inputs: ["dxvMobileSlide"] }, { kind: "directive", type: MobileZoomDirective, selector: "[dxvMobileZoom]", inputs: ["dxvMobileZoom"] }, { kind: "component", type: MobileGalleryComponent, selector: "dxv-mobile-gallery", inputs: ["data", "gallery", "slideOptions"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileSurfaceComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-mobile-surface', 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\" />" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class MobileAutofitDirective extends BaseDisposableDirective {
+    options;
+    InitAndReturnDisposeFunc(element) {
+        return initializeAutoFitBinding(element, this.options);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileAutofitDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: MobileAutofitDirective, selector: "[dxvMobileAutofit]", inputs: { options: ["dxvMobileAutofit", "options"] }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileAutofitDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dxvMobileAutofit]'
+                }]
+        }], propDecorators: { options: [{
+                type: Input,
+                args: ['dxvMobileAutofit']
+            }] } });
+
+class MobilePageComponent {
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobilePageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "directive", type: MobileAutofitDirective, selector: "[dxvMobileAutofit]", inputs: ["dxvMobileAutofit"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobilePageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-mobile-page', 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>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class MobileActionsComponent {
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-mobile-actions', 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>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class ComponentWithParentContainer {
+    _element;
+    parentContainer;
+    constructor(_element) {
+        this._element = _element;
+    }
+    ngOnInit() {
+        this.parentContainer = getParentContainer(this._element.nativeElement);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComponentWithParentContainer, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ComponentWithParentContainer, selector: "dxa-contained-element", ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComponentWithParentContainer, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dxa-contained-element',
+                    template: ''
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+class MobileParametersPopupComponent extends ComponentWithParentContainer {
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileParametersPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MobileParametersPopupComponent, selector: "dxv-mobile-parameters-popup", inputs: { data: "data" }, usesInheritance: true, ngImport: i0, template: "<dx-popup [wrapperAttr]=\"{ class: 'dxrd-menu-parameters-popup' }\" [showTitle]=\"false\" (onHidden)=\"data.onHidden($event)\" width=\"100vw\" height=\"100vh\" [visible]=\"data.visible\" [container]=\"parentContainer\">\n    <dxa-template *ngIf=\"data.visible\" template=\"dxrv-preview-parameters-mobile\" [data]=\"data\"></dxa-template>\n</dx-popup>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DxPopupComponent, selector: "dx-popup", inputs: ["accessKey", "animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "dragAndResizeArea", "dragEnabled", "dragOutsideBoundary", "enableBodyScroll", "focusStateEnabled", "fullScreen", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "resizeEnabled", "restorePosition", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showTitle", "tabIndex", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onResize", "onResizeEnd", "onResizeStart", "onShowing", "onShown", "onTitleRendered", "accessKeyChange", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "deferRenderingChange", "disabledChange", "dragAndResizeAreaChange", "dragEnabledChange", "dragOutsideBoundaryChange", "enableBodyScrollChange", "focusStateEnabledChange", "fullScreenChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "resizeEnabledChange", "restorePositionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showTitleChange", "tabIndexChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileParametersPopupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-mobile-parameters-popup', template: "<dx-popup [wrapperAttr]=\"{ class: 'dxrd-menu-parameters-popup' }\" [showTitle]=\"false\" (onHidden)=\"data.onHidden($event)\" width=\"100vw\" height=\"100vh\" [visible]=\"data.visible\" [container]=\"parentContainer\">\n    <dxa-template *ngIf=\"data.visible\" template=\"dxrv-preview-parameters-mobile\" [data]=\"data\"></dxa-template>\n</dx-popup>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class MobileParametersComponent {
+    _element;
+    _cd;
+    data;
+    buttonGroup;
+    constructor(_element, _cd) {
+        this._element = _element;
+        this._cd = _cd;
+    }
+    ngAfterViewInit() {
+        this.data.cacheElementContent(this.buttonGroup.nativeElement);
+        this._cd.detectChanges();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileParametersComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: i2.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileParametersComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-mobile-parameters', 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>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }], buttonGroup: [{
+                type: ViewChild,
+                args: ['buttonGroup']
+            }] } });
+
+class MobileParametersDateRangeComponent extends DateRangeComponent {
+    ngOnInit() {
+        this.options.isMobile = true;
+        super.ngOnInit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileParametersDateRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MobileParametersDateRangeComponent, selector: "dxv-mobile-parameters-daterange", usesInheritance: true, ngImport: i0, template: "<dxv-date-range [data]=\"options\"></dxv-date-range>", dependencies: [{ kind: "component", type: DateRangeComponent, selector: "dxv-date-range", inputs: ["data"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileParametersDateRangeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-mobile-parameters-daterange', template: "<dxv-date-range [data]=\"options\"></dxv-date-range>" }]
+        }] });
+
+class MobileActionsExportComponent extends ComponentWithParentContainer {
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileActionsExportComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MobileActionsExportComponent, selector: "dxv-mobile-actions-export", inputs: { data: "data" }, usesInheritance: true, ngImport: i0, template: "<dx-popover class=\"dxrd-menu-export-popover\"\n    [wrapperAttr]=\"{ class: 'dxrd-menu-export-popover' }\"\n    width=\"266px\"\n    height=\"266px\"\n    [visible]=\"data.visible\"\n    target=\".dxrdp-mobile-action.dxrd-image-export-to\"\n    [container]=\"parentContainer\">\n    <div *dxTemplate=\"let contentData of 'content'\">\n        <div *ngFor=\"let item of data.items\" class=\"dxrd-menu-export-item\" (click)=\"item.action()\">{{item.text}}</div>\n    </div>\n</dx-popover>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "enableBodyScroll", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "deferRenderingChange", "disabledChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileActionsExportComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-mobile-actions-export', template: "<dx-popover class=\"dxrd-menu-export-popover\"\n    [wrapperAttr]=\"{ class: 'dxrd-menu-export-popover' }\"\n    width=\"266px\"\n    height=\"266px\"\n    [visible]=\"data.visible\"\n    target=\".dxrdp-mobile-action.dxrd-image-export-to\"\n    [container]=\"parentContainer\">\n    <div *dxTemplate=\"let contentData of 'content'\">\n        <div *ngFor=\"let item of data.items\" class=\"dxrd-menu-export-item\" (click)=\"item.action()\">{{item.text}}</div>\n    </div>\n</dx-popover>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class MobileSearchBarDirective extends BaseDisposableDirective {
+    options;
+    InitAndReturnDisposeFunc(element) {
+        return initializeMobileSearchBinding(element, this.options);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileSearchBarDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: MobileSearchBarDirective, selector: "[dxvSearchBar]", inputs: { options: ["dxvSearchBar", "options"] }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileSearchBarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dxvSearchBar]'
+                }]
+        }], propDecorators: { options: [{
+                type: Input,
+                args: ['dxvSearchBar']
+            }] } });
+
+class MobileSearchComponent {
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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>", dependencies: [{ kind: "component", type: i2.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"] }, { kind: "directive", type: MobileSearchBarDirective, selector: "[dxvSearchBar]", inputs: ["dxvSearchBar"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileSearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-search-mobile', 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>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class DateRangeMobileComponent {
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateRangeMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: i2.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"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateRangeMobileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-date-range-mobile', 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>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class MobilePaginatorDirective extends BaseDisposableDirective {
+    options;
+    InitAndReturnDisposeFunc(element) {
+        initializeMobilePaginatorBinding(element, this.options);
+        return () => void 0;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobilePaginatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: MobilePaginatorDirective, selector: "[dxvPaginator]", inputs: { options: ["dxvPaginator", "options"] }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobilePaginatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dxvPaginator]'
+                }]
+        }], propDecorators: { options: [{
+                type: Input,
+                args: ['dxvPaginator']
+            }] } });
+
+class MobilePaginatorComponent {
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobilePaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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", dependencies: [{ kind: "directive", type: MobilePaginatorDirective, selector: "[dxvPaginator]", inputs: ["dxvPaginator"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobilePaginatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-pages-mobile', 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" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class BreadcrumbsComponent {
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BreadcrumbsComponent, selector: "dxv-breadcrumbs", inputs: { data: "data" }, ngImport: i0, template: "<div *ngIf=\"data.listItems.length > 1\" class=\"breadcrumbs-wrapper\">\n    <ng-container *ngFor=\"let item of data.listItems; index as i\">\n        <a *ngIf=\"data.listItems.length > (i+1)\" class=\"breadcrump-link breadcrumb-item dxd-text-accented\"\n            (click)=\"data.onClick(item.position)\">\n            <span>{{item.displayText}}</span>\n        </a>\n        <dxa-template *ngIf=\"data.listItems.length > (i+1)\" class=\"breadcrumb-item-seperator\" template=\"dxrd-svg-preview-breadcrumbs_seperator\"></dxa-template>\n        <a *ngIf=\"data.listItems.length === (i+1)\" class=\"breadcrumb-item dxd-text-primary\">\n            <span>{{item.displayText}}</span>\n        </a>\n    </ng-container>\n</div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-breadcrumbs', template: "<div *ngIf=\"data.listItems.length > 1\" class=\"breadcrumbs-wrapper\">\n    <ng-container *ngFor=\"let item of data.listItems; index as i\">\n        <a *ngIf=\"data.listItems.length > (i+1)\" class=\"breadcrump-link breadcrumb-item dxd-text-accented\"\n            (click)=\"data.onClick(item.position)\">\n            <span>{{item.displayText}}</span>\n        </a>\n        <dxa-template *ngIf=\"data.listItems.length > (i+1)\" class=\"breadcrumb-item-seperator\" template=\"dxrd-svg-preview-breadcrumbs_seperator\"></dxa-template>\n        <a *ngIf=\"data.listItems.length === (i+1)\" class=\"breadcrumb-item dxd-text-primary\">\n            <span>{{item.displayText}}</span>\n        </a>\n    </ng-container>\n</div>" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }] } });
+
+class ViewerTemplatesComponent {
+    _templateEngine;
+    toolbar;
+    breadcrumb;
+    exportAction;
+    pagerAction;
+    zoomAction;
+    parameters;
+    editor;
+    multivalue;
+    multivalueEditable;
+    signatureEditor;
+    exportOptions;
+    documentMap;
+    daterangeinput;
+    daterangePopup;
+    daterangeecalendar;
+    surface;
+    page;
+    editorContent;
+    groupEditor;
+    search;
+    brick;
+    brickClickable;
+    separator;
+    textEditingFieldContainer;
+    textEditingField;
+    textEditingFieldDate;
+    textEditingFieldMask;
+    textEditingFieldNumber;
+    characterCombEditingField;
+    checkEditingField;
+    radioEditingField;
+    imageEditingField;
+    imageEditingFieldEditor;
+    popupImageEditingField;
+    pictureEditingToolbarPopup;
+    pictureEditingBrushOptions;
+    pictureEditingSizeOptions;
+    pictureEditingImagesPicker;
+    pictureEditingImagesPickerWithFilter;
+    progressBar;
+    exportTool;
+    checkboxGlyph;
+    mobileSurface;
+    mobilePage;
+    mobileActions;
+    mobileParameters;
+    mobileParametersPopup;
+    mobileParametersDateRange;
+    mobileDateRange;
+    mobileExport;
+    mobilesearch;
+    mobilepaginator;
+    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-breadcrumb', this.breadcrumb);
+        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);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewerTemplatesComponent, deps: [{ token: TemplateEngine }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ViewerTemplatesComponent, selector: "dxv-templates", viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "breadcrumb", first: true, predicate: ["breadcrumb"], 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>\n\n<ng-template #breadcrumb let-data=\"data\">\n    <dxv-breadcrumbs [data]=\"data\"></dxv-breadcrumbs>\n</ng-template>", dependencies: [{ kind: "component", type: ParameterspanelComponent, selector: "dxv-parameters", inputs: ["data"] }, { kind: "component", type: PagerComponent, selector: "dxv-toolbar-pager", inputs: ["data"] }, { kind: "component", type: ZoomComponent, selector: "dxv-toolbar-zoom", inputs: ["data"] }, { kind: "component", type: ExportComponent, selector: "dxv-toolbar-export", inputs: ["data"] }, { kind: "component", type: ToolbarContentComponent, selector: "dxv-toolbar", inputs: ["data"] }, { kind: "component", type: EditorComponent, selector: "dxv-editor" }, { kind: "component", type: MultiValueComponent, selector: "dxv-multivalue" }, { kind: "component", type: ExportOptionsComponent, selector: "dxv-export-options", inputs: ["data"] }, { kind: "component", type: MultiValueEditableComponent, selector: "dxv-multivalue-editable" }, { kind: "component", type: DateRangeComponent, selector: "dxv-date-range", inputs: ["data"] }, { kind: "component", type: PopupContainerComponent, selector: "dxv-daterange-popup", inputs: ["data"] }, { kind: "component", type: CalendarComponent, selector: "dxv-daterange-calendar", inputs: ["data"] }, { kind: "component", type: SurfaceComponent, selector: "dxv-surface", inputs: ["data"] }, { kind: "component", type: PageComponent, selector: "dxv-page", inputs: ["data"] }, { kind: "component", type: EditorContentComponent, selector: "dxv-editor-content", inputs: ["data"] }, { kind: "component", type: GroupEditorComponent, selector: "dxv-group-editor", inputs: ["data"] }, { kind: "component", type: SearchComponent, selector: "dxv-search", inputs: ["data"] }, { kind: "component", type: DocumentMapComponent, selector: "dxv-document-map", inputs: ["data"] }, { kind: "component", type: TextEditingFieldComponent, selector: "dxv-editing-field-text", inputs: ["data"] }, { kind: "component", type: TextEditingFieldMaskComponent, selector: "dxv-editing-field-mask", inputs: ["data"] }, { kind: "component", type: TextEditingFieldNumberComponent, selector: "dxv-editing-field-number", inputs: ["data"] }, { kind: "component", type: TextEditingFieldDateBoxComponent, selector: "dxv-editing-field-datetime", inputs: ["data"] }, { kind: "component", type: TextEditingFieldContainerComponent, selector: "dxv-editing-field-container", inputs: ["data"] }, { kind: "component", type: CharacterCombEditingFieldComponent, selector: "dxv-editing-field-character-comb", inputs: ["data"] }, { kind: "component", type: CheckEditingFieldComponent, selector: "dxv-editing-field-checkbox", inputs: ["data"] }, { kind: "component", type: RadioEditingFieldComponent, selector: "dxv-editing-field-radio", inputs: ["data"] }, { kind: "component", type: ImageEditingFieldComponent, selector: "dxv-image-editing-field", inputs: ["data"] }, { kind: "component", type: ImageEditingFieldEditorComponent, selector: "dxv-image-editing-field-editor", inputs: ["data"] }, { kind: "component", type: PopupImageEditingFieldComponent, selector: "dxv-popup-image-editing-field", inputs: ["data"] }, { kind: "component", type: ProgressBarComponent, selector: "dxv-progress-bar", inputs: ["data"] }, { kind: "component", type: PictureEditorToolBarPopupComponent, selector: "dxv-picture-editor-toolbar-popup", inputs: ["data"] }, { kind: "component", type: PictureEditorBrushOptionsComponent, selector: "dxv-picture-editing-brush-options", inputs: ["data"] }, { kind: "component", type: PictureEditorSizeOptionsComponent, selector: "dxv-picture-editing-size-options", inputs: ["data"] }, { kind: "component", type: PictureEditorImagespickerComponent, selector: "dxv-picture-editing-imagespicker", inputs: ["data"] }, { kind: "component", type: PictureEditorImagespickerWithFilterComponent, selector: "dxv-picture-editing-imagespickerwithfilter" }, { kind: "component", type: SignatureEditorComponent, selector: "dxv-signature-editor" }, { kind: "component", type: BrickComponent, selector: "dxv-brick", inputs: ["data"] }, { kind: "component", type: BrickClickableComponent, selector: "dxv-brick-clickable", inputs: ["data"] }, { kind: "component", type: ExportToolComponent, selector: "dxv-export-tool", inputs: ["data"] }, { kind: "component", type: EditingFieldCheckboxGlyphComponent, selector: "dxv-editing-field-checkbox-glyph", inputs: ["data"] }, { kind: "component", type: MobileSurfaceComponent, selector: "dxv-mobile-surface", inputs: ["data"] }, { kind: "component", type: MobilePageComponent, selector: "dxv-mobile-page", inputs: ["data"] }, { kind: "component", type: MobileActionsComponent, selector: "dxv-mobile-actions", inputs: ["data"] }, { kind: "component", type: MobileParametersPopupComponent, selector: "dxv-mobile-parameters-popup", inputs: ["data"] }, { kind: "component", type: MobileParametersComponent, selector: "dxv-mobile-parameters", inputs: ["data"] }, { kind: "component", type: MobileParametersDateRangeComponent, selector: "dxv-mobile-parameters-daterange" }, { kind: "component", type: MobileActionsExportComponent, selector: "dxv-mobile-actions-export", inputs: ["data"] }, { kind: "component", type: MobileSearchComponent, selector: "dxv-search-mobile", inputs: ["data"] }, { kind: "component", type: DateRangeMobileComponent, selector: "dxv-date-range-mobile", inputs: ["data"] }, { kind: "component", type: MobilePaginatorComponent, selector: "dxv-pages-mobile", inputs: ["data"] }, { kind: "component", type: BreadcrumbsComponent, selector: "dxv-breadcrumbs", inputs: ["data"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewerTemplatesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dxv-templates', 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>\n\n<ng-template #breadcrumb let-data=\"data\">\n    <dxv-breadcrumbs [data]=\"data\"></dxv-breadcrumbs>\n</ng-template>" }]
+        }], ctorParameters: function () { return [{ type: TemplateEngine }]; }, propDecorators: { toolbar: [{
+                type: ViewChild,
+                args: ['toolbar']
+            }], breadcrumb: [{
+                type: ViewChild,
+                args: ['breadcrumb']
+            }], 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 DxReportViewerBaseComponent {
+    viewModel;
+    requestOptionsComponent;
+    callbacksComponent;
+    mobileModeSettingsComponent;
+    remoteSettingsComponent;
+    tabPanelSettingsComponent;
+    progressBarSettingsComponent;
+    exportSettingsComponent;
+    searchSettingsComponent;
+    constructor(renderer, platformId, viewer, cd, accessibilitySettings) {
+        super(renderer, platformId, viewer, cd, accessibilitySettings);
+    }
+    getKoBinding(options) {
+        return new JSReportViewerBinding(options, this.getEventRaiser(), false);
+    }
+    getCallbacks() {
+        return this.callbacksComponent;
+    }
+    getControlOptions() {
+        const baseOptions = super.getControlOptions();
+        return {
+            ...baseOptions,
+            developmentMode: this.developmentMode,
+            isMobile: this.isMobile,
+            requestOptions: this.requestOptionsComponent,
+            mobileModeSettings: this.mobileModeSettingsComponent,
+            remoteSettings: this.remoteSettingsComponent,
+            tabPanelSettings: this.tabPanelSettingsComponent,
+            progressBarSettings: this.progressBarSettingsComponent,
+            exportSettings: this.exportSettingsComponent,
+            searchSettings: this.searchSettingsComponent
+        };
+    }
+    GetPreviewModel() {
+        return this.bindingSender.GetPreviewModel();
+    }
+    isMobile;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DxReportViewerComponent, deps: [{ token: i0.Renderer2 }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AccessibilitySettings }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DxReportViewerComponent, selector: "dx-report-viewer", inputs: { isMobile: "isMobile" }, providers: [AccessibilitySettings], queries: [{ propertyName: "requestOptionsComponent", first: true, predicate: DxReportViewerRequestOptionsComponent, descendants: true }, { propertyName: "callbacksComponent", first: true, predicate: DxReportViewerCallbacksComponent, descendants: true }, { propertyName: "mobileModeSettingsComponent", first: true, predicate: DxReportViewerMobileModeSettingsComponent, descendants: true }, { propertyName: "remoteSettingsComponent", first: true, predicate: DxReportViewerRemoteSettingsComponent, descendants: true }, { propertyName: "tabPanelSettingsComponent", first: true, predicate: DxReportViewerTabPanelSettingsComponent, descendants: true }, { propertyName: "progressBarSettingsComponent", first: true, predicate: DxReportViewerProgressBarSettingsComponent, descendants: true }, { propertyName: "exportSettingsComponent", first: true, predicate: DxReportViewerExportSettingsComponent, descendants: true }, { propertyName: "searchSettingsComponent", first: true, predicate: DxReportViewerSearchSettingsComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #control [ngClass]=\"cssClass\" [ngStyle]=\"{'width': width, 'height': height }\">\n  <dxa-templates></dxa-templates>\n  <dxv-templates></dxv-templates>\n  <div class=\"dx-designer\">\n      <dxa-template *ngIf=\"!!viewModel\" template=\"dx-designer\" [data]=\"viewModel\"></dxa-template>\n  </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TemplatesComponent, selector: "dxa-templates" }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "component", type: ViewerTemplatesComponent, selector: "dxv-templates" }] });
+}
+__decorate([
+    _inputConverter(_booleanConverter)
+], DxReportViewerComponent.prototype, "isMobile", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DxReportViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dx-report-viewer', providers: [AccessibilitySettings], template: "<div #control [ngClass]=\"cssClass\" [ngStyle]=\"{'width': width, 'height': height }\">\n  <dxa-templates></dxa-templates>\n  <dxv-templates></dxv-templates>\n  <div class=\"dx-designer\">\n      <dxa-template *ngIf=\"!!viewModel\" template=\"dx-designer\" [data]=\"viewModel\"></dxa-template>\n  </div>\n</div>" }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AccessibilitySettings }]; }, propDecorators: { requestOptionsComponent: [{
+                type: ContentChild,
+                args: [DxReportViewerRequestOptionsComponent]
+            }], callbacksComponent: [{
+                type: ContentChild,
+                args: [DxReportViewerCallbacksComponent]
+            }], mobileModeSettingsComponent: [{
+                type: ContentChild,
+                args: [DxReportViewerMobileModeSettingsComponent]
+            }], remoteSettingsComponent: [{
+                type: ContentChild,
+                args: [DxReportViewerRemoteSettingsComponent]
+            }], tabPanelSettingsComponent: [{
+                type: ContentChild,
+                args: [DxReportViewerTabPanelSettingsComponent]
+            }], progressBarSettingsComponent: [{
+                type: ContentChild,
+                args: [DxReportViewerProgressBarSettingsComponent]
+            }], exportSettingsComponent: [{
+                type: ContentChild,
+                args: [DxReportViewerExportSettingsComponent]
+            }], searchSettingsComponent: [{
+                type: ContentChild,
+                args: [DxReportViewerSearchSettingsComponent]
+            }], isMobile: [{
+                type: Input
+            }] } });
+
+class DxReportParametersPanelCallbacksComponent extends DxReportViewerCallbacksBaseComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DxReportParametersPanelCallbacksComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DxReportParametersPanelCallbacksComponent, selector: "dxrpp-callbacks", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DxReportParametersPanelCallbacksComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                    selector: 'dxrpp-callbacks'
+                }]
+        }] });
+
+class DxReportParametersPanelRequestOptionsComponent extends DxRequestOptionsBaseComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DxReportParametersPanelRequestOptionsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DxReportParametersPanelRequestOptionsComponent, selector: "dxrpp-request-options", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DxReportParametersPanelRequestOptionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                    selector: 'dxrpp-request-options'
+                }]
+        }] });
+
+class DxReportParametersPanelComponent extends DxReportViewerBaseComponent {
+    requestOptionsComponent;
+    callbacksComponent;
+    getKoBinding(options) {
+        return new JSReportParametersPanelBinding(options, this.getEventRaiser(), false);
+    }
+    getCallbacks() {
+        return this.callbacksComponent;
+    }
+    getControlOptions() {
+        const baseOptions = super.getControlOptions();
+        return {
+            ...baseOptions,
+            requestOptions: this.requestOptionsComponent
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DxReportParametersPanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DxReportParametersPanelComponent, selector: "dx-report-parameters-panel", providers: [AccessibilitySettings], queries: [{ propertyName: "requestOptionsComponent", first: true, predicate: DxReportParametersPanelRequestOptionsComponent, descendants: true }, { propertyName: "callbacksComponent", first: true, predicate: DxReportParametersPanelCallbacksComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #control [ngClass]=\"cssClass\" [ngStyle]=\"{'width': width, 'height': height }\">\n  <dxa-templates></dxa-templates>\n  <dxv-templates></dxv-templates>\n  <div class=\"dx-designer\">\n      <dxa-template *ngIf=\"!!viewModel\" template=\"dx-designer\" [data]=\"viewModel\"></dxa-template>\n  </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TemplatesComponent, selector: "dxa-templates" }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "component", type: ViewerTemplatesComponent, selector: "dxv-templates" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DxReportParametersPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dx-report-parameters-panel', providers: [AccessibilitySettings], template: "<div #control [ngClass]=\"cssClass\" [ngStyle]=\"{'width': width, 'height': height }\">\n  <dxa-templates></dxa-templates>\n  <dxv-templates></dxv-templates>\n  <div class=\"dx-designer\">\n      <dxa-template *ngIf=\"!!viewModel\" template=\"dx-designer\" [data]=\"viewModel\"></dxa-template>\n  </div>\n</div>" }]
+        }], propDecorators: { requestOptionsComponent: [{
+                type: ContentChild,
+                args: [DxReportParametersPanelRequestOptionsComponent]
+            }], callbacksComponent: [{
+                type: ContentChild,
+                args: [DxReportParametersPanelCallbacksComponent]
+            }] } });
+
+class DxReportViewerModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DxReportViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DxReportViewerModule, declarations: [DxReportViewerComponent,
+            DxReportViewerCallbacksComponent,
+            DxReportViewerMobileModeSettingsComponent,
+            DxReportViewerRemoteSettingsComponent,
+            DxReportViewerRequestOptionsComponent,
+            DxReportViewerProgressBarSettingsComponent,
+            DxReportViewerExportSettingsComponent,
+            DxReportViewerTabPanelSettingsComponent,
+            DxReportViewerSearchSettingsComponent,
+            TabpanelComponent,
+            PopoverComponent,
+            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,
+            EllipsisEditorDirective,
+            ButtonWithTemplateDirective,
+            EditingFieldCheckboxGlyphComponent,
+            DxMutationObserverDirective,
+            MobileSearchBarDirective,
+            MobilePaginatorDirective,
+            LazyTemplateComponent,
+            MobileSurfaceComponent,
+            MobileSlideDirective,
+            MobileZoomDirective,
+            MobileGalleryComponent,
+            MobilePageComponent,
+            MobileActionsComponent,
+            MobileParametersPopupComponent,
+            MobileParametersComponent,
+            MobileParametersDateRangeComponent,
+            MobileActionsExportComponent,
+            MobileSearchComponent,
+            DateRangeMobileComponent,
+            MobileAutofitDirective,
+            MobilePaginatorComponent,
+            KeyDownActionsDirective,
+            BreadcrumbsComponent,
+            DxReportParametersPanelComponent,
+            DxReportParametersPanelCallbacksComponent,
+            DxReportParametersPanelRequestOptionsComponent], 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,
+            DxReportViewerRequestOptionsComponent,
+            DxReportViewerProgressBarSettingsComponent,
+            DxReportViewerExportSettingsComponent,
+            DxReportViewerTabPanelSettingsComponent,
+            DxReportViewerSearchSettingsComponent,
+            DxReportParametersPanelComponent,
+            DxReportParametersPanelCallbacksComponent,
+            DxReportParametersPanelRequestOptionsComponent], id: 'DxReportViewerModule' });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", 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: "16.2.12", ngImport: i0, type: DxReportViewerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    id: 'DxReportViewerModule',
+                    imports: [
+                        CommonModule,
+                        DxButtonModule,
+                        DxLoadIndicatorModule,
+                        DxScrollViewModule,
+                        DxSelectBoxModule,
+                        DxMenuModule,
+                        DxTagBoxModule,
+                        DxTextBoxModule,
+                        DxValidatorModule,
+                        DxDateBoxModule,
+                        DxCheckBoxModule,
+                        DxNumberBoxModule,
+                        DxColorBoxModule,
+                        DxPopupModule,
+                        DxPopoverModule,
+                        DxSliderModule,
+                        DxCalendarModule,
+                        DxListModule,
+                        DxGalleryModule
+                    ],
+                    declarations: [
+                        DxReportViewerComponent,
+                        DxReportViewerCallbacksComponent,
+                        DxReportViewerMobileModeSettingsComponent,
+                        DxReportViewerRemoteSettingsComponent,
+                        DxReportViewerRequestOptionsComponent,
+                        DxReportViewerProgressBarSettingsComponent,
+                        DxReportViewerExportSettingsComponent,
+                        DxReportViewerTabPanelSettingsComponent,
+                        DxReportViewerSearchSettingsComponent,
+                        TabpanelComponent,
+                        PopoverComponent,
+                        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,
+                        EllipsisEditorDirective,
+                        ButtonWithTemplateDirective,
+                        EditingFieldCheckboxGlyphComponent,
+                        DxMutationObserverDirective,
+                        MobileSearchBarDirective,
+                        MobilePaginatorDirective,
+                        LazyTemplateComponent,
+                        MobileSurfaceComponent,
+                        MobileSlideDirective,
+                        MobileZoomDirective,
+                        MobileGalleryComponent,
+                        MobilePageComponent,
+                        MobileActionsComponent,
+                        MobileParametersPopupComponent,
+                        MobileParametersComponent,
+                        MobileParametersDateRangeComponent,
+                        MobileActionsExportComponent,
+                        MobileSearchComponent,
+                        DateRangeMobileComponent,
+                        MobileAutofitDirective,
+                        MobilePaginatorComponent,
+                        KeyDownActionsDirective,
+                        BreadcrumbsComponent,
+                        DxReportParametersPanelComponent,
+                        DxReportParametersPanelCallbacksComponent,
+                        DxReportParametersPanelRequestOptionsComponent
+                    ],
+                    exports: [
+                        DxReportViewerComponent,
+                        DxReportViewerCallbacksComponent,
+                        DxReportViewerMobileModeSettingsComponent,
+                        DxReportViewerRemoteSettingsComponent,
+                        DxReportViewerRequestOptionsComponent,
+                        DxReportViewerProgressBarSettingsComponent,
+                        DxReportViewerExportSettingsComponent,
+                        DxReportViewerTabPanelSettingsComponent,
+                        DxReportViewerSearchSettingsComponent,
+                        DxReportParametersPanelComponent,
+                        DxReportParametersPanelCallbacksComponent,
+                        DxReportParametersPanelRequestOptionsComponent
+                    ],
+                    providers: [TemplateEngine]
+                }]
+        }] });
+
+/*
+ * Public API Surface of reporting-angular/report-viewer
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DxReportParametersPanelCallbacksComponent, DxReportParametersPanelComponent, DxReportParametersPanelRequestOptionsComponent, DxReportViewerCallbacksComponent, DxReportViewerComponent, DxReportViewerExportSettingsComponent, DxReportViewerMobileModeSettingsComponent, DxReportViewerModule, DxReportViewerProgressBarSettingsComponent, DxReportViewerRemoteSettingsComponent, DxReportViewerRequestOptionsComponent, DxReportViewerSearchSettingsComponent, DxReportViewerTabPanelSettingsComponent, TemplateEngine };
+//# sourceMappingURL=devexpress-reporting-angular-dx-report-viewer.mjs.map