devexpress-reporting 25.1.1-alpha → 25.1.2-beta

package/dist/html/templates.html

@@ -353,6 +353,9 @@
         visible: loading,        
         position: { of: '#' + page_id }
      }"></div>
+     <!-- ko if: $data.aiOperationInProgress -->
+        <div data-bind="dxAILoadingPanel: getAILoadingPanelOptions()"></div>
+     <!-- /ko -->
     <div role="img" class="dxrd-report-preview-content dxrd-position-relative dxrd-width-100 dxrd-height-100"  data-bind="attr: {'aria-label': currentPageAriaLabelImgAlt, 'id': page_id }, dxclick: clickToBrick, 'brick-selection-prog': brickSelectionProg">
         <div class="dxrd-report-preview-content-loading-wrapper dxrd-background-white"  data-bind="styleunit: { 'width': width + 2, 'height': height + 2 }, visible: pageLoading">
             <div class="dxrd-report-preview-content-loading-panel dxrd-text-align-center"  data-bind="styleunit: { 'paddingTop': height / 2.3 }">
@@ -395,10 +398,11 @@
                 </div>
             </div>
             <!-- /ko -->
-            <!-- ko if: aiServicesEnabled && aiCustomDocumentStorageId -->
-            <div class="dxrd-report-preview-page-modified">
-                <span data-bind="text: translatedPageBadgeText" class="dxrd-report-preview-page-modified-text"></span>
-            </div>
+            <!-- ko if: aiServicesEnabled && !!aiCustomDocumentStorageId -->
+                <div class="dxrd-report-preview-page-modified">
+                    <span data-bind="text: translatedPageBadgeText" class="dxrd-report-preview-page-modified-text"></span>
+                    <div data-bind="dxButton: { onClick: revertToOriginal, icon: 'revert', width: 22, height: 22 }, attr: { title: revertToOriginalBtnTxt }" class="dxrd-report-preview-page-modified-button"></div>
+                </div>
             <!-- /ko -->
         </div>
     </div>
@@ -563,12 +567,14 @@
                 <div class="dxrd-preview-ai-form-input" id="dxrv-ai-target-select"
                     data-bind="dxSelectBox: getSelectBoxOptions(targetSelectBoxOptions, $element)"></div>
             </div>
-            <div class="dx-field dxrd-preview-ai-select-box">
-                <label class="dxrd-preview-ai-form-label" for="dxrv-ai-language-select"
-                    data-bind="text: targetLanguageText"></label>
-                <div class="dxrd-preview-ai-form-input" id="dxrv-ai-language-select"
-                    data-bind="dxSelectBox: getSelectBoxOptions(languageSelectBoxOptions, $element)"></div>
-            </div>
+            <!-- ko if: languageSelectBoxOptions.visible -->
+                <div class="dx-field dxrd-preview-ai-select-box">
+                    <label class="dxrd-preview-ai-form-label" for="dxrv-ai-language-select"
+                        data-bind="text: targetLanguageText"></label>
+                    <div class="dxrd-preview-ai-form-input" id="dxrv-ai-language-select"
+                        data-bind="dxSelectBox: getSelectBoxOptions(languageSelectBoxOptions, $element)"></div>
+                </div>
+            <!-- /ko -->
             <!-- ko if: pageSelectBoxVisible -->
             <div class="dx-field dxrd-preview-ai-select-box">
                 <label class="dxrd-preview-ai-form-label" for="dxrv-ai-page-select"
@@ -669,7 +675,7 @@
             <div class="dxrd-preview-parameter-actions-container" data-bind="visible: model.showButtons">
                 <div class="dxrd-preview-parameter-action dxrd-preview-loading" data-bind="dxLoadIndicator: { visible: model.parametersLoading }"></div>
                 <!-- ko foreach: model.buttons -->
-                <div class="dxrd-preview-parameter-action dxrdp-parameters-reset dx-accessibility-focus-border-accented" data-bind="dxButton: $data"></div>
+                <div class="dxrd-preview-parameter-action dx-accessibility-focus-border-accented" data-bind="dxButton: $data"></div>
                 <!-- /ko -->
             </div>
         </div>
