devexpress-reporting-angular 24.1.6-build-24236-1429 → 24.2.1-alpha-24260-0214

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

@@ -28,7 +28,7 @@ import { createDateRangeEditor } from 'devexpress-reporting/viewer/widgets/dateR
 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 { initializeLazyImagesBinding, initializeAutoFitBinding, initializeToViewBinding, updatePreviewPageRendererBinding, 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';
@@ -1014,7 +1014,7 @@ class SelectBoxComponent extends EditorDropDownComponentBase {
         };
     }
     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"] }] });
+    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", "onSelectionChanging", "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,
@@ -1039,7 +1039,7 @@ class BoolSelectComponent extends SelectBoxComponent {
         };
     }
     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"] }] });
+    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", "onSelectionChanging", "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,
@@ -1093,7 +1093,7 @@ class LocalizedSelectBoxComponent extends SelectBoxComponent {
         };
     }
     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"] }] });
+    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", "onSelectionChanging", "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,
@@ -1326,7 +1326,7 @@ class PagerComponent {
         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        [displayExpr]=\"data.widget.displayExpr\"\n        [useItemTextAsTitle]=\"true\"\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"] }] });
+    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        [displayExpr]=\"data.widget.displayExpr\"\n        [useItemTextAsTitle]=\"true\"\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", "onSelectionChanging", "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,
@@ -1353,7 +1353,7 @@ class ZoomComponent {
         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"] }] });
+    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", "onSelectionChanging", "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,
@@ -1482,7 +1482,7 @@ class MultiValueComponent extends EditorDropDownComponentBase {
         }));
     }
     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"] }] });
+    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", "onSelectionChanging", "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,
@@ -1732,16 +1732,37 @@ 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"] }] });
+    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.pageLoaded))\" \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 && pageLoaded) } -->\n            <ng-container *ngFor=\"let page of data.pages\">\n                <div *ngIf=\"page.pageLoading || (!page.pageLoading && page.pageLoaded)\" 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>" }]
+            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.pageLoaded))\" \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 && pageLoaded) } -->\n            <ng-container *ngFor=\"let page of data.pages\">\n                <div *ngIf=\"page.pageLoading || (!page.pageLoading && page.pageLoaded)\" 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 PreviewPageRendererDirective extends BaseDisposableDirective {
+    set imageData(newVal) {
+        this.options = newVal;
+        updatePreviewPageRendererBinding(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: PreviewPageRendererDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PreviewPageRendererDirective, selector: "[dxvPreviewPageRenderer]", inputs: { imageData: ["dxvPreviewPageRenderer", "imageData"] }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PreviewPageRendererDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dxvPreviewPageRenderer]'
+                }]
+        }], propDecorators: { imageData: [{
+                type: Input,
+                args: ['dxvPreviewPageRenderer']
+            }] } });
+
 class BrickSelectionDirective extends BaseDisposableDirective {
     set brickSelection(newVal) {
         this.options = newVal;
@@ -1767,11 +1788,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 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"] }] });
+    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 [dxvPreviewPageRenderer]=\"data.imageOptions\">\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: PreviewPageRendererDirective, selector: "[dxvPreviewPageRenderer]", inputs: ["dxvPreviewPageRenderer"] }, { 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>" }]
+            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 [dxvPreviewPageRenderer]=\"data.imageOptions\">\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']
@@ -1817,7 +1838,7 @@ class SearchComponent {
         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"] }] });
+    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", "onSelectionChanging", "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,
@@ -2416,7 +2437,7 @@ class SignatureEditorComponent extends EditorDropDownComponentBase {
     }
     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"] }] });
+    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", "onSelectionChanging", "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,
@@ -2612,11 +2633,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 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"] }] });
+    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    [dxvPreviewPageRenderer]=\"data.imageOptions\">\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    <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: PreviewPageRendererDirective, selector: "[dxvPreviewPageRenderer]", inputs: ["dxvPreviewPageRenderer"] }, { 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>" }]
+            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    [dxvPreviewPageRenderer]=\"data.imageOptions\">\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    <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']
@@ -2755,7 +2776,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 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"] }] });
+    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", "onSelectionChanging", "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,
@@ -2800,11 +2821,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 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\" [dxMutationObserver]=\"data.keyboardHelper\" aria-label=\"Breadcrumbs\" role=\"navigation\">\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 dx-accessibility-border-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 dx-accessibility-border-accented\" aria-current=\"location\">\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"] }, { kind: "directive", type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }] });
+    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=\"dxrd-breadcrumbs-wrapper\" [dxMutationObserver]=\"data.keyboardHelper\" aria-label=\"Breadcrumbs\" role=\"navigation\">\n    <ng-container *ngFor=\"let item of data.listItems; index as i\">\n        <a *ngIf=\"data.listItems.length > (i+1)\" class=\"dxrd-breadcrump-link dxrd-breadcrumb-item dxd-text-accented dx-accessibility-border-accented\"\n            (click)=\"data.onClick(item.position)\">\n            <span>{{item.displayText}}</span>\n        </a>\n        <dxa-template *ngIf=\"data.listItems.length > (i+1)\" class=\"dxrd-breadcrumb-item-seperator\" template=\"dxrd-svg-preview-breadcrumbs_seperator\"></dxa-template>\n        <a *ngIf=\"data.listItems.length === (i+1)\" class=\"dxrd-breadcrumb-item dxd-text-primary dx-accessibility-border-accented\" aria-current=\"location\">\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"] }, { kind: "directive", type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }] });
 }
 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\" [dxMutationObserver]=\"data.keyboardHelper\" aria-label=\"Breadcrumbs\" role=\"navigation\">\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 dx-accessibility-border-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 dx-accessibility-border-accented\" aria-current=\"location\">\n            <span>{{item.displayText}}</span>\n        </a>\n    </ng-container>\n</div>" }]
+            args: [{ selector: 'dxv-breadcrumbs', template: "<div *ngIf=\"data.listItems.length > 1\" class=\"dxrd-breadcrumbs-wrapper\" [dxMutationObserver]=\"data.keyboardHelper\" aria-label=\"Breadcrumbs\" role=\"navigation\">\n    <ng-container *ngFor=\"let item of data.listItems; index as i\">\n        <a *ngIf=\"data.listItems.length > (i+1)\" class=\"dxrd-breadcrump-link dxrd-breadcrumb-item dxd-text-accented dx-accessibility-border-accented\"\n            (click)=\"data.onClick(item.position)\">\n            <span>{{item.displayText}}</span>\n        </a>\n        <dxa-template *ngIf=\"data.listItems.length > (i+1)\" class=\"dxrd-breadcrumb-item-seperator\" template=\"dxrd-svg-preview-breadcrumbs_seperator\"></dxa-template>\n        <a *ngIf=\"data.listItems.length === (i+1)\" class=\"dxrd-breadcrumb-item dxd-text-primary dx-accessibility-border-accented\" aria-current=\"location\">\n            <span>{{item.displayText}}</span>\n        </a>\n    </ng-container>\n</div>" }]
         }], propDecorators: { data: [{
                 type: Input,
                 args: ['data']
@@ -3298,6 +3319,7 @@ class DxReportViewerModule {
             BrickClickableComponent,
             ExportToolComponent,
             AutoFitDirective,
+            PreviewPageRendererDirective,
             ToViewDirective,
             BrickSelectionDirective,
             ResizableDirective,
@@ -3485,6 +3507,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         BrickClickableComponent,
                         ExportToolComponent,
                         AutoFitDirective,
+                        PreviewPageRendererDirective,
                         ToViewDirective,
                         BrickSelectionDirective,
                         ResizableDirective,