npm - devexpress-reporting - Versions diffs - 23.1.9-build-2440-1329 → 23.1.9-build-2447-1208 - Mend

devexpress-reporting 23.1.9-build-2440-1329 → 23.1.9-build-2447-1208

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1385) hide show

package/dist/css/dx-reportdesigner.css CHANGED Viewed

@@ -1,7 +1,7 @@
 /**
 * DevExpress HTML/JS Reporting (dist\css\dx-reportdesigner.css)
-* Version:  23.1.9-build-2440-1329
-* Build date: Feb 9, 2024
+* Version:  23.1.9-build-2447-1208
+* Build date: Feb 16, 2024
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */
@@ -2726,6 +2726,12 @@
   text-overflow: ellipsis;
   max-width: calc(100% - 80px);
 }
+.dx-designer .dx-rtl .dxrd-error-panel .dxrd-error-panel-header .dxrd-error-panel-header-collapse {
+  float: left;
+}
+.dx-designer .dx-rtl .dxrd-error-panel .dxrd-error-panel-header .dxrd-error-panel-header-title {
+  float: right;
+}
 .dx-designer .dxrd-error-panel {
   height: 210px;
   position: absolute;
@@ -2916,7 +2922,6 @@
   position: relative;
 }
 .dxrd-designer-wrapper .dxrd-surface-wrapper .dxrd-surface .dxrd-control-smart-tags {
-  width: 22px;
   top: 0px;
   position: absolute;
   z-index: 1;
@@ -2925,8 +2930,6 @@
   margin-bottom: 5px;
   border-radius: 0;
   left: 0;
-  width: 22px;
-  height: 22px;
 }
 .dxrd-designer-wrapper .dxrd-surface-wrapper .dxrd-surface .dxrd-bands-panel-wrapper {
   position: absolute;
@@ -4286,12 +4289,20 @@
 .dxrd-expressioneditor-popup-content .dxrd-expressioneditor-properties .dxrd-expressioneditor-properties-content-wrapper .dx-accordion-content {
   padding-left: 20px;
 }
+.dx-rtl .dxrd-expressioneditor-popup-content .dxrd-expressioneditor-properties .dxrd-expressioneditor-properties-content-wrapper .dx-accordion-content {
+  padding-right: 20px;
+  padding-left: 0;
+}
 .dxrd-expressioneditor-popup-content .dxrd-expressioneditor-properties .dxrd-expressioneditor-properties-content-wrapper .dxrd-expressioneditor-property {
   height: 23px;
   line-height: 23px;
   padding-left: 5px;
   font-size: 11px;
 }
+.dx-rtl .dxrd-expressioneditor-popup-content .dxrd-expressioneditor-properties .dxrd-expressioneditor-properties-content-wrapper .dxrd-expressioneditor-property {
+  padding-right: 5px;
+  padding-left: 0;
+}
 .dxrd-expressioneditor-popup-content .dxrd-expressioneditor-properties .dxrd-expressioneditor-properties-content-wrapper .dxrd-expressioneditor-property .dxrd-expressioneditor-property-text {
   display: inline-block;
   overflow: hidden;
@@ -4316,6 +4327,10 @@
   padding-left: 5px;
   font-size: 11px;
 }
+.dx-rtl .dxrd-expressioneditor-popup-content .dxrd-expressioneditor-properties .dxrd-expressioneditor-properties-content-wrapper .dx-expressioneditor-property-accordion-header {
+  padding-right: 5px;
+  padding-left: 0;
+}
 .dxrd-expressioneditor-popup-content .dxrd-expressioneditor-properties .dxrd-expressioneditor-properties-content-wrapper .dx-expressioneditor-property-accordion-header .dxrd-expressioneditor-property-text {
   display: inline-block;
   overflow: hidden;

package/dist/css/dx-reporting-skeleton-screen.css CHANGED Viewed

@@ -1,7 +1,7 @@
 /**
 * DevExpress HTML/JS Reporting (dist\css\dx-reporting-skeleton-screen.css)
-* Version:  23.1.9-build-2440-1329
-* Build date: Feb 9, 2024
+* Version:  23.1.9-build-2447-1208
+* Build date: Feb 16, 2024
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */

package/dist/css/dx-webdocumentviewer.css CHANGED Viewed

@@ -1,7 +1,7 @@
 /**
 * DevExpress HTML/JS Reporting (dist\css\dx-webdocumentviewer.css)
-* Version:  23.1.9-build-2440-1329
-* Build date: Feb 9, 2024
+* Version:  23.1.9-build-2447-1208
+* Build date: Feb 16, 2024
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */
@@ -1070,6 +1070,28 @@
 .dx-accessibility .dx-collectioneditor .dx-scrollable-content {
   padding-top: 6px;
 }
+.dx-designer .dxrd-designer-wrapper.dxrd-designer.dx-rtl .dxrd-toolbar-wrapper {
+  left: 0;
+  right: 64px;
+}
+.dx-designer .dxrd-designer-wrapper.dxrd-designer.dx-rtl .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item.dxrd-toolbar-item-0 {
+  margin-right: auto;
+  margin-left: unset;
+}
+.dx-designer .dxrd-designer-wrapper.dxrd-designer.dx-rtl .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item.dxrd-toolbar-two-way-switch {
+  margin: auto auto auto 13px;
+}
+.dx-designer .dxrd-designer-wrapper.dxrd-designer.dx-rtl .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item.dxrd-toolbar-item-with-separator {
+  margin-right: 19px;
+  margin-left: unset;
+}
+.dx-designer .dxrd-designer-wrapper.dxrd-designer.dx-rtl .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item.dxrd-toolbar-item-with-separator:before {
+  border-right-width: 1px;
+  border-right-style: solid;
+  border-left-width: 0px;
+  margin-right: -14px;
+  float: right;
+}
 .dx-designer .dxrd-designer-wrapper.dxrd-designer .dxrd-tab-panel-wrapper,
 .dx-designer .dxrd-designer-wrapper.dxrd-designer-preview .dxrd-tab-panel-wrapper {
   margin-top: 64px;
@@ -1085,11 +1107,6 @@
   left: 64px;
   right: 0;
 }
-.dx-rtl.dx-designer .dxrd-designer-wrapper.dxrd-designer .dxrd-toolbar-wrapper,
-.dx-rtl.dx-designer .dxrd-designer-wrapper.dxrd-designer-preview .dxrd-toolbar-wrapper {
-  left: 0;
-  right: 64px;
-}
 .dx-designer .dxrd-designer-wrapper.dxrd-designer .dxrd-toolbar-wrapper .dxrd-toolbar-item-separator,
 .dx-designer .dxrd-designer-wrapper.dxrd-designer-preview .dxrd-toolbar-wrapper .dxrd-toolbar-item-separator {
   display: none;
@@ -1128,8 +1145,8 @@
 .dx-designer .dxrd-designer-wrapper.dxrd-designer-preview .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item.dxrd-toolbar-item-0 {
   margin-left: auto;
 }
-.dx-designer .dxrd-designer-wrapper.dxrd-designer .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item.dxrd-toolbar-item.dxrd-toolbar-two-way-switch,
-.dx-designer .dxrd-designer-wrapper.dxrd-designer-preview .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item.dxrd-toolbar-item.dxrd-toolbar-two-way-switch {
+.dx-designer .dxrd-designer-wrapper.dxrd-designer .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item.dxrd-toolbar-two-way-switch,
+.dx-designer .dxrd-designer-wrapper.dxrd-designer-preview .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item.dxrd-toolbar-two-way-switch {
   min-width: 200px;
   margin: auto 13px auto auto;
   padding: 0px;
@@ -1140,13 +1157,13 @@
   line-height: 34px;
   text-transform: uppercase;
 }
-.dx-designer .dxrd-designer-wrapper.dxrd-designer .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item.dxrd-toolbar-item.dxrd-toolbar-two-way-switch > div,
-.dx-designer .dxrd-designer-wrapper.dxrd-designer-preview .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item.dxrd-toolbar-item.dxrd-toolbar-two-way-switch > div {
+.dx-designer .dxrd-designer-wrapper.dxrd-designer .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item.dxrd-toolbar-two-way-switch > div,
+.dx-designer .dxrd-designer-wrapper.dxrd-designer-preview .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item.dxrd-toolbar-two-way-switch > div {
   width: 50%;
   text-align: center;
 }
-.dx-designer .dxrd-designer-wrapper.dxrd-designer .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item.dxrd-toolbar-item.dxrd-toolbar-two-way-switch [role="button"],
-.dx-designer .dxrd-designer-wrapper.dxrd-designer-preview .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item.dxrd-toolbar-item.dxrd-toolbar-two-way-switch [role="button"] {
+.dx-designer .dxrd-designer-wrapper.dxrd-designer .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item.dxrd-toolbar-two-way-switch [role="button"],
+.dx-designer .dxrd-designer-wrapper.dxrd-designer-preview .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item.dxrd-toolbar-two-way-switch [role="button"] {
   cursor: pointer;
 }
 .dx-designer .dxrd-designer-wrapper.dxrd-designer .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item .dxrd-toolbar-item-image,
@@ -1202,8 +1219,8 @@
 .dx-designer .dxrd-designer-wrapper.dxrd-designer-preview .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item-zoom.dxrd-toolbar-item-0 {
   margin-left: auto;
 }
-.dx-designer .dxrd-designer-wrapper.dxrd-designer .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item-zoom.dxrd-toolbar-item.dxrd-toolbar-two-way-switch,
-.dx-designer .dxrd-designer-wrapper.dxrd-designer-preview .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item-zoom.dxrd-toolbar-item.dxrd-toolbar-two-way-switch {
+.dx-designer .dxrd-designer-wrapper.dxrd-designer .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item-zoom.dxrd-toolbar-two-way-switch,
+.dx-designer .dxrd-designer-wrapper.dxrd-designer-preview .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item-zoom.dxrd-toolbar-two-way-switch {
   min-width: 200px;
   margin: auto 13px auto auto;
   padding: 0px;
@@ -1214,13 +1231,13 @@
   line-height: 34px;
   text-transform: uppercase;
 }
-.dx-designer .dxrd-designer-wrapper.dxrd-designer .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item-zoom.dxrd-toolbar-item.dxrd-toolbar-two-way-switch > div,
-.dx-designer .dxrd-designer-wrapper.dxrd-designer-preview .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item-zoom.dxrd-toolbar-item.dxrd-toolbar-two-way-switch > div {
+.dx-designer .dxrd-designer-wrapper.dxrd-designer .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item-zoom.dxrd-toolbar-two-way-switch > div,
+.dx-designer .dxrd-designer-wrapper.dxrd-designer-preview .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item-zoom.dxrd-toolbar-two-way-switch > div {
   width: 50%;
   text-align: center;
 }
-.dx-designer .dxrd-designer-wrapper.dxrd-designer .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item-zoom.dxrd-toolbar-item.dxrd-toolbar-two-way-switch [role="button"],
-.dx-designer .dxrd-designer-wrapper.dxrd-designer-preview .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item-zoom.dxrd-toolbar-item.dxrd-toolbar-two-way-switch [role="button"] {
+.dx-designer .dxrd-designer-wrapper.dxrd-designer .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item-zoom.dxrd-toolbar-two-way-switch [role="button"],
+.dx-designer .dxrd-designer-wrapper.dxrd-designer-preview .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item-zoom.dxrd-toolbar-two-way-switch [role="button"] {
   cursor: pointer;
 }
 .dx-designer .dxrd-designer-wrapper.dxrd-designer .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item-zoom .dxrd-toolbar-item-image,
@@ -4173,6 +4190,20 @@
 .dx-report-viewer.dx-accessibility .dx-accessibility .dx-collectioneditor .dx-scrollable-content{
   padding-top:0.375rem;
 }
+.dx-designer .dx-report-viewer.dx-accessibility .dxrd-designer-wrapper.dxrd-designer.dx-rtl .dxrd-toolbar-wrapper{
+  right:4rem;
+}
+.dx-designer .dx-report-viewer.dx-accessibility .dxrd-designer-wrapper.dxrd-designer.dx-rtl .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item.dxrd-toolbar-two-way-switch{
+  margin:auto auto auto 0.8125rem;
+}
+.dx-designer .dx-report-viewer.dx-accessibility .dxrd-designer-wrapper.dxrd-designer.dx-rtl .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item.dxrd-toolbar-item-with-separator{
+  margin-right:1.1875rem;
+}
+.dx-designer .dx-report-viewer.dx-accessibility .dxrd-designer-wrapper.dxrd-designer.dx-rtl .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item.dxrd-toolbar-item-with-separator:before{
+  border-right-width:0.0625rem;
+  border-left-width:0rem;
+  margin-right:-0.875rem;
+}
 .dx-designer .dx-report-viewer.dx-accessibility .dxrd-designer-wrapper.dxrd-designer .dxrd-tab-panel-wrapper,
 .dx-designer .dx-report-viewer.dx-accessibility .dxrd-designer-wrapper.dxrd-designer-preview .dxrd-tab-panel-wrapper{
   margin-top:4rem;
@@ -4183,10 +4214,6 @@
   min-width:50rem;
   left:4rem;
 }
-.dx-rtl.dx-designer .dx-report-viewer.dx-accessibility .dxrd-designer-wrapper.dxrd-designer .dxrd-toolbar-wrapper,
-.dx-rtl.dx-designer .dx-report-viewer.dx-accessibility .dxrd-designer-wrapper.dxrd-designer-preview .dxrd-toolbar-wrapper{
-  right:4rem;
-}
 .dx-designer .dx-report-viewer.dx-accessibility .dxrd-designer-wrapper.dxrd-designer .dxrd-toolbar-wrapper .dxrd-toolbar,
 .dx-designer .dx-report-viewer.dx-accessibility .dxrd-designer-wrapper.dxrd-designer-preview .dxrd-toolbar-wrapper .dxrd-toolbar{
   height:4.0625rem;
@@ -4204,8 +4231,8 @@
   height:2rem;
   width:0rem;
 }
-.dx-designer .dx-report-viewer.dx-accessibility .dxrd-designer-wrapper.dxrd-designer .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item.dxrd-toolbar-item.dxrd-toolbar-two-way-switch,
-.dx-designer .dx-report-viewer.dx-accessibility .dxrd-designer-wrapper.dxrd-designer-preview .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item.dxrd-toolbar-item.dxrd-toolbar-two-way-switch{
+.dx-designer .dx-report-viewer.dx-accessibility .dxrd-designer-wrapper.dxrd-designer .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item.dxrd-toolbar-two-way-switch,
+.dx-designer .dx-report-viewer.dx-accessibility .dxrd-designer-wrapper.dxrd-designer-preview .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item.dxrd-toolbar-two-way-switch{
   min-width:12.5rem;
   margin:auto 0.8125rem auto auto;
   padding:0rem;
@@ -4248,8 +4275,8 @@
   height:2rem;
   width:0rem;
 }
-.dx-designer .dx-report-viewer.dx-accessibility .dxrd-designer-wrapper.dxrd-designer .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item-zoom.dxrd-toolbar-item.dxrd-toolbar-two-way-switch,
-.dx-designer .dx-report-viewer.dx-accessibility .dxrd-designer-wrapper.dxrd-designer-preview .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item-zoom.dxrd-toolbar-item.dxrd-toolbar-two-way-switch{
+.dx-designer .dx-report-viewer.dx-accessibility .dxrd-designer-wrapper.dxrd-designer .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item-zoom.dxrd-toolbar-two-way-switch,
+.dx-designer .dx-report-viewer.dx-accessibility .dxrd-designer-wrapper.dxrd-designer-preview .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item-zoom.dxrd-toolbar-two-way-switch{
   min-width:12.5rem;
   margin:auto 0.8125rem auto auto;
   padding:0rem;

package/dist/html/templates.html CHANGED Viewed

@@ -87,7 +87,7 @@
 <script type="text/html" id="dxrd-designer">
-    <div tabindex="-1" data-bind="cssArray: [surfaceClass($element), { 'dx-accessibility': $data.accessibilityCompliant } ]">
+    <div tabindex="-1" data-bind="cssArray: [surfaceClass($element), { 'dx-accessibility': $data.accessibilityCompliant, 'dx-rtl': $data.rtl } ]">
         <div class="dxrd-designer-wrapper dx-editors dxd-surface-back-color dxd-scrollbar-color" data-bind="visible: (!$data.designMode || designMode()), cssArray: [$data.rootStyle, { 'dx-rtl' : $data.rtl, 'dx-ltr': !$data.rtl }]">
             <!-- ko foreach: parts -->
             <!-- ko template: { name: templateName, data: model }-->
@@ -6291,11 +6291,12 @@
         </div>
     </div>
 </script><script type="text/html" id="dxrd-smart-tags">
-    <div class="dxrd-control-smart-tags" data-bind="styleunit: { 'left': $data.position.x, 'top': $data.position.y },
-    style: $root.rtl ? { 'margin-right': margin } : { 'margin-left': margin }, visible: visible">
+    <div class="dxrd-control-smart-tags" data-bind="styleunit: { left: $data.position.x, top: $data.position.y, width: width }, visible: visible">
         <!-- ko foreach: $data.smartTags -->
         <div class="dxrd-control-smart-tag dxd-icon-accented" data-bind="dxButtonWithTemplate: {
             icon: $data.imageTemplateName,
+            width: $parent.width,
+            height: $parent.width,
             iconClass: $data.imageTemplateName },
             event: { dblclick: function(_, event){ event.stopPropagation(); } },
             click: function(_, event){ $data.onClick(); event.stopPropagation(); }">

package/dist/js/dx-reportdesigner.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /**
 * DevExpress HTML/JS Reporting (dist\js\dx-reportdesigner.js)
-* Version:  23.1.9-build-2440-1329
-* Build date: Feb 9, 2024
+* Version:  23.1.9-build-2447-1208
+* Build date: Feb 16, 2024
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */
@@ -26255,14 +26255,15 @@ class _errorPanelViewModel_ErrorPanelViewModel extends external_DevExpress_Analy
         external_DevExpress_ui_dxDataGrid_default.a.length;
         external_DevExpress_ui_dxButtonGroup_default.a.length;
         if (options.position) {
-            this._position = {
-                left: external_ko_["computed"](() => this.collapsed() ? 'auto' : (options.position.left() + this._offset + 'px')),
-                right: external_ko_["computed"](() => options.position.right() + this._offset + 'px'),
-                height: external_ko_["computed"](() => (!this.collapsed() ? this._height() : 42) + 'px')
-            };
-            this._disposables.push(this._position.height);
-            this._disposables.push(this._position.left);
-            this._disposables.push(this._position.right);
+            this._disposables.push(this._position = external_ko_["computed"](() => {
+                const left = this.collapsed() ? 'auto' : (options.position.left() + this._offset);
+                const right = options.position.right() + this._offset;
+                return {
+                    left: options.rtl ? right : left,
+                    right: options.rtl ? left : right,
+                    height: (!this.collapsed() ? this._height() : 42),
+                };
+            }));
         }
         this._disposables.push(this._collectErrorButtonDisabled = external_ko_["computed"](() => {
             return options.undoEngine && options.undoEngine() && options.undoEngine().getCurrentChangeSet().equal(this._latestChangeSet());
@@ -35494,11 +35495,11 @@ class expressionSmartTag_ExpressionSmartTag extends external_DevExpress_Analytic
 class smartTagContainer_SmartTagModel extends external_DevExpress_Analytics_Utils_["Disposable"] {
-    constructor(selection, reportSurface, offset, smartTagFactory) {
+    constructor(selection, reportSurface, offset, smartTagFactory, rtl) {
         super();
-        this.margin = external_ko_["observable"]('');
         this.smartTags = external_ko_["observableArray"]();
         this.visible = external_ko_["observable"](true);
+        this.width = 22;
         this.position = new external_DevExpress_Analytics_Elements_["Point"](0, 0);
         this._disposables.push(selection.focused.subscribe(selectedSurface => {
             var selectedItem = selectedSurface && selectedSurface['_control'];
@@ -35510,30 +35511,33 @@ class smartTagContainer_SmartTagModel extends external_DevExpress_Analytics_Util
             }
         }));
         this._disposables.push(external_ko_["computed"](() => {
-            if (!reportSurface())
+            const surface = reportSurface();
+            if (!surface)
                 return;
-            var selectedSurface = selection.focused();
-            var selectedItem = selectedSurface && selectedSurface['_control'];
+            const selectedSurface = selection.focused();
+            const selectedItem = selectedSurface && selectedSurface['_control'];
             if (selectedItem) {
-                var position = selectedSurface['absoluteRect'] && selectedSurface['absoluteRect']();
+                const position = selectedSurface['absoluteRect'] && selectedSurface['absoluteRect']();
+                const margin = this._getMargin(selectedItem, rtl);
                 if (position) {
-                    this.position.x(position.right + reportSurface().margins.left());
+                    let left = surface.margins.left() + margin;
+                    left += rtl ? position.left : position.right;
+                    this.position.x(left);
                     this.position.y(position.top);
                 }
                 else {
-                    this.position.x(reportSurface()['_width']() + offset());
+                    let left = margin;
+                    left += rtl ? surface._x() : surface._width() + offset();
+                    this.position.x(left);
                     this.position.y(0);
                 }
-                this.margin(this.getMargin(selectedItem));
             }
             this.visible(selectedItem ? !external_ko_["unwrap"](selectedItem.lockedInUserDesigner) : false);
         }).extend(({ rateLimit: { timeout: 1, method: 'notifyWhenChangesStop' } })));
     }
-    getMargin(reportElement) {
-        if (reportElement instanceof xrReport_ReportViewModel)
-            return '3px';
-        var margin = reportElement instanceof xrBand_BandViewModel ? -22 : 9;
-        return margin + 'px';
+    _getMargin(control, rtl) {
+        const controlMargin = control instanceof xrReport_ReportViewModel ? 3 : control instanceof xrBand_BandViewModel ? -this.width : 9;
+        return rtl ? -this.width - controlMargin : controlMargin;
     }
 }
@@ -37567,7 +37571,7 @@ class _inititalizer_ReportDesignerInitializer extends external_DevExpress_Analyt
                 }, position: {
                     left: leftPosition,
                     right: rightPosition
-                } }));
+                }, rtl: this.buildingModel.rtl }));
             errorPanel._disposables.push(rightPosition, leftPosition);
             this._addDisposable(this._reportcontext.subscribe((newVal) => {
                 errorPanel.clear();
@@ -37859,7 +37863,7 @@ class _inititalizer_ReportDesignerInitializer extends external_DevExpress_Analyt
                 return result;
             }
         });
-        var smartTagHelper = new smartTagContainer_SmartTagModel(this._selection, this.buildingModel.surface, this.buildingModel['verticalScrollOffset'], smartTagFactory);
+        var smartTagHelper = new smartTagContainer_SmartTagModel(this._selection, this.buildingModel.surface, this.buildingModel['verticalScrollOffset'], smartTagFactory, this.buildingModel.rtl);
         this.addElement('smartTagModel', () => smartTagHelper);
         this._disposables.push({
             dispose: () => smartTagFactory = {},
@@ -40744,8 +40748,8 @@ Object(external_DevExpress_Analytics_Widgets_Internal_["addToBindingsCache"])('d
 Object(external_DevExpress_Analytics_Widgets_Internal_["addToBindingsCache"])('if: !isMenuCollapsed()', function ($context, $element) { return { 'if': function () { return !$context.$data.isMenuCollapsed(); } }; });
 Object(external_DevExpress_Analytics_Widgets_Internal_["addToBindingsCache"])('if: isMenuCollapsed', function ($context, $element) { return { 'if': function () { return $context.$data.isMenuCollapsed; } }; });
 Object(external_DevExpress_Analytics_Widgets_Internal_["addToBindingsCache"])('if: !$root.isMenuCollapsed()', function ($context, $element) { return { 'if': function () { return !$context.$root.isMenuCollapsed(); } }; });
-Object(external_DevExpress_Analytics_Widgets_Internal_["addToBindingsCache"])('styleunit: { \'left\': $data.position.x, \'top\': $data.position.y }, style: $root.rtl ? { \'margin-right\': margin } : { \'margin-left\': margin }, visible: visible', function ($context, $element) { return { 'styleunit': function () { return { 'left': $context.$data.position.x, 'top': $context.$data.position.y }; }, 'style': function () { return $context.$root.rtl ? { 'margin-right': $context.$data.margin } : { 'margin-left': $context.$data.margin }; }, 'visible': function () { return $context.$data.visible; } }; });
-Object(external_DevExpress_Analytics_Widgets_Internal_["addToBindingsCache"])('dxButtonWithTemplate: { icon: $data.imageTemplateName, iconClass: $data.imageTemplateName }, event: { dblclick: function(_, event){ event.stopPropagation(); } }, click: function(_, event){ $data.onClick(); event.stopPropagation(); }', function ($context, $element) { return { 'dxButtonWithTemplate': function () { return { 'icon': $context.$data.imageTemplateName, 'iconClass': $context.$data.imageTemplateName }; }, 'event': function () { return { 'dblclick': function (_, event) { event.stopPropagation(); } }; }, 'click': function () { return function (_, event) { $context.$data.onClick(); event.stopPropagation(); }; } }; });
+Object(external_DevExpress_Analytics_Widgets_Internal_["addToBindingsCache"])('styleunit: { left: $data.position.x, top: $data.position.y, width: width }, visible: visible', function ($context, $element) { return { 'styleunit': function () { return { 'left': $context.$data.position.x, 'top': $context.$data.position.y, 'width': $context.$data.width }; }, 'visible': function () { return $context.$data.visible; } }; });
+Object(external_DevExpress_Analytics_Widgets_Internal_["addToBindingsCache"])('dxButtonWithTemplate: { icon: $data.imageTemplateName, width: $parent.width, height: $parent.width, iconClass: $data.imageTemplateName }, event: { dblclick: function(_, event){ event.stopPropagation(); } }, click: function(_, event){ $data.onClick(); event.stopPropagation(); }', function ($context, $element) { return { 'dxButtonWithTemplate': function () { return { 'icon': $context.$data.imageTemplateName, 'width': $context.$parent.width, 'height': $context.$parent.width, 'iconClass': $context.$data.imageTemplateName }; }, 'event': function () { return { 'dblclick': function (_, event) { event.stopPropagation(); } }; }, 'click': function () { return function (_, event) { $context.$data.onClick(); event.stopPropagation(); }; } }; });
 Object(external_DevExpress_Analytics_Widgets_Internal_["addToBindingsCache"])('with: $data.expressionEditor', function ($context, $element) { return { 'with': function () { return $context.$data.expressionEditor; } }; });
 Object(external_DevExpress_Analytics_Widgets_Internal_["addToBindingsCache"])('template: { name: \'dxrd-expressioneditor-popup\' }', function ($context, $element) { return { 'template': function () { return { 'name': 'dxrd-expressioneditor-popup' }; } }; });
 Object(external_DevExpress_Analytics_Widgets_Internal_["addToBindingsCache"])('foreach: $data.smartTags', function ($context, $element) { return { 'foreach': function () { return $context.$data.smartTags; } }; });
@@ -41182,7 +41186,7 @@ external_DevExpress_Analytics_Widgets_Internal_["SvgTemplatesEngine"].addTemplat
     'dxrd-savereport-dialog-content-light': '<div class="dxrd-reportdialog-easy-content" data-bind="text: saveText"></div>',
     'dxrd-openreport-dialog-content': '<div class="dxrd-reportdialog-content"> <div class="dx-fieldset"> <div class="dx-field dxd-back-primary"> <div class="dx-property-grid-search-box" data-bind="dxTextBox: { mode: \'search\', height: 36, value: searchValue, valueChangeEvent: \'keyup\', placeholder: searchPlaceholder(), showClearButton: true }"></div> </div> </div> <div class="dx-default-border-style dxd-border-secondary"> <div class="dxrd-reportdialog-urls" data-bind="dxList: { dataSource: urls, selectedItems: [], searchExpr: [\'Value\'], searchValue: searchValue, editEnabled: true, height: 200, editConfig: { selectionEnabled: true }, selectionMode: \'single\', onItemClick: function(e) { this.reportUrl(e.itemData.Key); }, activeStateEnabled: false, nextButtonText: $root.getLocalization(\'More\', \'ASPxReportsStringId.List_More\'), noDataText: $data.noDataText, encodeNoDataText: true }"> <div data-options="dxTemplate : { name: \'item\' }" data-bind="event: { dblclick: function(e){ $parent.onDblClick(e.Key); } }"> <div data-bind="text: $data.Value"></div> </div> </div> </div> </div>',
     'dxrd-menubutton-template': '<div class="dxrd-menubutton-part dxrd-outline-inherit" tabindex="1"  data-bind="cacheElement: { action: function(element){ $data.setMenuElement(element) } }"> <div class="dxrd-menu-container dxrd-menu-fullscreen-nav" data-bind="css: { \'dxrd-menu-fullscreen-nav-collapsed\': isMenuCollapsed()}"> <div class="dx-overlay-wrapper dxd-menu-back-color dxd-back-contrast dxrd-z-index-1002"  data-bind="styleunit: { width: $data.isMenuCollapsed() ? 50 : 300 }, visible: appMenuVisible"> <div class="dx-overlay-content"> <div class="dxrd-report-menu-title dxd-border-primary"> <!-- ko if: !isMenuCollapsed()--> <div class="dxrd-report-menu-button dxrd-report-menu-close-button" data-bind="template: \'dxrd-svg-toolbar-delete\', dxclick: function(e) { toggleAppMenu() }, dxpointerenter: function(_, e) {  e.target.classList &&  e.target.classList.add(\'dxd-state-active\') }, dxpointerleave: function(_, e) {  e.target.classList &&  e.target.classList.remove(\'dxd-state-active\') }"></div> <div class="dxrd-report-menu-title-text dxd-text-primary" data-bind="text: $root.getLocalization(\'Menu\', \'ASPxReportsStringId.ReportDesigner_Menu_Text\')"></div> <!-- /ko --> <!-- ko if: isMenuCollapsed--> <div class="dxrd-report-menu-button dxd-back-highlighted dxrd-report-menu-back-button" data-bind="template: \'dxrd-svg-menu-back\', dxclick: function(e) { isMenuCollapsed(false); }"></div> <!-- /ko --> </div> <!-- ko foreach: actionLists.menuItems --> <div class="dxrd-menu-item dxd-text-primary dxd-list-item-back-color dxd-icon-highlighted" data-bind="dxclick: function(e) { if(disabled && !disabled() || !disabled) { $root.toggleAppMenu(); clickAction($root.model(), e); }}, css: { \'dxrd-disabled-button\': disabled, \'dxd-state-active\': $data.selected }, visible: visible"> <div class="dxrd-menu-item-image" data-bind="css: ko.unwrap($data.imageClassName), template: {name: ko.unwrap($data.imageTemplateName), if: !!ko.unwrap($data.imageTemplateName)}, attr: { title: $data.displayText && $data.displayText() || text }"> </div> <!-- ko if: !$root.isMenuCollapsed() --> <div class="dxrd-menu-item-text" data-bind="text: $data.displayText && $data.displayText() || text, attr: { title: $data.displayText && $data.displayText() || text}"></div> <div class="dxrd-menu-item-separator" data-bind="visible: $data.hasSeparator"></div> <!-- /ko --> </div> <!-- /ko --> </div> </div> </div> <div class="dxrd-menu-button dxd-toolbox-back-color dxd-border-primary dxd-back-secondary-invariant"> <div class="dxrd-menu-button-image dxd-button-back-color dxd-state-normal dxd-back-highlighted" data-bind="dxclick: function(e) { if(stopPropagation) { stopPropagation = false; } else { toggleAppMenu() } }, template: \'dxrd-svg-menu-menu\', css: {\'dxd-state-active\': appMenuVisible }"></div> <div class="dxrd-menu-place dxrd-width-54px" ></div> </div> </div>',
-    'dxrd-smart-tags': '<div class="dxrd-control-smart-tags" data-bind="styleunit: { \'left\': $data.position.x, \'top\': $data.position.y }, style: $root.rtl ? { \'margin-right\': margin } : { \'margin-left\': margin }, visible: visible"> <!-- ko foreach: $data.smartTags --> <div class="dxrd-control-smart-tag dxd-icon-accented" data-bind="dxButtonWithTemplate: { icon: $data.imageTemplateName, iconClass: $data.imageTemplateName }, event: { dblclick: function(_, event){ event.stopPropagation(); } }, click: function(_, event){ $data.onClick(); event.stopPropagation(); }"> </div> <!--ko if: $data.templateName --> <!--ko template: $data.templateName --> <!--/ko--> <!--/ko--> <!-- /ko --> </div>',
+    'dxrd-smart-tags': '<div class="dxrd-control-smart-tags" data-bind="styleunit: { left: $data.position.x, top: $data.position.y, width: width }, visible: visible"> <!-- ko foreach: $data.smartTags --> <div class="dxrd-control-smart-tag dxd-icon-accented" data-bind="dxButtonWithTemplate: { icon: $data.imageTemplateName, width: $parent.width, height: $parent.width, iconClass: $data.imageTemplateName }, event: { dblclick: function(_, event){ event.stopPropagation(); } }, click: function(_, event){ $data.onClick(); event.stopPropagation(); }"> </div> <!--ko if: $data.templateName --> <!--ko template: $data.templateName --> <!--/ko--> <!--/ko--> <!-- /ko --> </div>',
     'dxrd-smart-tag-exressions': '<!--ko with: $data.expressionEditor --> <!--ko template: { name: \'dxrd-expressioneditor-popup\' } --> <!--/ko--> <!--/ko-->',
     'dxrd-reportRtlProperty': '<!-- ko if: !!$root.surface() --> <!-- ko template: { name: $root.dx._static.editorTemplates.getEditor("combobox").header, data: $root.surface().wrapRtlProperty($data, $root.undoEngine, $element) } --> <!-- /ko --> <!-- /ko -->',
     'dxrd-wizard-report-tree': '<div class="dxrd-wizard-report-tree"> <div class="dxrd-wizard-report-tree-title" data-bind="text: $root.getLocalization(\'Select the report\', \'ASPxReportsStringId.ReportDesigner_MasterDetailWizard_SelectReport\')"></div> <div class="dxrd-wizard-report-tree-selectbox" data-bind="dxSelectBox: { dataSource: $data.items, itemTemplate: \'stateItem\', valueExpr: \'path\', displayExpr: \'name\', value: $data.value, dropDownOptions: { container: $root.getPopupContainer($element) }, useItemTextAsTitle: true  }"> <div data-options="dxTemplate:{ name:\'stateItem\' }" class="dxrd-text-align-left"> <div data-bind="text: name, styleunit: {marginLeft: 30 * level}"></div> </div> </div> </div>',