@@ -771,7 +777,7 @@
             showTitle: false,
             onHiding: function(e) { onExportPopupHiding(); } 
         }">
-            <span data-bind="text: exportTranslatedCodumentWarningMsg" class="dxrd-preview-export-warning-popup-text"></span>                                
+            <span data-bind="text: exportTranslatedDodumentWarningMsg" class="dxrd-preview-export-warning-popup-text"></span>                                
             <div class="dxrd-preview-export-warning-popup-button-group">
                 <div class="dxrd-preview-export-warning-popup-button dx-button-default"
                     data-bind="dxButton: { text: exportTranslatedDocumentButtonText, onClick: exportTranslatedHandler }">
@@ -2500,13 +2506,31 @@
             <!-- ko with: value -->
             <div class="dx-field-label dxd-text-primary" data-bind="text: tableName"></div>
             <!-- ko if: $data.filterString() !== null -->
-            <div class="dx-field-value dxrd-margin-right-5px"  data-bind="dxFilterEditor: { options: filterString, fieldListProvider: $root.dataBindingsProvider, getDisplayNameByPath: $root.getDisplayNameByPath }"></div>
+            <div class="dx-field-value dxrd-margin-right-5px"  data-bind="dxFilterEditor: { options: filterString, fieldListProvider: $root.dataBindingsProvider, getDisplayNameByPath: $root.getDisplayNameByPath, aiExpressionGenerator: $root.aiExpressionGenerator }"></div>
             <!-- /ko -->
             <!-- /ko -->
         </div>
     </div>
 </div>
 </script>
+<script type='text/html' id='dxrd-aipanelwrapper'>
+<div class="dxrd-properties-wrapper dxrd-height-100 dxrd-overflow-hidden dxrd-aipanel" data-bind="visible: active && visible" >
+    <!-- ko if: model.visible -->
+    <div class="dxrd-right-panel-header dxd-text-primary">
+        <div class="dxrd-right-panel-floating-header" data-bind="text: text"></div>
+        <!-- ko with: model -->
+        <!-- ko if: fakePreviewButtonVisible -->
+        <div class="dxrd-right-panel-header-button" data-bind="dxButtonWithTemplate: { onClick: showPreviewWithFakeData, text: fakePreviewButtonText, icon: 'dxrd-svg-operations-ai', iconClass: 'dx-image-ai' }, attr: { title: fakePreviewButtonTitle }">
+        </div>
+        <!-- /ko -->
+        <!-- /ko -->
+    </div>
+
+    <div class="dxrd-properties-grid dxd-border-primary dxrd-top-80px" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true }" >
+
+    </div>
+    <!-- /ko -->
+</div></script>
 <script type='text/html' id='dxrd-coordinategrid'>
 <svg data-bind="style: { 'height': height() + 'px',  'width': width() + 'px' }, attr: { viewBox: '0 0 ' + width() + ' ' + height() }">
     <g transform="translate(0, 0)">
@@ -2589,9 +2613,9 @@
 <div class="dxrd-fieldslist-wrapper dxrd-height-100 dxrd-overflow-hidden" data-bind="visible: active && visible" >
     <!-- ko with: model -->
     <div class="dxrd-right-panel-header dxd-text-primary">
-        <div class="dxrd-fieldslist-wrapper-header" data-bind="text: $root.getLocalization('Field List', 'ReportStringId.UD_Title_FieldList')"></div>
+        <div class="dxrd-fieldslist-wrapper-header dxrd-right-panel-floating-header" data-bind="text: $root.getLocalization('Field List', 'ReportStringId.UD_Title_FieldList')"></div>
         <!-- ko if: $data.allowAddDataSource -->
