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

package/viewer/editing/models/checkEditingField.js

@@ -1,16 +1,21 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\editing\models\checkEditingField.js)
-* Version:  23.1.5
-* Build date: Aug 29, 2023
+* Version:  23.2.1-alpha-23254-1700
+* Build date: Sep 11, 2023
 * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 import { ImageSource } from '../../../common/imageSource';
-import { Disposable } from '@devexpress/analytics-core/analytics-utils';
-import * as ko from 'knockout';
-import * as $ from 'jquery';
-import { SvgTemplatesEngine } from '@devexpress/analytics-core/analytics-widgets-internal';
-import { KeyboardEnum } from '@devexpress/analytics-core/analytics-internal';
+import { SvgTemplatesEngine } from '@devexpress/analytics-core/analytics-widgets-internal-native';
+import { KeyboardEnum } from '@devexpress/analytics-core/analytics-internal-native';
+import { EditingFieldBase } from './editingFieldBase';
+import { createViewModelGenerator, mutable } from '@devexpress/analytics-core/analytics-serializer-native';
 export var GlyphStyle;
 (function (GlyphStyle) {
     GlyphStyle[GlyphStyle["StandardBox1"] = 0] = "StandardBox1";
@@ -44,100 +49,158 @@ export function createCustomGlyphStyleCss(imageSource) {
     return backgroundResult;
 }
 export function getCheckBoxTemplate(style, state, customGlyph) {
-    if (!$.isEmptyObject(customGlyph)) {
+    if (customGlyph && Object.keys(customGlyph).length > 0) {
         return 'dxrd-checkboxcustomglyph';
     }
     else {
         return SvgTemplatesEngine.getExistingTemplate('dxrd-svg-checkboxglyphs-' + style + '_' + state);
     }
 }
-export class CheckEditingFieldViewModel extends Disposable {
-    constructor(field, pageWidth, pageHeight, zoom, editingFieldsProvider) {
-        super();
-        this.focused = ko.observable(false);
+export class CheckEditingFieldViewModel extends EditingFieldBase {
+    constructor(field, pageWidth, pageHeight, page, editingFieldsProvider) {
+        super(page);
         this._editingFieldsProvider = editingFieldsProvider;
         this.template = 'dxrp-editing-field-checkbox';
         this.field = field;
-        this.zoom = zoom;
         var bounds = this.field.model().bounds;
         var checkBounds = this.field.model().brickOptions.checkBoxBounds;
         var rtl = this.field.model().brickOptions.rtlLayout;
-        this.containerStyle = () => {
-            return {
+        this._updateContainerStyle = () => {
+            if (!bounds)
+                return;
+            this.containerStyle = {
                 height: bounds.height + 'px',
                 width: bounds.width + 'px',
                 top: bounds.top * 100 / pageHeight + '%',
                 left: bounds.left * 100 / pageWidth + '%',
-                cursor: this.field.readOnly() ? 'auto' : 'pointer'
+                cursor: this.field.readOnly ? 'auto' : 'pointer'
             };
         };
-        this.checkStyle = () => {
-            var result = {
+        this._updateCheckStyle = () => {
+            if (!checkBounds)
+                return;
+            this.checkStyle = {
                 height: checkBounds.height + 'px',
                 width: checkBounds.width + 'px',
                 top: checkBounds.top + 'px',
                 left: (rtl ? (bounds.width - checkBounds.left - checkBounds.width) : checkBounds.left) + 'px'
             };
-            return result;
         };
-        this._disposables.push(this.customGlyphStyleCss = ko.pureComputed(() => {
-            var imageSourceData = field.model().brickOptions.checkBoxGlyphOptions.customGlyphs.filter(item => item.key === this.field.editValue())[0];
-            if (!imageSourceData.value)
-                return {};
+        this._updateCustomGlyphStyleCss = () => {
+            const checkBoxGlyphOptions = field.model().brickOptions.checkBoxGlyphOptions;
+            if (!checkBoxGlyphOptions)
+                return;
+            var imageSourceData = checkBoxGlyphOptions.customGlyphs.filter(item => item.key === this.field.getEditValue())[0];
+            if (!imageSourceData.value) {
+                this.customGlyphStyleCss = {};
+                return;
+            }
             var imageSource = new ImageSource(imageSourceData.value.imageType, imageSourceData.value.image);
-            return createCustomGlyphStyleCss(imageSource);
-        }));
-        this._disposables.push(this.checkStateStyleIcon = ko.pureComputed(() => {
-            return getCheckBoxTemplate(GlyphStyle[field.model().brickOptions.checkBoxGlyphOptions.glyphStyle], CheckState[this.field.editValue()], this.customGlyphStyleCss());
+            this.customGlyphStyleCss = createCustomGlyphStyleCss(imageSource);
+        };
+        this._updateCheckStateStyleIcon = () => {
+            const checkBoxGlyphOptions = field.model().brickOptions.checkBoxGlyphOptions;
+            if (!checkBoxGlyphOptions)
+                return;
+            this.checkStateStyleIcon = getCheckBoxTemplate(GlyphStyle[checkBoxGlyphOptions.glyphStyle], CheckState[this.field.getEditValue()], this.customGlyphStyleCss);
+        };
+        this.addDisposable(this.field.events.on('editValueChanged', (args) => {
+            this._updateCustomGlyphStyleCss();
+            this._updateCheckStateStyleIcon();
+            this._updateCheckedState();
+        }), this.field.events.on('readOnlyChanged', (args) => {
+            this._updateContainerStyle();
         }));
+        this._updateCheckStyle();
+        this._updateContainerStyle();
+        this._updateCheckedState();
+        this._updateCustomGlyphStyleCss();
     }
     _toggleCheckState() {
-        if (this.field.editValue() === CheckState.Checked) {
-            this.field.editValue(CheckState.Unchecked);
+        if (this.field.getEditValue() === CheckState.Checked) {
+            this.field.setEditValue(CheckState.Unchecked);
         }
         else {
-            this.field.editValue(CheckState.Checked);
+            this.field.setEditValue(CheckState.Checked);
         }
     }
-    onKeyDown(_, e) {
-        if (e.key == KeyboardEnum.Space) {
+    onPropertyChanged(args) {
+        super.onPropertyChanged(args);
+        if (args.propertyName === 'customGlyphStyleCss')
+            this._updateCheckStateStyleIcon();
+    }
+    updateViewModel(args) {
+        super.updateViewModel(args);
+        const viewModel = this.getViewModel();
+        if (args.propertyName === 'customGlyphStyleCss')
+            viewModel.customGlyphStyleCss = this.customGlyphStyleCss;
+        if (args.propertyName === 'checkStateStyleIcon')
+            viewModel.checkStateStyleIcon = this.checkStateStyleIcon;
+        if (args.propertyName === 'checked')
+            viewModel.checked = this.checked;
+    }
+    createViewModel() {
+        return createViewModelGenerator(super.createViewModel())
+            .generateProperty('checkStateStyleIcon', this.checkStateStyleIcon)
+            .generateProperty('customGlyphStyleCss', this.customGlyphStyleCss)
+            .generateProperty('checked', this.checked)
+            .generateProperty('checkStyle', this.checkStyle)
+            .generateProperty('onKeyDown', (event) => this.onKeyDown(event))
+            .generateProperty('onFocus', () => this.onFocus())
+            .generateProperty('onBlur', () => this.onBlur())
+            .getViewModel();
+    }
+    onKeyDown(event) {
+        if (event.key == KeyboardEnum.Space) {
             this.toggleCheckState();
         }
         else {
         }
     }
     onBlur() {
-        this.focused(false);
+        this.focused = false;
     }
     onFocus() {
-        this.focused(true);
+        this.focused = true;
     }
-    onClick(_, e) {
-        e.target.focus();
+    onClick(model, event) {
+        event.target.focus();
         this.toggleCheckState();
-        e.stopPropagation();
+        event.stopPropagation();
     }
-    checked() {
-        if (this.field.editValue() === CheckState.Checked) {
-            return true;
+    _updateCheckedState() {
+        if (this.field.getEditValue() === CheckState.Checked) {
+            this.checked = true;
         }
-        if (this.field.editValue() === CheckState.Unchecked) {
-            return false;
+        if (this.field.getEditValue() === CheckState.Unchecked) {
+            this.checked = false;
         }
     }
     toggleCheckState() {
-        if (this.field.readOnly())
+        if (this.field.readOnly)
             return;
         if (!this.field.groupID()) {
             this._toggleCheckState();
         }
-        else if (this.checked() === false) {
+        else if (this.checked === false) {
             this._editingFieldsProvider().forEach(value => {
                 if (value.groupID() === this.field.groupID()) {
-                    value.editValue(CheckState.Unchecked);
+                    value.setEditValue(CheckState.Unchecked);
                 }
             });
             this._toggleCheckState();
         }
     }
 }
+__decorate([
+    mutable(null)
+], CheckEditingFieldViewModel.prototype, "checkStateStyleIcon", void 0);
+__decorate([
+    mutable(null)
+], CheckEditingFieldViewModel.prototype, "customGlyphStyleCss", void 0);
+__decorate([
+    mutable(false)
+], CheckEditingFieldViewModel.prototype, "focused", void 0);
+__decorate([
+    mutable(false)
+], CheckEditingFieldViewModel.prototype, "checked", void 0);

package/viewer/editing/models/editingFieldBase.d.ts

@@ -0,0 +1,42 @@
+/**
+* DevExpress HTML/JS Reporting (viewer\editing\models\editingFieldBase.d.ts)
+* Version:  23.2.1-alpha-23254-1700
+* Build date: Sep 11, 2023
+* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
+* License: https://www.devexpress.com/Support/EULAs/universal.xml
+*/
+import { EditingField, IEditValueContainerViewModel } from '../editingField';
+import { PreviewPage } from '../../internal/_page';
+import { ArrayPropertyChangedEventArgs, BaseRenderingModel, IViewModel, PropertyChangedEventArgs } from '@devexpress/analytics-core/analytics-serializer-native';
+export interface IEditingFieldViewModelBase extends IViewModel {
+    zoom: number;
+    active: boolean;
+    template: string;
+    field: IEditValueContainerViewModel;
+    activateEditor: (viewModel: IEditingFieldViewModelBase, event: Event) => void;
+    canActivateEditor: boolean;
+    onClick: (model: IEditingFieldViewModelBase, event: Event) => void;
+    containerStyle: {
+        [key: string]: string;
+    };
+}
+export declare class EditingFieldBase<T extends IEditingFieldViewModelBase = IEditingFieldViewModelBase> extends BaseRenderingModel<T> {
+    protected _updateContainerStyle: () => void;
+    constructor(page: PreviewPage);
+    createViewModel(): T;
+    updateViewModel(args: PropertyChangedEventArgs<EditingFieldBase> | ArrayPropertyChangedEventArgs<EditingFieldBase>): void;
+    onPropertyChanged(args: PropertyChangedEventArgs<EditingFieldBase> | ArrayPropertyChangedEventArgs<EditingFieldBase>): void;
+    canActivateEditor: boolean;
+    activateEditor(model: EditingFieldBase, event: {
+        target: EventTarget;
+        currentTarget: EventTarget;
+    }): void;
+    onClick(model: EditingFieldBase, event: Event): void;
+    template: string;
+    field: EditingField;
+    containerStyle: {
+        [key: string]: string;
+    };
+    zoom: number;
+    active: boolean;
+}

package/viewer/editing/models/editingFieldBase.js

@@ -0,0 +1,57 @@
+/**
+* DevExpress HTML/JS Reporting (viewer\editing\models\editingFieldBase.js)
+* Version:  23.2.1-alpha-23254-1700
+* Build date: Sep 11, 2023
+* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
+* License: https://www.devexpress.com/Support/EULAs/universal.xml
+*/
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { BaseRenderingModel, createViewModelGenerator, mutable } from '@devexpress/analytics-core/analytics-serializer-native';
+export class EditingFieldBase extends BaseRenderingModel {
+    constructor(page) {
+        super();
+        this.canActivateEditor = false;
+        this.zoom = page.zoom;
+        this.addDisposable(page.events.on('zoomChanged', (args) => {
+            this.zoom = page.zoom;
+        }));
+    }
+    createViewModel() {
+        return createViewModelGenerator(super.createViewModel())
+            .generateProperty('zoom', this.zoom)
+            .generateProperty('template', this.template)
+            .generateProperty('field', this.field.getViewModel())
+            .generateProperty('canActivateEditor', this.canActivateEditor)
+            .generateProperty('activateEditor', (viewModel, event) => this.activateEditor(viewModel.getModel(), event))
+            .generateProperty('onClick', (viewModel, event) => this.onClick(viewModel.getModel(), event))
+            .generateProperty('containerStyle', this.containerStyle)
+            .generateProperty('active', this.active)
+            .getViewModel();
+    }
+    updateViewModel(args) {
+        const viewModel = this.getViewModel();
+        if (args.propertyName === 'zoom')
+            viewModel.zoom = this.zoom;
+        if (args.propertyName === 'active')
+            viewModel.active = this.active;
+        if (args.propertyName === 'containerStyle')
+            viewModel.containerStyle = this.containerStyle;
+    }
+    onPropertyChanged(args) { }
+    activateEditor(model, event) { }
+    onClick(model, event) { }
+}
+__decorate([
+    mutable(null)
+], EditingFieldBase.prototype, "containerStyle", void 0);
+__decorate([
+    mutable(1)
+], EditingFieldBase.prototype, "zoom", void 0);
+__decorate([
+    mutable(false)
+], EditingFieldBase.prototype, "active", void 0);

package/viewer/editing/models/imageEditingField.d.ts

@@ -1,35 +1,34 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\editing\models\imageEditingField.d.ts)
-* Version:  23.1.5
-* Build date: Aug 29, 2023
+* Version:  23.2.1-alpha-23254-1700
+* Build date: Sep 11, 2023
 * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */
-import { Disposable } from '@devexpress/analytics-core/analytics-utils';
-import * as ko from 'knockout';
+import { PropertyChangedEventArgs, ArrayPropertyChangedEventArgs } from '@devexpress/analytics-core/analytics-serializer-native';
+import { PreviewPage } from '../../internal/_page';
 import { PictureEditMode } from '../../widgets/pictureEditor/pictureEditMode';
-import { IPictureEditorCallbacks, IPictureEditorOptions, IPictureEditorPopupTargetOptions, PictureEditorModel } from '../../widgets/pictureEditor/_pictureEditorModel';
-import { EditingField, IBounds, IEditingFieldViewModel, ImageAlignment, ImageSizeMode } from '../editingField';
-export declare class ImageEditingFieldViewModel extends Disposable implements IEditingFieldViewModel {
-    field: EditingField;
-    zoom: ko.Observable<number> | ko.Computed<number>;
+import { IImageEditValue, IPictureEditorCallbacks, IPictureEditorFieldModel, IPictureEditorPopupTargetOptions, PictureEditorModel } from '../../widgets/pictureEditor/_pictureEditorModel';
+import { EditingField, IBounds, IEditingFieldModel, ImageAlignment, ImageSizeMode } from '../editingField';
+import { EditingFieldBase, IEditingFieldViewModelBase } from './editingFieldBase';
+export declare class ImageEditingFieldViewModel<T extends IEditingFieldViewModelBase = IEditingFieldViewModelBase> extends EditingFieldBase<T> implements IEditingFieldModel, IPictureEditorFieldModel {
+    field: EditingField<IImageEditValue>;
     protected bounds: IBounds;
     static __DefaultImageType: string;
     protected popupTarget: string;
-    constructor(field: EditingField, pageWidth: number, pageHeight: number, zoom: ko.Observable<number> | ko.Computed<number>, bounds: IBounds);
-    getImage(): any;
-    getImageType(): any;
-    getPictureEditorOptions(): IPictureEditorOptions;
-    alignment: ko.Computed<ImageAlignment>;
-    sizeMode: ko.Computed<ImageSizeMode>;
+    protected _onZoomChanged: (newZoom: number) => void;
+    constructor(field: EditingField<IImageEditValue>, pageWidth: number, pageHeight: number, page: PreviewPage, bounds: IBounds);
+    onPropertyChanged(args: PropertyChangedEventArgs<ImageEditingFieldViewModel> | ArrayPropertyChangedEventArgs<ImageEditingFieldViewModel>): void;
+    getImage(): string;
+    getImageType(): string;
+    alignment: ImageAlignment;
+    sizeMode: ImageSizeMode;
     editMode: PictureEditMode;
     popupOptions: IPictureEditorPopupTargetOptions;
     template: string;
-    active: ko.Observable<boolean>;
-    shadingEnabled: ko.Observable<boolean>;
-    containerStyle: () => {};
+    shadingEnabled: boolean;
     callbacks: IPictureEditorCallbacks;
-    onKeyDown(_: any, e: any): void;
+    onKeyDown(event: KeyboardEvent): void;
     onFocusIn(s: PictureEditorModel): void;
     onDraw(s: PictureEditorModel): void;
     onBlur(s: PictureEditorModel): void;

package/viewer/editing/models/imageEditingField.js

@@ -1,23 +1,27 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\editing\models\imageEditingField.js)
-* Version:  23.1.5
-* Build date: Aug 29, 2023
+* Version:  23.2.1-alpha-23254-1700
+* Build date: Sep 11, 2023
 * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */
-import { CssCalculator, KeyboardEnum } from '@devexpress/analytics-core/analytics-internal';
-import { Disposable, ModelSerializer } from '@devexpress/analytics-core/analytics-utils';
-import * as $ from 'jquery';
-import * as ko from 'knockout';
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { CssCalculator, extend, KeyboardEnum } from '@devexpress/analytics-core/analytics-internal-native';
+import { mutable, currentModelSerializer } from '@devexpress/analytics-core/analytics-serializer-native';
 import { brickStyleSerializationsInfo } from '../../../common/metadata';
 import { EditingFieldExtensions } from '../../../common/utils/editingFieldExtensions';
 import { PreviewSelection } from '../../internal/_previewSelection';
-export class ImageEditingFieldViewModel extends Disposable {
-    constructor(field, pageWidth, pageHeight, zoom, bounds) {
+import { EditingFieldBase } from './editingFieldBase';
+export class ImageEditingFieldViewModel extends EditingFieldBase {
+    constructor(field, pageWidth, pageHeight, page, bounds) {
         var _a;
-        super();
+        super(page);
         this.field = field;
-        this.zoom = zoom;
         this.bounds = bounds;
         this.popupTarget = '.dx-designer';
         this.popupOptions = {
@@ -26,58 +30,52 @@ export class ImageEditingFieldViewModel extends Disposable {
             container: this.popupTarget
         };
         this.template = 'dxrp-editing-field-image';
-        this.active = ko.observable(false);
-        this.shadingEnabled = ko.observable(true);
+        this.shadingEnabled = true;
         var brickStyle = field.model().brickOptions;
         var style = { rtl: () => brickStyle.rtl };
-        new ModelSerializer().deserialize(style, JSON.parse(brickStyle.style), brickStyleSerializationsInfo);
-        var cssCalculator = new CssCalculator(style, ko.observable(!!brickStyle.rtlLayout));
-        this._disposables.push(this.alignment = ko.computed(() => {
-            return field.editValue().alignment;
-        }), this.sizeMode = ko.computed(() => {
-            return field.editValue().sizeMode;
+        currentModelSerializer().deserialize(style, JSON.parse(brickStyle.style), brickStyleSerializationsInfo);
+        var cssCalculator = new CssCalculator(style, !!brickStyle.rtlLayout);
+        this.addDisposable(this.field.events.on('editValueChanged', (args) => {
+            this.alignment = this.field.getEditValue().alignment;
+            this.sizeMode = this.field.getEditValue().sizeMode;
         }));
+        this.alignment = this.field.getEditValue().alignment;
+        this.sizeMode = this.field.getEditValue().sizeMode;
         var editor = EditingFieldExtensions.instance().editor(field.editorName()) || EditingFieldExtensions.instance().editor('ImageAndSignature');
         var options = editor.options;
-        this.shadingEnabled(!!((_a = options.registrationOptions) === null || _a === void 0 ? void 0 : _a.shadingEnabled));
+        this.shadingEnabled = !!((_a = options.registrationOptions) === null || _a === void 0 ? void 0 : _a.shadingEnabled);
         this.editMode = options.editMode;
-        this.containerStyle = () => {
-            return $.extend({
-                height: this.bounds.height * zoom() + 'px',
-                width: this.bounds.width * zoom() + 'px',
-                zIndex: this.active() ? 10 : 0,
+        this._updateContainerStyle = () => {
+            if (!this.bounds)
+                return;
+            this.containerStyle = extend({
+                height: this.bounds.height * this.zoom + 'px',
+                width: this.bounds.width * this.zoom + 'px',
+                zIndex: this.active ? 10 : 0,
                 top: this.bounds.top * 100 / pageHeight + '%',
                 left: this.bounds.left * 100 / pageWidth + '%'
             }, cssCalculator.borderCss(), cssCalculator.paddingsCss());
         };
-        this.callbacks = $.extend({
+        this._updateContainerStyle();
+        this.callbacks = extend({
             onDraw: (s) => this.onDraw(s),
             onFocusIn: (s) => this.onFocusIn(s),
             onFocusOut: (s) => this.onBlur(s)
         }, options.callbacks);
     }
+    onPropertyChanged(args) {
+        super.onPropertyChanged(args);
+        if (args.propertyName === 'zoom' || args.propertyName === 'active')
+            this._updateContainerStyle && this._updateContainerStyle();
+    }
     getImage() {
-        return this.field.editValue().image;
+        return this.field.getEditValue().image;
     }
     getImageType() {
-        return this.field.editValue().imageType;
-    }
-    getPictureEditorOptions() {
-        return {
-            image: this.getImage(),
-            imageType: this.getImageType(),
-            imageMode: ko.observable(this.editMode),
-            alignment: this.alignment,
-            sizeMode: this.sizeMode,
-            callbacks: this.callbacks,
-            active: this.active,
-            zoom: this.zoom,
-            popupOptions: this.popupOptions,
-            shadingEnabled: this.shadingEnabled
-        };
+        return this.field.getEditValue().imageType;
     }
-    onKeyDown(_, e) {
-        if (e.key == KeyboardEnum.Space) {
+    onKeyDown(event) {
+        if (event.key == KeyboardEnum.Space) {
         }
         else {
         }
@@ -90,19 +88,25 @@ export class ImageEditingFieldViewModel extends Disposable {
     }
     onBlur(s) {
         var options = s.getCurrentOptions();
-        var result = $.extend({}, this.field.editValue(), options);
+        var result = extend({}, this.field.getEditValue(), options);
         if (!!result.imageType) {
             result.imageType = result.imageType === 'svg' ? 'svg' : ImageEditingFieldViewModel.__DefaultImageType;
         }
-        var currentVal = this.field.editValue();
+        var currentVal = this.field.getEditValue();
         var isNotEqual = Object.keys(currentVal).some(x => {
             if (!result[x] && !currentVal[x])
                 return false;
             return result[x] !== currentVal[x];
         });
         if (isNotEqual)
-            this.field.editValue(result);
+            this.field.setEditValue(result);
         PreviewSelection.disabled = false;
     }
 }
 ImageEditingFieldViewModel.__DefaultImageType = 'img';
+__decorate([
+    mutable(null)
+], ImageEditingFieldViewModel.prototype, "alignment", void 0);
+__decorate([
+    mutable(null)
+], ImageEditingFieldViewModel.prototype, "sizeMode", void 0);

package/viewer/editing/models/popupImageEditingField.d.ts

@@ -1,22 +1,25 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\editing\models\popupImageEditingField.d.ts)
-* Version:  23.1.5
-* Build date: Aug 29, 2023
+* Version:  23.2.1-alpha-23254-1700
+* Build date: Sep 11, 2023
 * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */
-import { IPopupComponent } from '@devexpress/analytics-core/analytics-widgets-internal';
-import * as ko from 'knockout';
-import { IPainterOptions } from '../../widgets/pictureEditor/_painter';
-import { IEditingFieldViewModel } from '../editingField';
+import { getParentContainer } from '@devexpress/analytics-core/analytics-internal-native';
+import { ArrayPropertyChangedEventArgs, PropertyChangedEventArgs } from '@devexpress/analytics-core/analytics-serializer-native';
+import { ContentReadyEvent } from 'devextreme/ui/popup';
+import { IPainterOptions, Painter } from '../../widgets/pictureEditor/_painter';
+import { IPictureEditorFieldModel, PictureEditorModel } from '../../widgets/pictureEditor/_pictureEditorModel';
+import { IEditingFieldModel } from '../editingField';
 import { ImageEditingFieldViewModel } from './imageEditingField';
+import { IEditingFieldViewModelBase } from './editingFieldBase';
 export interface IImageEditingFieldPopupData {
     contentData: PopupImageEditingFieldViewModel;
     paintData: IPainterOptions;
     contentTemplate: string;
-    isVisible: (element: HTMLElement) => boolean;
-    getPositionTarget: (element: HTMLElement) => JQuery;
-    showContent: ko.Observable<boolean>;
+    visible: boolean;
+    getPositionTarget: (element: HTMLElement) => HTMLElement;
+    showContent: boolean;
     onShown: (e: {
         element: any;
         component: any;
@@ -25,27 +28,34 @@ export interface IImageEditingFieldPopupData {
         element: any;
         component: any;
     }) => void;
-    onContentReady: (e: {
-        element: any;
-        component: IPopupComponent;
-    }) => void;
-    renderedHandler: (element: HTMLElement, model: any) => void;
-    shading: ko.Observable<boolean>;
+    onContentReady: (event: ContentReadyEvent) => void;
+    renderedHandler: () => void;
+    shading: boolean;
+    getPopupContainer: typeof getParentContainer;
 }
-export declare class PopupImageEditingFieldViewModel extends ImageEditingFieldViewModel implements IEditingFieldViewModel {
+export interface IPopupImageEditingFieldViewModel extends IEditingFieldViewModelBase {
+    popupData: IImageEditingFieldPopupData;
     parentPopupClass: string;
+    getPainterOptions: () => IPainterOptions;
+}
+export declare class PopupImageEditingFieldViewModel extends ImageEditingFieldViewModel<IPopupImageEditingFieldViewModel> implements IEditingFieldModel, IPictureEditorFieldModel {
+    private _parentPopupClass;
     private _popupInitializedClass;
     private _getPopupContainer;
-    private _getPainterModel;
-    private _getPictureEditorModel;
     private _resetPictureEditor;
     private _resetPainter;
-    isPopupActive(element: any): any;
-    getPainter(): IPainterOptions;
-    getPopupData(): IImageEditingFieldPopupData;
-    activateEditor(viewModel: any, e: any): void;
+    private _getPainterOptions;
+    createViewModel(): IPopupImageEditingFieldViewModel;
+    _renderedHandler(): void;
+    _setPictureEditor(editor: PictureEditorModel): void;
+    updateViewModel(args: PropertyChangedEventArgs<PopupImageEditingFieldViewModel> | ArrayPropertyChangedEventArgs<PopupImageEditingFieldViewModel>): void;
+    canActivateEditor: boolean;
+    activateEditor(viewModel: PopupImageEditingFieldViewModel, e: MouseEvent): void;
+    _showContent: boolean;
     popupData: IImageEditingFieldPopupData;
     painterData: IPainterOptions;
+    painter: Painter;
+    pictureEditor: PictureEditorModel;
     template: string;
 }
 export declare var DefaultImageEditingFieldViewModel: typeof PopupImageEditingFieldViewModel;