devexpress-reporting 24.2.16 → 24.2.17

package/dist/js/dx-reportdesigner.js

@@ -1,7 +1,7 @@
 /**
 * DevExpress HTML/JS Reporting (dist\js\dx-reportdesigner.js)
-* Version:  24.2.16
-* Build date: Sep 16, 2026
+* Version:  24.2.17
+* Build date: Oct 17, 2026
 * Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */
@@ -1195,6 +1195,7 @@ __webpack_require__.d(reporting_designer_internal_namespaceObject, {
   LocalizationItem: () => (LocalizationItem),
   LocalizedProperty: () => (LocalizedProperty),
   LocaliziblePropertiesAccessibilityProvider: () => (LocaliziblePropertiesAccessibilityProvider),
+  MarkupTextRenderer: () => (MarkupTextRenderer),
   MasterDetailFieldInfo: () => (MasterDetailFieldInfo),
   MasterDetailInfoBase: () => (MasterDetailInfoBase),
   MasterDetailQueryInfo: () => (MasterDetailQueryInfo),
@@ -1335,13 +1336,6 @@ __webpack_require__.d(reporting_designer_internal_namespaceObject, {
   valuesArrayAsEnumWithLocalizationId: () => (valuesArrayAsEnumWithLocalizationId)
 });
 
-// NAMESPACE OBJECT: ./node_modules/devexpress-reporting/scopes/reporting-designer-internal-htmlMarkUp.js
-var reporting_designer_internal_htmlMarkUp_namespaceObject = {};
-__webpack_require__.r(reporting_designer_internal_htmlMarkUp_namespaceObject);
-__webpack_require__.d(reporting_designer_internal_htmlMarkUp_namespaceObject, {
-  ValueConverter: () => (ValueConverter)
-});
-
 // NAMESPACE OBJECT: ./node_modules/devexpress-reporting/scopes/reporting-designer-localization.js
 var reporting_designer_localization_namespaceObject = {};
 __webpack_require__.r(reporting_designer_localization_namespaceObject);
@@ -8498,6 +8492,9 @@ class WatermarkModel extends external_DevExpress_Analytics_Elements_namespaceObj
 
 
 class ReportRenderingService {
+    static getMarkupTextImages(request, handlerUri = settings_HandlerUri()) {
+        return (0,external_DevExpress_Analytics_Internal_namespaceObject.sendRequest)(handlerUri, 'renderMarkupText', (0,external_DevExpress_Analytics_Utils_namespaceObject.PrepareRequestArgs)(request), undefined, () => true);
+    }
     static getChartImage(surface) {
         return ChartRequests.getChartImage(settings_HandlerUri(), new external_DevExpress_Analytics_Utils_namespaceObject.ModelSerializer().serialize(surface._control['chart'], chartSerializationsInfo), surface.contentWidthWithoutZoom(), surface.contentHeightWithoutZoom());
     }
@@ -10508,6 +10505,284 @@ VerticalBandSurface._unitProperties = {
     widthFromControls: (o) => { return o.widthFromControls; }
 };
 
+;// ./node_modules/devexpress-reporting/designer/internal/_markupTextRendering.js
+
+
+
+
+
+const maxSvgLength = 1024 * 1024;
+const maxTextLength = 10000;
+const maxDimension = 4000;
+const maxBatchItems = 100;
+const maxBatchRequestLength = 3 * 1024 * 1024;
+const maxCacheEntries = 500;
+const maxCacheLength = 8 * 1024 * 1024;
+const svgCache = new Map();
+const pending = new Map();
+const batchQueue = [];
+let cacheLength = 0;
+let activeBatches = 0;
+let batchTimeout;
+function requestLength(value) {
+    if (external_DevExpress_Analytics_Utils_namespaceObject.requestManager.getRequestContentType() === external_DevExpress_Analytics_Utils_namespaceObject.RequestContentType.Json)
+        return utf8Length(JSON.stringify(value));
+    const encoded = encodeURIComponent((0,external_DevExpress_Analytics_Utils_namespaceObject.encodeURIExtended)(value));
+    return encoded.length + 2 * (encoded.match(/[!'~]/g)?.length || 0);
+}
+function utf8Length(value) {
+    return encodeURIComponent(value).replace(/%[0-9A-F]{2}/g, '_').length;
+}
+function validResult(result) {
+    return !result?.error
+        && typeof result?.svg === 'string'
+        && result.svg.length <= maxSvgLength
+        && result.svg.length % 4 === 0
+        && /^[A-Za-z0-9+/]+={0,2}$/.test(result.svg)
+        && (result.plainText === undefined || result.plainText === null || typeof result.plainText === 'string');
+}
+function cacheSize(key, result) {
+    return key.length + (result.svg?.length || 0) + (result.plainText?.length || 0);
+}
+function removeCachedResult(key) {
+    const result = svgCache.get(key);
+    if (result) {
+        cacheLength -= cacheSize(key, result);
+        svgCache.delete(key);
+    }
+}
+function takeCachedResult(key) {
+    const cached = svgCache.get(key);
+    if (cached) {
+        svgCache.delete(key);
+        svgCache.set(key, cached);
+    }
+    return cached;
+}
+function resolve(entry, result) {
+    pending.delete(entry.key);
+    const valid = validResult(result) ? result : undefined;
+    if (valid) {
+        svgCache.set(entry.key, valid);
+        cacheLength += cacheSize(entry.key, valid);
+        while (svgCache.size > maxCacheEntries || cacheLength > maxCacheLength)
+            removeCachedResult(svgCache.keys().next().value);
+    }
+    entry.listeners.forEach(listener => listener(valid));
+    entry.listeners.clear();
+}
+function scheduleBatch(delay) {
+    if (batchTimeout === undefined && batchQueue.length)
+        batchTimeout = setTimeout(flushBatch, delay);
+}
+function sendBatch(batch) {
+    activeBatches++;
+    batch.forEach(entry => entry.sent = true);
+    const complete = (response) => {
+        activeBatches--;
+        batch.forEach((entry, index) => {
+            const result = response?.items?.[index];
+            if (result?.error === 'batchLimit' && batch.length > 1 && entry.listeners.size) {
+                entry.batchSize = Math.ceil(batch.length / 2);
+                entry.sent = false;
+                batchQueue.push(entry);
+            }
+            else {
+                resolve(entry, result);
+            }
+        });
+        scheduleBatch(0);
+    };
+    const request = ReportRenderingService.getMarkupTextImages({
+        items: batch.map(entry => entry.item)
+    }, batch[0].uri);
+    request
+        .done(complete)
+        .fail(() => complete());
+}
+function flushBatch() {
+    batchTimeout = undefined;
+    while (batchQueue.length && activeBatches < 2) {
+        const first = batchQueue.shift();
+        const batch = [first];
+        let batchSize = first.batchSize;
+        let batchLength = first.itemLength;
+        for (let i = 0; i < batchQueue.length && batch.length < batchSize;) {
+            const entry = batchQueue[i];
+            if (entry.uri === first.uri && batch.length < entry.batchSize && batchLength + entry.itemLength <= maxBatchRequestLength) {
+                batch.push(batchQueue.splice(i, 1)[0]);
+                batchLength += entry.itemLength;
+                batchSize = Math.min(batchSize, entry.batchSize);
+            }
+            else {
+                i++;
+            }
+        }
+        sendBatch(batch);
+    }
+}
+function enqueue(key, uri, item, listener) {
+    const cached = takeCachedResult(key);
+    if (cached) {
+        listener(cached);
+        return () => { };
+    }
+    let entry = pending.get(key);
+    if (!entry) {
+        entry = { key, uri, item, itemLength: requestLength(JSON.stringify(item)), listeners: new Set(), sent: false, batchSize: maxBatchItems };
+        pending.set(key, entry);
+        batchQueue.push(entry);
+        scheduleBatch(50);
+    }
+    entry.listeners.add(listener);
+    return () => {
+        entry.listeners.delete(listener);
+        if (!entry.sent && !entry.listeners.size) {
+            pending.delete(entry.key);
+            const index = batchQueue.indexOf(entry);
+            if (index !== -1)
+                batchQueue.splice(index, 1);
+        }
+    };
+}
+class MarkupTextRenderer extends external_DevExpress_Analytics_Utils_namespaceObject.Disposable {
+    constructor(surface) {
+        super();
+        this.surface = surface;
+        this.imageSrc = external_ko_namespaceObject.observable('');
+        this.isLoading = external_ko_namespaceObject.observable(false);
+        this.error = external_ko_namespaceObject.observable(false);
+        this.multiline = external_ko_namespaceObject.observable(false);
+        this.fallbackText = external_ko_namespaceObject.observable('');
+        this.altText = external_ko_namespaceObject.observable('');
+        this.imageWidth = external_ko_namespaceObject.observable(0);
+        this.imageHeight = external_ko_namespaceObject.observable(0);
+        this.onImageError = (_data, event) => {
+            if (event.target instanceof HTMLImageElement && event.target.getAttribute('src') === this.imageSrc()) {
+                const cached = svgCache.get(this.imageCacheKey);
+                if (cached && this.imageSrc() === 'data:image/svg+xml;base64,' + cached.svg)
+                    removeCachedResult(this.imageCacheKey);
+                if (this.lastRequestKey === this.imageCacheKey)
+                    this.lastRequestKey = undefined;
+                this.imageCacheKey = undefined;
+                this.imageSrc('');
+                this.error(true);
+            }
+        };
+        this._disposables.push(this.imageCss = external_ko_namespaceObject.pureComputed(() => surface.cssCalculator.angle()));
+        this._disposables.push(this.enabled = external_ko_namespaceObject.pureComputed(() => {
+            const parameters = surface.displayNameParameters();
+            return !!parameters.allowMarkupText && !parameters.isExpression && !parameters.dataMember;
+        }));
+        this.addDisposable(() => {
+            this.lastRenderDeferred?.reject();
+            this.lastRenderDeferred = undefined;
+        });
+        this._disposables.push(external_ko_namespaceObject.computed(() => {
+            const state = this.readState();
+            external_ko_namespaceObject.ignoreDependencies(() => this.applyState(state));
+        }));
+    }
+    readState() {
+        if (!this.enabled())
+            return { enabled: false };
+        const control = this.surface.getControlModel();
+        const multiline = control.controlType === 'XRCrossTabCell' || external_ko_namespaceObject.unwrap(control.multiline) === true;
+        const text = this.surface.displayNameParameters().text || '';
+        if (!text)
+            return { enabled: true, multiline, text };
+        const size = this.surface.markupContentSize();
+        const uri = settings_HandlerUri();
+        if (!uri || text.length > maxTextLength || !Number.isFinite(size.width) || !Number.isFinite(size.height)
+            || size.width <= 0 || size.height <= 0 || size.width > maxDimension || size.height > maxDimension)
+            return { enabled: true, multiline, text, request: null };
+        const item = {
+            text,
+            font: external_ko_namespaceObject.unwrap(control.font) || '',
+            foreColor: (0,external_DevExpress_Analytics_Utils_namespaceObject.colorToString)(external_ko_namespaceObject.unwrap(control.foreColor) || 'Black'),
+            padding: external_ko_namespaceObject.unwrap(control.padding) || '',
+            textAlignment: external_ko_namespaceObject.unwrap(control.textAlignment) || 'TopLeft',
+            wordWrap: external_ko_namespaceObject.unwrap(control.wordWrap) !== false,
+            multiline,
+            rightToLeft: control.rtl() || false,
+            lineSpacing: external_ko_namespaceObject.unwrap(control.lineSpacing) || 1,
+            textTrimming: external_ko_namespaceObject.unwrap(control.textTrimming) || 'Character',
+            textFitMode: external_ko_namespaceObject.unwrap(control.textFitMode) || 'None',
+            dpi: external_ko_namespaceObject.unwrap(control.dpi) || 100,
+            width: size.width,
+            height: size.height
+        };
+        return { enabled: true, multiline, text, request: { uri, item } };
+    }
+    applyState(state) {
+        if (!state.enabled) {
+            this.resetRender();
+            return;
+        }
+        this.multiline(state.multiline);
+        this.fallbackText(state.text);
+        if (state.request === undefined) {
+            this.resetRender();
+            return;
+        }
+        if (state.request === null) {
+            this.resetRender(true);
+            return;
+        }
+        this.prepareRender(state.text, state.request);
+    }
+    resetRender(error = false) {
+        this.lastRenderDeferred?.reject();
+        this.lastRenderDeferred = undefined;
+        this.lastRequestKey = undefined;
+        this.imageCacheKey = undefined;
+        this.imageSrc('');
+        this.isLoading(false);
+        this.error(error);
+    }
+    showResult(key, text, item, result) {
+        this.isLoading(false);
+        if (result) {
+            this.imageCacheKey = key;
+            this.imageWidth(item.width);
+            this.imageHeight(item.height);
+            this.altText(result.plainText || text);
+            this.imageSrc('data:image/svg+xml;base64,' + result.svg);
+            this.error(false);
+            this.surface.cacheElementContent?.(null);
+        }
+        else {
+            this.lastRequestKey = undefined;
+            this.imageCacheKey = undefined;
+            this.imageSrc('');
+            this.error(true);
+        }
+    }
+    prepareRender(text, request) {
+        const { uri, item } = request;
+        const key = JSON.stringify([uri, item]);
+        if (key === this.lastRequestKey)
+            return;
+        this.lastRequestKey = key;
+        this.lastRenderDeferred?.reject();
+        this.lastRenderDeferred = undefined;
+        const cached = takeCachedResult(key);
+        if (cached) {
+            this.showResult(key, text, item, cached);
+            return;
+        }
+        this.error(false);
+        this.isLoading(!this.imageSrc());
+        const deferred = this.lastRenderDeferred = new external_DevExpress_Analytics_Internal_namespaceObject.DxDeferred();
+        deferred.done(result => this.showResult(key, text, item, result));
+        const timeout = setTimeout(() => {
+            const cancel = enqueue(key, uri, item, result => deferred.resolve(result));
+            deferred.fail(cancel);
+        }, 200);
+        deferred.fail(() => clearTimeout(timeout));
+    }
+}
+
 ;// ./node_modules/devexpress-reporting/designer/controls/xrControl.js
 
 
@@ -10873,6 +11148,10 @@ class XRControlSurfaceBase extends external_DevExpress_Analytics_Elements_namesp
     constructor(control, context, unitProperties) {
         super(control, context, unitProperties);
         this.delta = 0.0001;
+        this.markupContentSize = external_ko_namespaceObject.pureComputed(() => {
+            const area = this.getMarkupContentSize();
+            return { width: area.width, height: area.height };
+        });
         this.template = 'dxrd-control';
         this.selectiontemplate = 'dxrd-control-selection';
         this.contenttemplate = 'dxrd-control-content';
@@ -10884,10 +11163,7 @@ class XRControlSurfaceBase extends external_DevExpress_Analytics_Elements_namesp
                 dataSource: null,
                 dataMember: null,
                 dataMemberOffset: null,
-                allowMarkupText: false,
-                wordWrap: false,
-                fontSize: 0,
-                fontUnit: null
+                allowMarkupText: false
             };
             if (control['controls'] && control['controls']().length !== 0) {
                 parameters.text = '';
@@ -10896,13 +11172,6 @@ class XRControlSurfaceBase extends external_DevExpress_Analytics_Elements_namesp
             parameters.text = control['getExpressionBinding'] && control['getExpressionBinding']();
             parameters.isExpression = !!parameters.text;
             parameters.allowMarkupText = control['allowMarkupText'] && control['allowMarkupText']();
-            parameters.wordWrap = control['wordWrap'] && control['wordWrap']();
-            if (control['font']) {
-                const _font = new external_DevExpress_Analytics_Widgets_Internal_namespaceObject.FontModel(control['font']);
-                parameters.fontSize = _font.size();
-                parameters.fontUnit = _font.unit();
-                _font.dispose();
-            }
             if (parameters.isExpression) {
                 parameters.dataMember = control['getPath'] && control['getPath']('expression') || '';
                 return parameters;
@@ -10951,6 +11220,7 @@ class XRControlSurfaceBase extends external_DevExpress_Analytics_Elements_namesp
         this._disposables.push(this.adorntemplate = external_ko_namespaceObject.computed(() => { return this.getAdornTemplate(); }));
         this._disposables.push(this.displayNameParameters);
         this._disposables.push(this.displayName);
+        this._disposables.push(this.markupContentSize);
     }
     checkParent(surfaceParent) {
         const thisParent = this.parent instanceof BandSurface || this.parent && this.parent._control.controlType === 'DevExpress.XtraReports.UI.XtraReport' ? null : this.parent;
@@ -11082,6 +11352,20 @@ class XRControlSurfaceBase extends external_DevExpress_Analytics_Elements_namesp
             return false;
         }
     }
+    getMarkupContentSize() {
+        const unit = this._context.measureUnit();
+        const size = this._control['size'];
+        return this.cssCalculator.contentSizeCss((0,external_DevExpress_Analytics_Internal_namespaceObject.unitsToPixel)(size?.width() || 0, unit), (0,external_DevExpress_Analytics_Internal_namespaceObject.unitsToPixel)(size?.height() || 0, unit), 1);
+    }
+    get markupTextRendering() {
+        if (!this.markupTextRenderer) {
+            if (!external_ko_namespaceObject.isObservable(this._control['allowMarkupText']))
+                return undefined;
+            this.markupTextRenderer = external_ko_namespaceObject.ignoreDependencies(() => new MarkupTextRenderer(this));
+            this._disposables.push(this.markupTextRenderer);
+        }
+        return this.markupTextRenderer;
+    }
     displayText() {
         if (this._control.controlType == 'XRPanel')
             return (0,external_DevExpress_Analytics_Utils_namespaceObject.getLocalization)('Place controls here to keep them together', 'ReportStringId.PanelDesignMsg');
@@ -14409,19 +14693,7 @@ class XRTableCellSurface extends TableComponentSurface {
         this._rowIndex = () => this._table.rows().indexOf(this._row);
         this.direction = TableActionDirection.horizontal;
         this['multiline'] = control['multiline'];
-        this._disposables.push(this.contentSizes = external_ko_namespaceObject.pureComputed(() => {
-            if (this._isShowBorder('Left')) {
-                return this.cssCalculator.contentSizeCss(this.rect().width, this.heightWithRowSpan(), this._context.zoom());
-            }
-            const bordersArray = control.borders().indexOf('All') === -1 ? control.borders().split(/\s*,\s*/g) : ['Left', 'Top', 'Right', 'Bottom'];
-            const index = bordersArray.indexOf('Left');
-            let width = this.rect().width;
-            if (index !== -1) {
-                bordersArray.splice(index, 1);
-                width += 1;
-            }
-            return this.cssCalculator.contentSizeCss(width, this.heightWithRowSpan(), this._context.zoom(), bordersArray.join(','));
-        }));
+        this._disposables.push(this.contentSizes = external_ko_namespaceObject.pureComputed(() => this.contentSizesFor(this.rect().width, this.heightWithRowSpan(), this._context.zoom())));
         this._disposables.push(this.css = external_ko_namespaceObject.pureComputed(() => {
             const bottom = this.cssCalculator.cellBorder('Bottom', this._context.zoom());
             const right = this.cssCalculator.cellBorder('Right', this._context.zoom());
@@ -14488,6 +14760,24 @@ class XRTableCellSurface extends TableComponentSurface {
             return rect;
         };
     }
+    contentSizesFor(width, height, zoom) {
+        if (this._isShowBorder('Left'))
+            return this.cssCalculator.contentSizeCss(width, height, zoom);
+        const borders = this._control.borders();
+        const bordersArray = borders.indexOf('All') === -1 ? borders.split(/\s*,\s*/g) : ['Left', 'Top', 'Right', 'Bottom'];
+        const index = bordersArray.indexOf('Left');
+        if (index !== -1) {
+            bordersArray.splice(index, 1);
+            width += 1;
+        }
+        return this.cssCalculator.contentSizeCss(width, height, zoom, bordersArray.join(','));
+    }
+    getMarkupContentSize() {
+        const rowIndex = this._rowIndex();
+        const height = this._table.rows().slice(rowIndex, rowIndex + this.rowSpan()).reduce((sum, row) => sum + (row.height() || 0), 0);
+        const unit = this._context.measureUnit();
+        return this.contentSizesFor((0,external_DevExpress_Analytics_Internal_namespaceObject.unitsToPixel)(this._control.width(), unit), (0,external_DevExpress_Analytics_Internal_namespaceObject.unitsToPixel)(height, unit), 1);
+    }
     selectColumn(selection) {
         (this.parent.parent).selectColumn(selection, this);
     }
@@ -21954,7 +22244,7 @@ class TableOfContentsLevelSurface extends XRControlSurfaceBase {
         this._leaderSymbolWidth = external_ko_namespaceObject.pureComputed(() => {
             if (!TableOfContentsLevelSurface._$leaderSymbol)
                 TableOfContentsLevelSurface._$leaderSymbol = external_jQuery_namespaceObject.fn.constructor('<span />').hide().appendTo('body');
-            TableOfContentsLevelSurface._$leaderSymbol.html(this.getControlModel().leaderSymbol()).css(this.contentCss());
+            TableOfContentsLevelSurface._$leaderSymbol.text(this.getControlModel().leaderSymbol()).css(this.contentCss());
             return TableOfContentsLevelSurface._$leaderSymbol.width();
         });
         this.leaderSymbols = external_ko_namespaceObject.pureComputed(() => {
@@ -25371,7 +25661,7 @@ class TableCellGroupActions extends external_DevExpress_Analytics_Internal_names
             'width': width,
             'overflow': 'hidden'
         }, cell.surface.cssCalculator.createFont(external_ko_namespaceObject.unwrap(cell['font'])), cell.surface.cssCalculator.createWordWrap(wordWrap, cell.multiline())))
-            .html(cell.text())
+            .text(cell.text())
             .appendTo(document.body);
         try {
             return (0,external_DevExpress_Analytics_Internal_namespaceObject.pixelToUnits)(Math.ceil($div[0].getBoundingClientRect().height) + 2, cell.root.measureUnit(), 1);
@@ -41506,202 +41796,10 @@ external_ko_namespaceObject.bindingHandlers['coordinateGrid'] = {
     }
 };
 
-;// ./node_modules/devexpress-reporting/designer/internal/_htmlMarkUpConverter.js
-
-
-
-
-class TextTag {
-    constructor(node, inheritValues) {
-        this.node = node;
-        this.inheritValues = inheritValues;
-        this.value = null;
-        this.element = null;
-        this.hasChildNodes = false;
-        this.value = this.node.getAttribute && this.node.getAttribute(ValueConverter.ValueAttrName);
-        if (this.value)
-            this.value = this.value.trim();
-    }
-    createElement() {
-        this.element = document.createTextNode(this.node.outerHTML || this.node.textContent || this.node['data']);
-    }
-    setProperties(parameters, inheritValues) { }
-    appendTo(el) {
-        el.appendChild(this.element);
-    }
-}
-class SpanTag extends TextTag {
-    constructor() {
-        super(...arguments);
-        this.hasChildNodes = true;
-    }
-    createElement() {
-        this.element = document.createElement('span');
-        if (this.inheritValues.backcolor) {
-            this.element.style.backgroundColor = 'inherit';
-        }
-    }
-}
-class AnchorTag extends TextTag {
-    constructor() {
-        super(...arguments);
-        this.hasChildNodes = true;
-    }
-    createElement() {
-        this.element = document.createElement('a');
-    }
-    setProperties() {
-        this.element.href = 'javascript:void(0);';
-    }
-}
-class ImageTag extends TextTag {
-    appendTo(el) { }
-}
-class SimpleTag extends SpanTag {
-    createElement() {
-        this.element = document.createElement(this.node.nodeName);
-    }
-}
-class ColorTag extends SpanTag {
-    setProperties() {
-        this.element.style.color = external_DevExpress_Analytics_Serializer_Native_namespaceObject.currentMultiPlatformEngine.unwrap((0,external_DevExpress_Analytics_Utils_namespaceObject.colorFromString)(this.value));
-    }
-}
-class BackColorTag extends SpanTag {
-    setProperties() {
-        this.element.style.backgroundColor = external_DevExpress_Analytics_Serializer_Native_namespaceObject.currentMultiPlatformEngine.unwrap((0,external_DevExpress_Analytics_Utils_namespaceObject.colorFromString)(this.value));
-        this.inheritValues.backcolor = true;
-    }
-}
-class SizeTag extends SpanTag {
-    setProperties(parameters) {
-        let sizeValue;
-        const textValue = this.value;
-        if (textValue && (textValue[0] === '+' || textValue[0] === '-')) {
-            const _val = parseFloat(textValue.substr(1));
-            sizeValue = this.inheritValues.fontSize + (textValue[0] === '+' ? _val : _val * (-1));
-        }
-        else {
-            sizeValue = parseFloat(textValue);
-        }
-        if (!isNaN(sizeValue))
-            this.element.style.fontSize = sizeValue + (parameters.fontUnit || 'pt');
-        else
-            sizeValue = this.inheritValues.fontSize;
-        this.inheritValues.fontSize = sizeValue;
-    }
-}
-class ValueConverter {
-    _createTag(node, inheritValues) {
-        if (!this._checkValidTag(node.nodeName) || node.nodeName === '#text') {
-            return new TextTag(node, inheritValues);
-        }
-        else if (node.nodeName === 'COLOR') {
-            return new ColorTag(node, inheritValues);
-        }
-        else if (node.nodeName === 'BACKCOLOR') {
-            return new BackColorTag(node, inheritValues);
-        }
-        else if (node.nodeName === 'HREF') {
-            return new AnchorTag(node, inheritValues);
-        }
-        else if (node.nodeName === 'SIZE') {
-            return new SizeTag(node, inheritValues);
-        }
-        else if (node.nodeName === 'IMG') {
-            return new ImageTag(node, inheritValues);
-        }
-        else if (node.nodeName !== '#text') {
-            return new SimpleTag(node, inheritValues);
-        }
-    }
-    _parceToXml(str) {
-        let matches;
-        while ((matches = this._regExp.exec(str)) !== null) {
-            if (matches.index === this._regExp.lastIndex) {
-                this._regExp.lastIndex++;
-            }
-            const fullmatch = matches[0];
-            const escapeTag = matches[1];
-            const closingTag = matches[2] === '/' ? '/' : '';
-            const tag = matches[3];
-            const value = matches[5];
-            let replacedStr = '';
-            if (this._checkValidTag(tag) && !escapeTag) {
-                if (value) {
-                    replacedStr = '<' + tag + ' ' + ValueConverter.ValueAttrName + "='" + value + "'>";
-                }
-                else {
-                    replacedStr = '<' + closingTag + tag + '>';
-                }
-            }
-            else {
-                let _fullmatch = fullmatch;
-                if (!!escapeTag) {
-                    _fullmatch = _fullmatch.slice(escapeTag.length);
-                }
-                const $spanEscape = external_jQuery_namespaceObject.fn.constructor('<span>');
-                replacedStr = $spanEscape.text(_fullmatch)[0].innerHTML;
-            }
-            str = str.replace(fullmatch, replacedStr);
-        }
-        str = str.replace(/<nbsp>/g, '&nbsp;');
-        str = str.replace(/<br>/g, this._displayNameParameters.wordWrap ? '<br>' : '');
-        return str;
-    }
-    _checkValidTag(tag) {
-        switch (tag.toLocaleLowerCase()) {
-            case 'href':
-            case 'color':
-            case 'backcolor':
-            case 'size':
-            case 'img':
-            case 'image':
-            case 'br':
-            case 'b':
-            case 'i':
-            case 'u':
-            case 'nbsp':
-            case 's': return true;
-        }
-        return false;
-    }
-    _createTree(treeElement, writeTo, inheritValues = { fontSize: this._displayNameParameters.fontSize || 0 }) {
-        if (treeElement.childNodes.length > 0) {
-            const childNodes = Array.prototype.slice.call(treeElement.childNodes);
-            childNodes.forEach((node) => {
-                const tag = this._createTag(node, { fontSize: inheritValues.fontSize, backcolor: inheritValues.backcolor });
-                tag.createElement();
-                tag.setProperties(this._displayNameParameters);
-                tag.appendTo(writeTo);
-                if (tag.hasChildNodes)
-                    this._createTree(node, tag.element, tag.inheritValues);
-            });
-        }
-    }
-    constructor(_displayNameParameters) {
-        this._displayNameParameters = _displayNameParameters;
-        this._regExp = /<(<*)(\/?)(\s*\w+\s*)(=(\s*.+?\s*)|\b[^>]*)?>/gm;
-    }
-    appendTo(element) {
-        if (!element)
-            return;
-        const fragment = document.createDocumentFragment();
-        const temp = document.createElement('div');
-        fragment.appendChild(temp);
-        external_ko_namespaceObject.utils.setHtml(element, '');
-        external_ko_namespaceObject.utils.setHtml(temp, this._parceToXml(this._displayNameParameters.text));
-        this._createTree(temp, element);
-        fragment.removeChild(temp);
-    }
-}
-ValueConverter.ValueAttrName = 'value';
-
 ;// ./node_modules/devexpress-reporting/designer/internal/_displayNameBindings.js
 
 
 
-
 external_ko_namespaceObject.bindingHandlers['controlDisplayName'] = {
     update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
         const value = valueAccessor(), surface = external_ko_namespaceObject.unwrap(value);
@@ -41722,12 +41820,7 @@ external_ko_namespaceObject.bindingHandlers['controlDisplayName'] = {
                 .fail(() => setElementText(parameters.dataMember));
         }
         else {
-            if (!parameters.allowMarkupText) {
-                external_jQuery_namespaceObject.fn.constructor(element).text(parameters.text || '');
-            }
-            else {
-                new ValueConverter(parameters).appendTo(element);
-            }
+            external_jQuery_namespaceObject.fn.constructor(element).text(parameters.text || '');
         }
     }
 };
@@ -42082,8 +42175,11 @@ FormatStringService.actions = { updatePreview: FormatStringService.updatePreview
 (0,external_DevExpress_Analytics_Widgets_Internal_namespaceObject.addToBindingsCache)('styleunit:{ width: checkStateWidth, height: checkStateHeight }, css: checkStateClass, template: {name: $data.checkStateStyleIcon, if: !!ko.unwrap($data.checkStateStyleIcon)}', function ($context, $element) { return { 'styleunit': function () { return { 'width': $context.$data.checkStateWidth, 'height': $context.$data.checkStateHeight }; }, 'css': function () { return $context.$data.checkStateClass; }, 'template': function () { return { 'name': $context.$data.checkStateStyleIcon, 'if': !!$context.ko.unwrap($context.$data.checkStateStyleIcon) }; } }; });
 (0,external_DevExpress_Analytics_Widgets_Internal_namespaceObject.addToBindingsCache)('styleunit: { width: textWidth, lineHeight: contentHeightWithoutZoom }, visible: visibleText, style: { cssFloat: isGlyphAlignmentNear() ? \'right\': \'left\' }', function ($context, $element) { return { 'styleunit': function () { return { 'width': $context.$data.textWidth, 'lineHeight': $context.$data.contentHeightWithoutZoom }; }, 'visible': function () { return $context.$data.visibleText; }, 'style': function () { return { 'cssFloat': $context.$data.isGlyphAlignmentNear() ? 'right' : 'left' }; } }; });
 (0,external_DevExpress_Analytics_Widgets_Internal_namespaceObject.addToBindingsCache)('controlDisplayName: $data, style: contentCss, cacheElement: { action: function(element) { $data.cacheElementContent(element); } }', function ($context, $element) { return { 'controlDisplayName': function () { return $context.$data; }, 'style': function () { return $context.$data.contentCss; }, 'cacheElement': function () { return { 'action': function (element) { $context.$data.cacheElementContent(element); } }; } }; });
+(0,external_DevExpress_Analytics_Widgets_Internal_namespaceObject.addToBindingsCache)('template: { name: \'dxrd-markup-text-content\', data: markupTextRendering }', function ($context, $element) { return { 'template': function () { return { 'name': 'dxrd-markup-text-content', 'data': $context.$data.markupTextRendering }; } }; });
 (0,external_DevExpress_Analytics_Widgets_Internal_namespaceObject.addToBindingsCache)('styleunit: { lineHeight: contentHeightWithoutZoom }', function ($context, $element) { return { 'styleunit': function () { return { 'lineHeight': $context.$data.contentHeightWithoutZoom }; } }; });
 (0,external_DevExpress_Analytics_Widgets_Internal_namespaceObject.addToBindingsCache)('controlDisplayName: $data, style: contentCss, css: {\'dxrd-control-content-multiline\' : multiline }', function ($context, $element) { return { 'controlDisplayName': function () { return $context.$data; }, 'style': function () { return $context.$data.contentCss; }, 'css': function () { return { 'dxrd-control-content-multiline': $context.$data.multiline }; } }; });
+(0,external_DevExpress_Analytics_Widgets_Internal_namespaceObject.addToBindingsCache)('if: $data.markupTextRendering && markupTextRendering.enabled()', function ($context, $element) { return { 'if': function () { return $context.$data.markupTextRendering && $context.$data.markupTextRendering.enabled(); } }; });
+(0,external_DevExpress_Analytics_Widgets_Internal_namespaceObject.addToBindingsCache)('ifnot: $data.markupTextRendering && markupTextRendering.enabled()', function ($context, $element) { return { 'ifnot': function () { return $context.$data.markupTextRendering && $context.$data.markupTextRendering.enabled(); } }; });
 (0,external_DevExpress_Analytics_Widgets_Internal_namespaceObject.addToBindingsCache)('event: { dblclick: function() { $root.inlineTextEdit.show($element) } }, style: { visibility: (selected() || focused()) ? \'inherit\' : \'hidden\'}, css: {\'dxrd-selected dxrd-context-menu-container\': selected, \'dxrd-focused\': focused, \'dxrd-intersect\': isIntersect, \'dxrd-locked\': locked }, resizable: $root.resizeHandler, draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor', function ($context, $element) { return { 'event': function () { return { 'dblclick': function () { $context.$root.inlineTextEdit.show($element); } }; }, 'style': function () { return { 'visibility': ($context.$data.selected() || $context.$data.focused()) ? 'inherit' : 'hidden' }; }, 'css': function () { return { 'dxrd-selected dxrd-context-menu-container': $context.$data.selected, 'dxrd-focused': $context.$data.focused, 'dxrd-intersect': $context.$data.isIntersect, 'dxrd-locked': $context.$data.locked }; }, 'resizable': function () { return $context.$root.resizeHandler; }, 'draggable': function () { return $context.$root.dragHandler; }, 'styleunit': function () { return $context.$data.position; }, 'trackCursor': function () { return $context.$data.underCursor; } }; });
 (0,external_DevExpress_Analytics_Widgets_Internal_namespaceObject.addToBindingsCache)('styleunit: { \'top\': contentSizes().top + (isIntersect() ? 1 : 0), \'left\': contentSizes().left + (isIntersect()? 1 : 0), lineHeight: contentSizes().height, height: contentSizes().height, width: contentSizes().width}', function ($context, $element) { return { 'styleunit': function () { return { 'top': $context.$data.contentSizes().top + ($context.$data.isIntersect() ? 1 : 0), 'left': $context.$data.contentSizes().left + ($context.$data.isIntersect() ? 1 : 0), 'lineHeight': $context.$data.contentSizes().height, 'height': $context.$data.contentSizes().height, 'width': $context.$data.contentSizes().width }; } }; });
 (0,external_DevExpress_Analytics_Widgets_Internal_namespaceObject.addToBindingsCache)('if: $data.controls', function ($context, $element) { return { 'if': function () { return $context.$data.controls; } }; });
@@ -42114,6 +42210,13 @@ FormatStringService.actions = { updatePreview: FormatStringService.updatePreview
 (0,external_DevExpress_Analytics_Widgets_Internal_namespaceObject.addToBindingsCache)('controlDisplayName: $data, style: contentCss, css: {\'dxrd-control-content-multiline\' : multiline, \'dxrd-disabled\': $data.getControlModel().isBindable() && !$data.getControlModel().fieldName() }, cacheElement: { action: function(element) { $data.cacheElementContent(element); } }', function ($context, $element) { return { 'controlDisplayName': function () { return $context.$data; }, 'style': function () { return $context.$data.contentCss; }, 'css': function () { return { 'dxrd-control-content-multiline': $context.$data.multiline, 'dxrd-disabled': $context.$data.getControlModel().isBindable() && !$context.$data.getControlModel().fieldName() }; }, 'cacheElement': function () { return { 'action': function (element) { $context.$data.cacheElementContent(element); } }; } }; });
 (0,external_DevExpress_Analytics_Widgets_Internal_namespaceObject.addToBindingsCache)('visible: !(selected() && focused()), styleunit: position, trackCursor: underCursor, style:{ overflow: \'visible\'}', function ($context, $element) { return { 'visible': function () { return !($context.$data.selected() && $context.$data.focused()); }, 'styleunit': function () { return $context.$data.position; }, 'trackCursor': function () { return $context.$data.underCursor; }, 'style': function () { return { 'overflow': 'visible' }; } }; });
 (0,external_DevExpress_Analytics_Widgets_Internal_namespaceObject.addToBindingsCache)('attr: { x1: linePosition().x1 / _context.zoom(), x2: linePosition().x2 / _context.zoom(), y1: linePosition().y1 / _context.zoom(), y2: linePosition().y2 / _context.zoom() }, style: contentCss', function ($context, $element) { return { 'attr': function () { return { 'x1': $context.$data.linePosition().x1 / $context.$data._context.zoom(), 'x2': $context.$data.linePosition().x2 / $context.$data._context.zoom(), 'y1': $context.$data.linePosition().y1 / $context.$data._context.zoom(), 'y2': $context.$data.linePosition().y2 / $context.$data._context.zoom() }; }, 'style': function () { return $context.$data.contentCss; } }; });
+(0,external_DevExpress_Analytics_Widgets_Internal_namespaceObject.addToBindingsCache)('attr: { src: imageSrc, alt: altText }, event: { error: onImageError }, style: imageCss, styleunit: { height: imageHeight, width: imageWidth }', function ($context, $element) { return { 'attr': function () { return { 'src': $context.$data.imageSrc, 'alt': $context.$data.altText }; }, 'event': function () { return { 'error': $context.$data.onImageError }; }, 'style': function () { return $context.$data.imageCss; }, 'styleunit': function () { return { 'height': $context.$data.imageHeight, 'width': $context.$data.imageWidth }; } }; });
+(0,external_DevExpress_Analytics_Widgets_Internal_namespaceObject.addToBindingsCache)('styleunit: { lineHeight: $parent.contentHeightWithoutZoom }', function ($context, $element) { return { 'styleunit': function () { return { 'lineHeight': $context.$parent.contentHeightWithoutZoom }; } }; });
+(0,external_DevExpress_Analytics_Widgets_Internal_namespaceObject.addToBindingsCache)('text: fallbackText, css: { \'dxrd-control-content-multiline\': multiline }, style: $parent.contentCss, cacheElement: { action: function(element) { $parent.cacheElementContent && $parent.cacheElementContent(element); } }', function ($context, $element) { return { 'text': function () { return $context.$data.fallbackText; }, 'css': function () { return { 'dxrd-control-content-multiline': $context.$data.multiline }; }, 'style': function () { return $context.$parent.contentCss; }, 'cacheElement': function () { return { 'action': function (element) { $context.$parent.cacheElementContent && $context.$parent.cacheElementContent(element); } }; } }; });
+(0,external_DevExpress_Analytics_Widgets_Internal_namespaceObject.addToBindingsCache)('template: \'dxrd-svg-errorPanel-warning\'', function ($context, $element) { return { 'template': function () { return 'dxrd-svg-errorPanel-warning'; } }; });
+(0,external_DevExpress_Analytics_Widgets_Internal_namespaceObject.addToBindingsCache)('if: imageSrc', function ($context, $element) { return { 'if': function () { return $context.$data.imageSrc; } }; });
+(0,external_DevExpress_Analytics_Widgets_Internal_namespaceObject.addToBindingsCache)('ifnot: imageSrc', function ($context, $element) { return { 'ifnot': function () { return $context.$data.imageSrc; } }; });
+(0,external_DevExpress_Analytics_Widgets_Internal_namespaceObject.addToBindingsCache)('if: error', function ($context, $element) { return { 'if': function () { return $context.$data.error; } }; });
 (0,external_DevExpress_Analytics_Widgets_Internal_namespaceObject.addToBindingsCache)('visible: isSelected(), trackCursor: underCursor, css: {\'dxrd-selected dxrd-context-menu-container\': selected, \'dxrd-focused\': focused, \'dxrd-locked\': locked }, draggable: $root.dragHandler, styleunit: { \'width\': position.width(), \'height\': 3, \'top\': position.top() - 1, left: position.left() }', function ($context, $element) { return { 'visible': function () { return $context.$data.isSelected(); }, 'trackCursor': function () { return $context.$data.underCursor; }, 'css': function () { return { 'dxrd-selected dxrd-context-menu-container': $context.$data.selected, 'dxrd-focused': $context.$data.focused, 'dxrd-locked': $context.$data.locked }; }, 'draggable': function () { return $context.$root.dragHandler; }, 'styleunit': function () { return { 'width': $context.$data.position.width(), 'height': 3, 'top': $context.$data.position.top() - 1, 'left': $context.$data.position.left() }; } }; });
 (0,external_DevExpress_Analytics_Widgets_Internal_namespaceObject.addToBindingsCache)('visible: !isSelected(), trackCursor: underCursor, styleunit: { \'width\': position.width(), \'height\': 3, \'top\': position.top() - 1, left: position.left() }', function ($context, $element) { return { 'visible': function () { return !$context.$data.isSelected(); }, 'trackCursor': function () { return $context.$data.underCursor; }, 'styleunit': function () { return { 'width': $context.$data.position.width(), 'height': 3, 'top': $context.$data.position.top() - 1, 'left': $context.$data.position.left() }; } }; });
 (0,external_DevExpress_Analytics_Widgets_Internal_namespaceObject.addToBindingsCache)('zoom: _context.zoom, template: contenttemplate, styleunit: { \'lineHeight\': lineHeight, \'height\': lineHeight, \'width\': position.width() / _context.zoom() }', function ($context, $element) { return { 'zoom': function () { return $context.$data._context.zoom; }, 'template': function () { return $context.$data.contenttemplate; }, 'styleunit': function () { return { 'lineHeight': $context.$data.lineHeight, 'height': $context.$data.lineHeight, 'width': $context.$data.position.width() / $context.$data._context.zoom() }; } }; });
@@ -42807,16 +42910,17 @@ external_DevExpress_Analytics_Widgets_Internal_namespaceObject.SvgTemplatesEngin
     'dxrd-chart-designer-popup': '<div data-bind="dxPopup: { showTitle: true, width: \'95%\', height: \'95%\', wrapperAttr: { class: \'dxrd-chartdesigner-popup\' }, title: $root.getLocalization(\'Chart Designer\', \'ChartDesignerStringIDs.ChartDesignerWindowTitle\'), visible: visible, toolbarItems: buttons, showCloseButton: true, container: container($element), position: { of: container($element) }}"> <div class="dxrd-chartdesigner-popup-content"> <div class="dxrd-width-100 dxrd-height-100" data-bind="visible: visible, dxChartDesigner: options"></div> </div></div>',
     'dxrd-chart-selection': '<div class="dxrd-control" data-bind="visible: selected() || focused(), css: {\'dxrd-selected dxrd-context-menu-container\': selected, \'dxrd-focused\': focused, \'dxrd-intersect\': isIntersect, \'dxrd-locked\': locked }, resizable: $root.resizeHandler, draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor"> <div class="dxd-border-accented dxrd-control-border-box"></div> <div class="dxrd-chart-panel"> <div class="dxrd-chart-panel-text" data-bind="dxclick: function() { $root.runChartDesigner($data); }, text: runDesignerButtonText(), attr: { title: runDesignerButtonText() }"></div> </div></div><div class="dxrd-control dxrd-context-menu-container" data-bind="visible: !(selected() && focused()), styleunit: position, trackCursor: underCursor, style:{ overflow: isSelected() ? \'visible\' : \'hidden\'}"></div>',
     'dxrd-checkbox-content': '<div data-bind="style: { cssFloat: isGlyphAlignmentNear() ? \'left\': \'right\', width: checkStateWidthContainer() }, styleunit: { lineHeight: contentHeightWithoutZoom }" class="dxrd-text-align-center"> <div class="dxrd-checkbox-checkstate" data-bind="styleunit:{ width: checkStateWidth, height: checkStateHeight }, css: checkStateClass, template: {name: $data.checkStateStyleIcon, if: !!ko.unwrap($data.checkStateStyleIcon)}"> </div></div><div class="dxrd-display-inline-block dxrd-box-sizing-border-box dxrd-letter-spacing-normal dxrd-padding-left-3px" data-bind="styleunit: { width: textWidth, lineHeight: contentHeightWithoutZoom }, visible: visibleText, style: { cssFloat: isGlyphAlignmentNear() ? \'right\': \'left\' }"> <span class="dxrd-control-content dxrd-control-content-multiline" data-bind="controlDisplayName: $data, style: contentCss, cacheElement: { action: function(element) { $data.cacheElementContent(element); } }"></span></div>',
-    'dxrd-control-content': '<div class="dxrd-box-sizing-border-box dxrd-letter-spacing-normal dxrd-width-100" data-bind="styleunit: { lineHeight: contentHeightWithoutZoom }"> <div class="dxrd-control-content" data-bind="controlDisplayName: $data, style: contentCss, css: {\'dxrd-control-content-multiline\' : multiline }"></div></div>',
+    'dxrd-control-content': '<!-- ko if: $data.markupTextRendering && markupTextRendering.enabled() --><div data-bind="template: { name: \'dxrd-markup-text-content\', data: markupTextRendering }"></div><!-- /ko --><!-- ko ifnot: $data.markupTextRendering && markupTextRendering.enabled() --><div class="dxrd-box-sizing-border-box dxrd-letter-spacing-normal dxrd-width-100" data-bind="styleunit: { lineHeight: contentHeightWithoutZoom }"> <div class="dxrd-control-content" data-bind="controlDisplayName: $data, style: contentCss, css: {\'dxrd-control-content-multiline\' : multiline }"></div></div><!-- /ko -->',
     'dxrd-control-selection': '<div class="dxrd-control" data-bind="event: { dblclick: function() { $root.inlineTextEdit.show($element) } }, style: { visibility: (selected() || focused()) ? \'inherit\' : \'hidden\'}, css: {\'dxrd-selected dxrd-context-menu-container\': selected, \'dxrd-focused\': focused, \'dxrd-intersect\': isIntersect, \'dxrd-locked\': locked }, resizable: $root.resizeHandler, draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor"> <div class="dxd-border-accented dxrd-control-border-box"></div> <!-- ko if: $root.inlineTextEdit.visible() && selected() --> <!-- ko with: $root.inlineTextEdit--> <div class="inline-text-edit" data-bind="dxTextArea: { value: text, onKeyUp: keypressAction, valueChangeEvent: \'keyup\' }"></div> <!-- /ko --> <!-- /ko --> <!-- ko if: $data.controls--> <!-- ko foreach: controls --> <!-- ko template: { name: $data.selectiontemplate } --> <!-- /ko --> <!-- /ko --> <!-- /ko --></div><div class="dxrd-control dxrd-context-menu-container" data-bind="visible: !(selected() && focused()), styleunit: position, trackCursor: underCursor, style:{ overflow: isSelected() ? \'visible\' : \'hidden\'}"> <div class="dxrd-control-content-select-main" data-bind="styleunit: { \'top\': contentSizes().top + (isIntersect() ? 1 : 0), \'left\': contentSizes().left + (isIntersect()? 1 : 0), lineHeight: contentSizes().height, height: contentSizes().height, width: contentSizes().width}"> <!-- ko if: $data.controls--> <!-- ko foreach: controls --> <!-- ko template: { name: $data.selectiontemplate } --> <!-- /ko --> <!-- /ko --> <!-- /ko --> </div></div>',
     'dxrd-control': '<div class="dxrd-control dxd-selectable" data-bind="styleunit: position, css: adorntemplate"> <div class="dxrd-control-content-main" data-bind="styleunit: { \'top\': contentSizes().top, \'left\': contentSizes().left, lineHeight: contentSizes().height, height: contentSizes().height, width: contentSizes().width }, style: css"> <div data-bind="zoom: _context.zoom, template: contenttemplate, styleunit: { \'height\': contentHeightWithoutZoom, \'width\': contentWidthWithoutZoom }"> </div> <!-- ko if: $data.controls --> <!-- ko foreach: controls --> <!-- ko template: { name: $data.template } --> <!-- /ko --> <!-- /ko --> <!-- /ko --> </div> <div data-bind="style: borderCss" class="dxrd-width-100 dxrd-height-100 dxrd-position-absolute dxrd-box-sizing-border-box"></div></div>',
     'dxrd-crossband-line': '<div class="dxrd-cross-band dxrd-control dxd-selectable" data-bind="css: {\'dxrd-uiselected\': selected }, styleunit: position"> <svg width="100%" height="100%"> <line data-bind="attr: { x1: \'50%\', x2: \'50%\', y1: 0, y2: \'100%\'} , style: lineCss" /> <!-- ko if: isIntersect --> <line class="dxrd-cross-band-intersect" data-bind="attr: { x1: \'50%\', x2: \'50%\', y1: 0, y2: \'100%\'}, style: lineWidthCss  " /> <!-- /ko --> </svg></div>',
     'dxrd-crossband': '<div class="dxrd-cross-band dxrd-control" data-bind="styleunit: position, css: {\'dxrd-intersect\': isIntersect, \'dxrd-locked\': locked, \'dxrd-uiselected\': selected }"> <div class="dxrd-control dxd-selectable dxrd-width-100 dxrd-height-5px dxrd-position-absolute dxrd-top-0"  data-bind="trackCursor: edgeUnderCursor"></div> <div class="dxrd-control dxd-selectable dxrd-width-5px dxrd-height-100 dxrd-position-absolute dxrd-left-0"  data-bind="trackCursor: edgeUnderCursor"></div> <div class="dxrd-control dxd-selectable dxrd-width-5px dxrd-height-100 dxrd-position-absolute dxrd-right-0"  data-bind="trackCursor: edgeUnderCursor"></div> <div class="dxrd-control dxd-selectable dxrd-width-100 dxrd-height-5px dxrd-position-absolute dxrd-bottom-0"  data-bind="trackCursor: edgeUnderCursor"></div> <svg width="100%" height="100%"> <line data-bind="attr: { x1: borderWidth()/2, x2: borderWidth()/2, y1: 0, y2: \'100%\' }, style: rightCss" /> <line data-bind="attr: { x1: 0, x2: \'100%\', y1: borderWidth()/2, y2: borderWidth()/2 }, style: topCss" /> <line data-bind="attr: { x1: rect().width-borderWidth()/2, x2: rect().width-borderWidth()/2, y1: 0, y2: \'100%\' }, style: leftCss" /> <line data-bind="attr: { x1: 0, x2: \'100%\', y1: rect().height-borderWidth()/2, y2: rect().height-borderWidth()/2 }, style: bottomCss" /> </svg></div>',
     'dxrd-crosstab-cell': '<div class="dxrd-crosstab-cell dxrd-control" data-bind="event: { dblclick: function() { isEditable() && $root.inlineTextEdit.show($element) } }, style: { visibility: (selected() || focused()) ? \'inherit\' : \'hidden\'}, css: {\'dxrd-selected dxrd-context-menu-container\': selected, \'dxrd-focused\': focused, \'dxrd-intersect\': isIntersect, \'dxrd-locked\': locked }, resizable: $root.resizeHandler, styleunit: position, trackCursor: underCursor"> <!-- ko template: \'dxrd-crosstab-cell-selection\' --> <!-- /ko --> <div class="dxd-border-accented dxrd-control-border-box"></div> <!-- ko if: $root.inlineTextEdit.visible() && selected() --> <!-- ko with: $root.inlineTextEdit--> <div class="inline-text-edit" data-bind="dxTextArea: { value: text, onKeyUp: keypressAction, valueChangeEvent: \'keyup\' }"></div> <!-- /ko --> <!-- /ko --> <div id="dxrd-crosstab-cell-drop" data-bind="visible: showDropSurface, css: dragCss, styleunit: { left: dropRect.left, top: dropRect.top, width: dropRect.width, height: dropRect.height }"></div> </div> <div class="dxrd-crosstab-cell dxrd-control dxrd-context-menu-container" data-bind="visible: !(selected() && focused()), styleunit: position, trackCursor: underCursor, style:{ overflow: \'visible\'}, event: { mousedown: function(e) { cellClick(); } }"> <!-- ko template: \'dxrd-crosstab-cell-selection\' --> <!-- /ko --> <div class="dxrd-control-content-select-main" data-bind="styleunit: { \'top\': contentSizes().top + (isIntersect() ? 1 : 0), \'left\': contentSizes().left + (isIntersect()? 1 : 0), lineHeight: contentSizes().height, height: contentSizes().height, width: contentSizes().width}"> <div id="dxrd-crosstab-cell-drop" data-bind="visible: showDropSurface, css: dragCss, styleunit: { left: dropRect.left, top: dropRect.top, width: dropRect.width, height: dropRect.height }"></div> </div> </div>',
     'dxrd-crosstab-cell-selection': '<!-- ko if: _control._rowIndex() === 0 --> <div class="dxrd-table-column-selection dxrd-table-column-selection-top" data-bind="click: function(_, e) { !$root.selection.disabled() && selectLine($root.selection, e); e.stopPropagation(); }, visible: !$root.dx._static.DragDropHandler.started(), styleunit: { \'width\': position.width }"></div> <!-- /ko --> <!-- ko if: _control._columnIndex() === 0 --> <div class="dxrd-table-row-selection dxrd-table-row-selection-left" data-bind="click: function(_, e) { !$root.selection.disabled() && selectLine($root.selection, e, true); e.stopPropagation(); }, visible: !$root.dx._static.DragDropHandler.started()"></div> <!-- /ko --> <!-- ko if: _control.parent._rowDefinitions().length - 1 ===  _control._rowIndex() --> <div class="dxrd-table-column-selection dxrd-table-column-selection-bottom" data-bind="click: function(_, e) { !$root.selection.disabled() && selectLine($root.selection, e); e.stopPropagation(); },visible: !$root.dx._static.DragDropHandler.started(), styleunit: { \'width\': position.width }"></div> <!-- /ko --> <!-- ko if: _control.parent._columnDefinitions().length - 1 ===  _control._columnIndex() --> <div class="dxrd-table-row-selection dxrd-table-row-selection-right" data-bind="click: function(_, e) { !$root.selection.disabled() && selectLine($root.selection, e, true); e.stopPropagation(); }, visible: !$root.dx._static.DragDropHandler.started()"></div> <!-- /ko -->',
-    'dxrd-crosstab-control-content': '<div class="dxrd-box-sizing-border-box dxrd-letter-spacing-normal dxrd-width-100" data-bind="styleunit: { lineHeight: contentHeightWithoutZoom }"> <div class="dxrd-control-content" data-bind="controlDisplayName: $data, style: contentCss, css: {\'dxrd-control-content-multiline\' : multiline, \'dxrd-disabled\': $data.getControlModel().isBindable() && !$data.getControlModel().fieldName() }, cacheElement: { action: function(element) { $data.cacheElementContent(element); } }"></div></div>',
+    'dxrd-crosstab-control-content': '<!-- ko if: $data.markupTextRendering && markupTextRendering.enabled() --><div data-bind="template: { name: \'dxrd-markup-text-content\', data: markupTextRendering }"></div><!-- /ko --><!-- ko ifnot: $data.markupTextRendering && markupTextRendering.enabled() --><div class="dxrd-box-sizing-border-box dxrd-letter-spacing-normal dxrd-width-100" data-bind="styleunit: { lineHeight: contentHeightWithoutZoom }"> <div class="dxrd-control-content" data-bind="controlDisplayName: $data, style: contentCss, css: {\'dxrd-control-content-multiline\' : multiline, \'dxrd-disabled\': $data.getControlModel().isBindable() && !$data.getControlModel().fieldName() }, cacheElement: { action: function(element) { $data.cacheElementContent(element); } }"></div></div><!-- /ko -->',
     'dxrd-crosstab': '<div class="dxrd-crosstab dxrd-control" data-bind="event: { dblclick: function() { $root.inlineTextEdit.show($element) } }, style: { visibility: (selected() || focused()) ? \'inherit\' : \'hidden\'}, css: {\'dxrd-selected dxrd-context-menu-container\': selected, \'dxrd-focused\': focused, \'dxrd-intersect\': isIntersect, \'dxrd-locked\': locked }, resizable: $root.resizeHandler, draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor"> <div class="dxd-border-accented dxrd-control-border-box"></div> <!-- ko if: $root.inlineTextEdit.visible() && selected() --> <!-- ko with: $root.inlineTextEdit--> <div class="inline-text-edit" data-bind="dxTextArea: { value: text, onKeyUp: keypressAction, valueChangeEvent: \'keyup\' }"></div> <!-- /ko --> <!-- /ko --> <!-- ko if: $data.controls--> <!-- ko foreach: controls --> <!-- ko template: { name: $data.selectiontemplate } --> <!-- /ko --> <!-- /ko --> <!-- /ko --></div><div class="dxrd-crosstab dxrd-control dxrd-context-menu-container" data-bind="visible: !(selected() && focused()), styleunit: position, trackCursor: underCursor, style:{ overflow: \'visible\'}"> <div class="dxrd-control-content-select-main" data-bind="styleunit: { \'top\': contentSizes().top + (isIntersect() ? 1 : 0), \'left\': contentSizes().left + (isIntersect()? 1 : 0), lineHeight: contentSizes().height, height: contentSizes().height, width: contentSizes().width}"> <!-- ko if: $data.controls--> <!-- ko foreach: controls --> <!-- ko template: { name: $data.selectiontemplate } --> <!-- /ko --> <!-- /ko --> <!-- /ko --> </div></div>',
     'dxrd-line-content': '<svg class="dxrd-position-absolute dxrd-left-0 dxrd-width-100 dxrd-height-100"> <line data-bind="attr: { x1: linePosition().x1 / _context.zoom(), x2: linePosition().x2 / _context.zoom(), y1: linePosition().y1 / _context.zoom(), y2: linePosition().y2 / _context.zoom() }, style: contentCss" /></svg>',
+    'dxrd-markup-text-content': '<!-- ko if: imageSrc --><img class="dxrd-markup-text-image" data-bind="attr: { src: imageSrc, alt: altText }, event: { error: onImageError }, style: imageCss, styleunit: { height: imageHeight, width: imageWidth }" /><!-- /ko --><!-- ko ifnot: imageSrc --><div class="dxrd-box-sizing-border-box dxrd-letter-spacing-normal dxrd-width-100" data-bind="styleunit: { lineHeight: $parent.contentHeightWithoutZoom }"> <div class="dxrd-control-content" data-bind="text: fallbackText, css: { \'dxrd-control-content-multiline\': multiline }, style: $parent.contentCss, cacheElement: { action: function(element) { $parent.cacheElementContent && $parent.cacheElementContent(element); } }"></div></div><!-- /ko --><!-- ko if: error --><div class="dxrd-markup-text-error dxd-icon-warning" data-bind="template: \'dxrd-svg-errorPanel-warning\'"></div><!-- /ko --><!-- ko if: isLoading --><div class="dx-content-loading-panel"> <div data-bind="dxLoadIndicator: { visible: isLoading() }"></div></div><!-- /ko -->',
     'dxrd-pagebreak-selection': '<div class="dxrd-control dxrd-pagebreak" data-bind="visible: isSelected(), trackCursor: underCursor, css: {\'dxrd-selected dxrd-context-menu-container\': selected, \'dxrd-focused\': focused, \'dxrd-locked\': locked }, draggable: $root.dragHandler, styleunit: { \'width\': position.width(), \'height\': 3, \'top\': position.top() - 1, left: position.left() }"> <div class="dxd-border-accented dxrd-control-border-box"></div></div><div class="dxrd-control dxrd-pagebreak dxrd-context-menu-container" data-bind="visible: !isSelected(), trackCursor: underCursor, styleunit: { \'width\': position.width(), \'height\': 3, \'top\': position.top() - 1, left: position.left() }"></div>',
     'dxrd-pagebreak': '<div class="dxrd-control dxd-selectable dxrd-border-none dxrd-background-none"  data-bind="styleunit: position"> <div data-bind="zoom: _context.zoom, template: contenttemplate, styleunit: { \'lineHeight\': lineHeight, \'height\': lineHeight, \'width\': position.width() / _context.zoom() }"> </div></div>',
     'dxrd-pdfcontent-control-content': '<div class="dxrd-box-sizing-border-box dxrd-letter-spacing-normal dxrd-width-100" data-bind="styleunit: { lineHeight: contentHeightWithoutZoom }"> <div class="dxrd-control-content" data-bind="style: contentCss, styleunit: { lineHeight: contentHeightWithoutZoom, height: contentHeightWithoutZoom, width: contentWidthWithoutZoom }"> <div data-bind="css: controlTypeClass, template: controlTypeIconTemplate" class="dxrd-position-absolute dxrd-width-24px dxrd-height-24px dxrd-right-5px dxrd-top-5px"> </div> <!-- ko if: generateOwnPages() --> <div class="dxrd-text-nowrap-ellipsis" data-bind="text: getControlModel().textContent"></div> <!-- /ko --> </div></div>',
@@ -42841,7 +42945,7 @@ external_DevExpress_Analytics_Widgets_Internal_namespaceObject.SvgTemplatesEngin
     'dxrd-table-of-contents': '<div class="dxrd-control dxd-selectable dxrd-control-table-of-content" data-bind="styleunit: position, trackCursor: underCursor, css: adorntemplate"> <div data-bind="style: css" class="dxrd-width-100 dxrd-height-100"> <!-- ko template: { name: levelTitle.template, data: levelTitle } --> <!-- /ko --> <div class="dxrd-control-table-of-content-levelsElements"> <!-- ko foreach: $data.levels() --> <!-- ko template: { name: $data.template } --> <!-- /ko --> <!-- /ko --> <!-- ko template: { name: levelDefault.template, data: levelDefault, isDefault: true } --> <!-- /ko --> </div> </div> </div>',
     'dxrd-table-of-contents-level': '<div class="dxrd-control dxrd-left-0 dxrd-width-100" data-bind="styleunit: { height: position.height, top: position.top, lineHeight: position.lineHeight}, css: adorntemplate" > <div class="dxrd-tocLevel-border" data-bind="styleunit: { \'height\': _context.zoom()}"></div> <!-- ko if: getControlModel().rtl() --> <div data-bind="style: borderCss, styleunit: { left: position.left, width: contentSizes().width + (contentSizes().left + contentSizes().right)} " class="dxrd-height-100 dxrd-position-absolute dxrd-box-sizing-border-box"></div> <!-- /ko --> <!-- ko if: !getControlModel().rtl() --> <div data-bind="style: borderCss, styleunit: { left: position.left} " class="dxrd-height-100 dxrd-right-0 dxrd-position-absolute dxrd-box-sizing-border-box"></div> <!-- /ko --> <div class="dxrd-control-content-main dxrd-overflow-hidden"  data-bind="styleunit: { \'top\': contentSizes().top, \'left\': contentSizes().left + position.left(), lineHeight: contentSizes().height, height: contentSizes().height, width: contentSizes().width}, style: css"> <div class="dxrd-tocLevel-zoomer" data-bind="zoom: _context.zoom, styleunit: { \'height\': contentHeightWithoutZoom, \'width\': contentWidthWithoutZoom }"> <div class="dxrd-box-sizing-border-box dxrd-letter-spacing-normal dxrd-width-100 dxrd-height-100" data-bind="styleunit: { lineHeight: contentHeightWithoutZoom }"> <!-- ko if: getControlModel().isTitle --> <div class="dxrd-control-content dxrd-control-content-multiline" data-bind="controlDisplayName: $data, style: contentCss"></div> <!-- /ko --> <!-- ko ifnot: getControlModel().isTitle --> <div class="dxrd-control-content dxrd-width-100 dxrd-height-100 dxrd-line-height-inherit" data-bind="style: contentCss" > <div class="dxrd-control-content-level-text"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td> <div class="dxrd-control-content-line-text"><span data-bind="text: $data.getControlModel().name"></span></div> </td> <td class="middle"> <table border="0" cellspacing="0" cellpadding="0" class="dxrd-table-layout-fixed dxrd-width-100"> <tr> <td data-bind="text: leaderSymbols" class="dxrd-word-wrap-break-word"></td> </tr> </table> </td> <td> <div class="dxrd-control-content-number">&nbsp;&nbsp;#&nbsp;&nbsp;</div> </td> </tr> </table> </div> </div> <!-- /ko --> </div> </div> </div> </div>',
     'dxrd-table-of-contents-selected': '<div class="dxrd-control dxrd-table-of-contents-selected dxrd-context-menu-container" data-bind="event: { dblclick: function() { $root.inlineTextEdit.show($element) } }, visible: isSelected, css: {\'dxrd-intersect\': isIntersect, \'dxrd-locked\': locked }, draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor"> <div class="dxd-border-accented dxrd-control-border-box"></div> <!-- ko with: levelTitle --> <div class="dxrd-control dxrd-control-line-ui-resizeble" data-bind="styleunit: position, resizable: resizable($root.resizeHandler, $element)"> <!-- ko with: $root.inlineTextEdit--> <!-- ko if: visible --> <div class="inline-text-edit" data-bind="dxTextArea: { value: text, onKeyUp: keypressAction, valueChangeEvent: \'keyup\' }"></div> <!-- /ko --> <!-- /ko --> </div> <!-- /ko --> <!-- ko foreach: $data.levels() --> <div class="dxrd-control dxrd-control-line-ui-resizeble" data-bind="styleunit: { height: position.height, top: position.top, lineHeight: position.lineHeight }, resizable: resizable($root.resizeHandler, $element)" class="dxrd-left-0 dxrd-width-100"></div> <!-- /ko --> <!-- ko with: levelDefault --> <div class="dxrd-control" data-bind="styleunit: { height: position.height, top: position.top, lineHeight: position.lineHeight }, resizable: resizable($root.resizeHandler, $element)" class="dxrd-left-0 dxrd-width-100"></div> <!-- /ko --> </div> <div class="dxrd-control dxrd-context-menu-container" data-bind="visible: !isSelected(), styleunit: position, trackCursor: underCursor"> </div>',
-    'dxrd-textcontrol-content': '<div class="dxrd-box-sizing-border-box dxrd-letter-spacing-normal dxrd-width-100" data-bind="styleunit: { lineHeight: contentHeightWithoutZoom }"> <div class="dxrd-control-content" data-bind="controlDisplayName: $data, style: contentCss, css: {\'dxrd-control-content-multiline\' : multiline }, cacheElement: { action: function(element) { $data.cacheElementContent(element); } } "></div></div>',
+    'dxrd-textcontrol-content': '<!-- ko if: $data.markupTextRendering && markupTextRendering.enabled() --><div data-bind="template: { name: \'dxrd-markup-text-content\', data: markupTextRendering }"></div><!-- /ko --><!-- ko ifnot: $data.markupTextRendering && markupTextRendering.enabled() --><div class="dxrd-box-sizing-border-box dxrd-letter-spacing-normal dxrd-width-100" data-bind="styleunit: { lineHeight: contentHeightWithoutZoom }"> <div class="dxrd-control-content" data-bind="controlDisplayName: $data, style: contentCss, css: {\'dxrd-control-content-multiline\' : multiline }, cacheElement: { action: function(element) { $data.cacheElementContent(element); } } "></div></div><!-- /ko -->',
     'dxrd-todocontrol': '<div class="dxrd-control dxd-selectable" data-bind="styleunit: position, trackCursor: underCursor, style: css, css: adorntemplate"> <div data-bind="style: borderCss" class="dxrd-control-border-box"></div> <div data-bind="css: controlTypeClass, template: controlTypeIconTemplate" class="dxrd-position-absolute dxrd-width-24px dxrd-height-24px dxrd-right-5px dxrd-top-5px"> </div> <span class="dxrd-control-content" data-bind="text: displayName, style: contentCss"></span></div>',
     'dxrd-unknown-control': '<div class="dxrd-control dxd-selectable" data-bind="styleunit: position, css: adorntemplate"> <div class="dxrd-control-content-main"> <div data-bind="zoom: _context.zoom, template: contenttemplate" class="dxrd-position-absolute"> </div> </div></div>',
     'dxrd-calculatedfield-content': '<div data-bind="with: propertyGrid"> <!-- ko foreach: getEditors() --> <!-- ko template: editorTemplate --> <!-- /ko --> <!-- /ko --></div>',
@@ -43231,8 +43335,6 @@ external_DevExpress_Analytics_Widgets_Internal_namespaceObject.SvgTemplatesEngin
 
 
 
-
-;// ./node_modules/devexpress-reporting/scopes/reporting-designer-internal-htmlMarkUp.js
 
 
 
@@ -44508,7 +44610,6 @@ registerEditors();
 
 
 
-
 
 
 function _addDesignerToBundle(bundle) {
@@ -44535,7 +44636,6 @@ function _addDesignerToBundle(bundle) {
     bundle.Reporting.Designer.Data = reporting_designer_data_namespaceObject;
     bundle.Reporting.Designer.Data.Metadata = reporting_designer_data_metadata_namespaceObject;
     bundle.Reporting.Designer.Internal = reporting_designer_internal_namespaceObject;
-    bundle.Reporting.Designer.Internal.HtmlMarkUp = reporting_designer_internal_htmlMarkUp_namespaceObject;
     bundle.Reporting.Designer.Localization = reporting_designer_localization_namespaceObject;
     bundle.Reporting.Designer.Tools = reporting_designer_tools_namespaceObject;
     bundle.Reporting.Designer.Utils = reporting_designer_utils_namespaceObject;