-        <div id="btn-add-dataSource" data-bind="dxButtonWithTemplate: { onClick: startWizard, visible: visible(), text: addDataSourceButtonText, icon: 'dxrd-svg-operations-add', iconClass: 'dx-image-add' }, attr: { title: addDataSourceButtonText }">
+        <div id="btn-add-dataSource" class="dxrd-right-panel-header-button" data-bind="dxButtonWithTemplate: { onClick: startWizard, visible: visible(), text: addDataSourceButtonText, icon: 'dxrd-svg-operations-add', iconClass: 'dx-image-add' }, attr: { title: addDataSourceButtonText }">
         </div>
         <!-- /ko -->
     </div>
@@ -2665,7 +2689,7 @@
                                  disabled: isDisabled(), 
                                  icon: icon, 
                                  iconClass: iconClass },
-                                 attr: { title: $root.getLocalization('Translate', 'ASPxReportsStringId.ReportDesigner_LocalizationEditorTranslate') }"></div>
+                                 attr: { title: $root.getLocalization('Localize with AI', 'ASPxReportsStringId.ReportDesigner_LocalizationEditorTranslate') }"></div>
                             <!-- /ko -->
                             <!-- /ko -->
                             <div class="dxrd-localization-panel-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dxd-back-primary2 dx-button-has-text" data-bind="dxButtonWithTemplate: { onClick: clearLocalization, 
@@ -2698,13 +2722,7 @@
                     <!-- /ko -->
                 </div>
             </div>
-            <div data-bind="dxLoadPanel:{
-            visible: showLoadIndicator,
-            shading: true,
-            position: { of: getLoadPanelPosition($element) },
-            showIndicator: true,
-            showPane: true,
-            shadingColor: 'rgba(0,0,0,0.4)'}"></div>
+            <div data-bind="dxAILoadingPanel: getLoadPanelOptions($element)"></div>
         </div>
     </div>
     <!-- /ko -->
@@ -3281,8 +3299,13 @@
 </script>
 
 <script type="text/html" id="dxrd-toolbar-two-way-switch-clickable">
-    <div role="button" class="dx-accessibility-toolbar-item dx-accessibility-focus-border-accented" data-bind="visible: $data.visible, attr: { 'aria-label': $data.displayText && $data.displayText() || $data.text, 'aria-disabled': ko.unwrap($data.disabled) ? 'true' : 'false', 'aria-pressed': $data.selected ? ($data.selected() ? 'true' : 'false') : null }" >
+    <div role="button" data-bind="class: 'dx-accessibility-toolbar-item dx-accessibility-focus-border-accented dxd-border-primary ' + (ko.unwrap($data.imageTemplateName) && 'dxrd-switch-button-with-icon' || ''), visible: $data.visible, attr: { 'aria-label': $data.displayText && $data.displayText() || $data.text, 'aria-disabled': ko.unwrap($data.disabled) ? 'true' : 'false', 'aria-pressed': $data.selected ? ($data.selected() ? 'true' : 'false') : null }" >
+        <!-- ko ifnot: $data.imageTemplateName -->
         <div data-bind="text: $data.displayText && $data.displayText() || $data.text, attr: { title: $data.displayText && $data.displayText() || $data.text, class: 'dxd-text-primary dxd-back-highlighted ' + (ko.unwrap($data.imageClassName) || '') }, dxclick: function() { if((typeof $data.disabled === 'function') && !$data.disabled() || !$data.disabled) { $data.clickAction($root.model && $root.model()); } }, css: {'dxrd-disabled-button': $data.disabled }"></div>
+        <!-- /ko -->
+        <!-- ko if: $data.imageTemplateName -->
+        <div data-bind="template: $data.imageTemplateName, attr: { title: $data.displayText && $data.displayText() || $data.text, class: 'dxrd-switch-icon dxd-back-highlighted ' + (ko.unwrap($data.imageClassName) || '') }, dxclick: function() { if((typeof $data.disabled === 'function') && !$data.disabled() || !$data.disabled) { $data.clickAction($root.model && $root.model()); } }, css: {'dxrd-disabled-button': $data.disabled }"></div>
+        <!-- /ko -->
     </div>
 </script>
 <script type="text/html" id="dxrd-context-menu">
@@ -3690,7 +3713,7 @@
 
 <script type="text/html" id="dxrd-pivotcriteria">
     <!-- ko with: $data.wrapModel($root.fieldListProvider) -->
-    <div data-bind="dxFilterEditor: { options: value, fieldListProvider: itemsProvider, getDisplayNameByPath: $root.getDisplayNameByPath, displayNameProvider: displayNameProvider }"></div>
+    <div data-bind="dxFilterEditor: { options: value, fieldListProvider: itemsProvider, getDisplayNameByPath: $root.getDisplayNameByPath, displayNameProvider: displayNameProvider, aiExpressionGenerator: $root.aiExpressionGenerator }"></div>
     <!-- /ko -->
 </script>
 
@@ -3741,6 +3764,24 @@
             <div class="dx-culture" data-bind="text: displayValue, style: { 'fontWeight': $root.isLocalized($data.value) ? 'bold' : 'normal' }, attr: { title: displayValue }"></div>
         </div>
     </div>
+</script>
+
+<script type="text/html" id="dxrd-tagbox">
+    <div data-bind="dxTagBox: { 
+        dataSource: getValues(), 
+        value: editorValue, 
+        valueExpr: 'value', 
+        displayExpr: 'displayValue', 
+        disabled: disabled, 
+        dropDownOptions: { container: $root.getPopupContainer($element) }, 
+        useItemTextAsTitle: true, 
+        multiline: false, 
+        showSelectionControls: true,
+        showDropDownButton: true, 
+        selectAllText: selectAllText,
+        maxDisplayedTags: maxDisplayedTags,
+        onMultiTagPreparing: onMultiTagPreparing,
+    }"></div>
 </script><script type="text/html" id="dxrd-page-choose-report-type">
     <div class="dxrd-wizard-type-page" data-bind="css: $data._extendCssClass('type-page')">
         <div class="dxrd-wizard-report-gallery" data-bind="dxList: getListOptions()"></div>
@@ -3790,7 +3831,27 @@
             </div>
         </div>
     </div>
-</script><script type="text/html" id="dxrd-page-colorScheme-content">
+</script><script type="text/html" id="dxrd-page-ai-report-layout">
+    <div class="dxrd-wizard-type-page dxrd-page-ai-report-layout">
+        <!-- ko if: _showDataStructure -->
+        <div class="dxrd-ai-layout-section dxrd-ai-data-structure">
+            <div class="dxrd-ai-layout-section-title" data-bind="text: _dataStructureSectionTitle"></div>
+            <div class="dxrd-ai-layout-section-content dxrd-wizard-page-treelist-accordion-style dxd-border-secondary" data-bind="dxScrollView: { showScrollbar: 'onHover', height: 'auto' }">
+                <div data-bind="treelist: _fieldListModel"></div>
+            </div>
+        </div>
+        <!-- /ko -->
+        <div class="dxrd-ai-layout-section dxrd-ai-report-prompt">
+            <div class="dxrd-ai-layout-section-title" data-bind="text: _promptSectionTitle"></div>
+            <div class="dxrd-ai-layout-section-content dxd-border-secondary" data-bind="dxTextArea: _getPromptTextAreaOptions()"></div>
+        </div>
+        <div class="dxrd-ai-layout-section dxrd-ai-report-prompt-suggestions">
+            <div class="dxrd-ai-layout-section-title" data-bind="text: _suggestionsSectionTitle"></div>
+            <div class="dxrd-ai-layout-section-content dxd-border-secondary" data-bind="dxList: _getSuggentionListOptions()"></div>
+        </div>
+    </div>
+</script>
+<script type="text/html" id="dxrd-page-colorScheme-content">
     <div class="dxrd-page-color-scheme">
         <!-- ko foreach: _lookupData.scheme -->
         <div class="dxrd-page-color-scheme-tile" data-bind="click: function () { $parent._applyScheme($data); }, style: { backgroundColor: color }">