PivotGrid: deprecate loadPanel.indicatorSrc option

packages/devextreme-angular/src/ui/pivot-grid/index.ts

@@ -24,6 +24,7 @@ import type { PivotGridDataFieldArea, CellClickEvent, CellPreparedEvent, Content
 import type { default as PivotGridDataSource, PivotGridDataSourceOptions } from 'devextreme/ui/pivot_grid/data_source';
 import type { ApplyChangesMode, HeaderFilterSearchConfig, StateStoreType } from 'devextreme/common/grids';
 import type { FieldChooserLayout, ScrollMode, Mode } from 'devextreme/common';
+import type { LoadPanelIndicatorProperties } from 'devextreme/ui/load_panel';
 
 import DxPivotGrid from 'devextreme/ui/pivot_grid';
 
@@ -55,6 +56,7 @@ import { DxoPivotGridFieldPanelModule } from 'devextreme-angular/ui/pivot-grid/n
 import { DxoPivotGridFieldPanelTextsModule } from 'devextreme-angular/ui/pivot-grid/nested';
 import { DxoPivotGridHeaderFilterModule } from 'devextreme-angular/ui/pivot-grid/nested';
 import { DxoPivotGridHeaderFilterTextsModule } from 'devextreme-angular/ui/pivot-grid/nested';
+import { DxoPivotGridIndicatorOptionsModule } from 'devextreme-angular/ui/pivot-grid/nested';
 import { DxoPivotGridLoadPanelModule } from 'devextreme-angular/ui/pivot-grid/nested';
 import { DxoPivotGridPivotGridTextsModule } from 'devextreme-angular/ui/pivot-grid/nested';
 import { DxoPivotGridScrollingModule } from 'devextreme-angular/ui/pivot-grid/nested';
@@ -296,10 +298,10 @@ export class DxPivotGridComponent extends DxComponent implements OnDestroy, OnCh
 
      */
     @Input()
-    get loadPanel(): { enabled?: boolean, height?: number, indicatorSrc?: string, shading?: boolean, shadingColor?: string, showIndicator?: boolean, showPane?: boolean, text?: string, width?: number } {
+    get loadPanel(): { enabled?: boolean, height?: number, indicatorOptions?: LoadPanelIndicatorProperties, indicatorSrc?: string, shading?: boolean, shadingColor?: string, showIndicator?: boolean, showPane?: boolean, text?: string, width?: number } {
         return this._getOption('loadPanel');
     }
-    set loadPanel(value: { enabled?: boolean, height?: number, indicatorSrc?: string, shading?: boolean, shadingColor?: string, showIndicator?: boolean, showPane?: boolean, text?: string, width?: number }) {
+    set loadPanel(value: { enabled?: boolean, height?: number, indicatorOptions?: LoadPanelIndicatorProperties, indicatorSrc?: string, shading?: boolean, shadingColor?: string, showIndicator?: boolean, showPane?: boolean, text?: string, width?: number }) {
         this._setOption('loadPanel', value);
     }
 
@@ -679,7 +681,7 @@ export class DxPivotGridComponent extends DxComponent implements OnDestroy, OnCh
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
 
      */
-    @Output() loadPanelChange: EventEmitter<{ enabled?: boolean, height?: number, indicatorSrc?: string, shading?: boolean, shadingColor?: string, showIndicator?: boolean, showPane?: boolean, text?: string, width?: number }>;
+    @Output() loadPanelChange: EventEmitter<{ enabled?: boolean, height?: number, indicatorOptions?: LoadPanelIndicatorProperties, indicatorSrc?: string, shading?: boolean, shadingColor?: string, showIndicator?: boolean, showPane?: boolean, text?: string, width?: number }>;
 
     /**
 
@@ -902,6 +904,7 @@ export class DxPivotGridComponent extends DxComponent implements OnDestroy, OnCh
     DxoPivotGridFieldPanelTextsModule,
     DxoPivotGridHeaderFilterModule,
     DxoPivotGridHeaderFilterTextsModule,
+    DxoPivotGridIndicatorOptionsModule,
     DxoPivotGridLoadPanelModule,
     DxoPivotGridPivotGridTextsModule,
     DxoPivotGridScrollingModule,
@@ -929,6 +932,7 @@ export class DxPivotGridComponent extends DxComponent implements OnDestroy, OnCh
     DxoPivotGridFieldPanelTextsModule,
     DxoPivotGridHeaderFilterModule,
     DxoPivotGridHeaderFilterTextsModule,
+    DxoPivotGridIndicatorOptionsModule,
     DxoPivotGridLoadPanelModule,
     DxoPivotGridPivotGridTextsModule,
     DxoPivotGridScrollingModule,

packages/devextreme-angular/src/ui/pivot-grid/nested/index.ts

@@ -5,6 +5,7 @@ export * from './field-panel-texts';
 export * from './field-panel';
 export * from './header-filter-texts';
 export * from './header-filter';
+export * from './indicator-options';
 export * from './load-panel';
 export * from './pivot-grid-texts';
 export * from './scrolling';

packages/devextreme-angular/src/ui/pivot-grid/nested/indicator-options.ts

@@ -0,0 +1,99 @@
+/* tslint:disable:max-line-length */
+
+
+import {
+    Component,
+    OnInit,
+    OnDestroy,
+    NgModule,
+    Host,
+    SkipSelf,
+    Input
+} from '@angular/core';
+
+
+
+
+import type { LoadingAnimationType } from 'devextreme/ui/load_indicator';
+
+import {
+    DxIntegrationModule,
+    NestedOptionHost,
+} from 'devextreme-angular/core';
+import { NestedOption } from 'devextreme-angular/core';
+
+
+@Component({
+    selector: 'dxo-pivot-grid-indicator-options',
+    template: '',
+    styles: [''],
+    imports: [ DxIntegrationModule ],
+    providers: [NestedOptionHost]
+})
+export class DxoPivotGridIndicatorOptionsComponent extends NestedOption implements OnDestroy, OnInit  {
+    @Input()
+    get animationType(): LoadingAnimationType {
+        return this._getOption('animationType');
+    }
+    set animationType(value: LoadingAnimationType) {
+        this._setOption('animationType', value);
+    }
+
+    @Input()
+    get height(): number | string | undefined {
+        return this._getOption('height');
+    }
+    set height(value: number | string | undefined) {
+        this._setOption('height', value);
+    }
+
+    @Input()
+    get src(): string {
+        return this._getOption('src');
+    }
+    set src(value: string) {
+        this._setOption('src', value);
+    }
+
+    @Input()
+    get width(): number | string | undefined {
+        return this._getOption('width');
+    }
+    set width(value: number | string | undefined) {
+        this._setOption('width', value);
+    }
+
+
+    protected get _optionPath() {
+        return 'indicatorOptions';
+    }
+
+
+    constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
+            @Host() optionHost: NestedOptionHost) {
+        super();
+        parentOptionHost.setNestedOption(this);
+        optionHost.setHost(this, this._fullOptionPath.bind(this));
+    }
+
+
+    ngOnInit() {
+        this._addRecreatedComponent();
+    }
+
+    ngOnDestroy() {
+        this._addRemovedOption(this._getOptionPath());
+    }
+
+
+}
+
+@NgModule({
+  imports: [
+    DxoPivotGridIndicatorOptionsComponent
+  ],
+  exports: [
+    DxoPivotGridIndicatorOptionsComponent
+  ],
+})
+export class DxoPivotGridIndicatorOptionsModule { }

packages/devextreme-angular/src/ui/pivot-grid/nested/load-panel.ts

@@ -14,6 +14,7 @@ import {
 
 
 
+import type { LoadPanelIndicatorProperties } from 'devextreme/ui/load_panel';
 
 import {
     DxIntegrationModule,
@@ -46,6 +47,14 @@ export class DxoPivotGridLoadPanelComponent extends NestedOption implements OnDe
         this._setOption('height', value);
     }
 
+    @Input()
+    get indicatorOptions(): LoadPanelIndicatorProperties {
+        return this._getOption('indicatorOptions');
+    }
+    set indicatorOptions(value: LoadPanelIndicatorProperties) {
+        this._setOption('indicatorOptions', value);
+    }
+
     @Input()
     get indicatorSrc(): string {
         return this._getOption('indicatorSrc');

packages/devextreme-metadata/make-angular-metadata.ts

@@ -59,6 +59,7 @@ Ng.makeMetadata({
     removeMembers(/\/drop_down_editor\/ui.drop_down_editor:FieldAddons/),
     removeMembers(/\/load_panel:dxLoadPanelOptions.indicatorOptions/),
     removeMembers(/\/grids:LoadPanel.indicatorOptions/),
+    removeMembers(/\/pivot_grid:dxPivotGridOptions.loadPanel.indicatorOptions/),
     removeMembers(/\/scheduler:Toolbar/),
     removeMembers(/\/scheduler:dxSchedulerOptions\.editing\.form/),
     removeMembers(/\/scheduler:dxSchedulerOptions\.editing\.popup/),

packages/devextreme-react/src/pivot-grid.ts

@@ -11,6 +11,8 @@ import NestedOption from "./core/nested-option";
 import type { CellClickEvent, CellPreparedEvent, ContentReadyEvent, ContextMenuPreparingEvent, DisposingEvent, ExportingEvent, InitializedEvent } from "devextreme/ui/pivot_grid";
 import type { ApplyChangesMode, HeaderFilterSearchConfig, StateStoreType } from "devextreme/common/grids";
 import type { FieldChooserLayout, ScrollMode, Mode, SearchMode } from "devextreme/common";
+import type { LoadingAnimationType } from "devextreme/ui/load_indicator";
+import type { LoadPanelIndicatorProperties } from "devextreme/ui/load_panel";
 
 type ReplaceFieldTypes<TSource, TReplacement> = {
   [P in keyof TSource]: P extends keyof TReplacement ? TReplacement[P] : TSource[P];
@@ -257,11 +259,33 @@ const HeaderFilterTexts = Object.assign<typeof _componentHeaderFilterTexts, Nest
   componentType: "option",
 });
 
+// owners:
+// LoadPanel
+type IIndicatorOptionsProps = React.PropsWithChildren<{
+  animationType?: LoadingAnimationType;
+  height?: number | string | undefined;
+  src?: string;
+  width?: number | string | undefined;
+}>
+const _componentIndicatorOptions = (props: IIndicatorOptionsProps) => {
+  return React.createElement(NestedOption<IIndicatorOptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "indicatorOptions",
+    },
+  });
+};
+
+const IndicatorOptions = Object.assign<typeof _componentIndicatorOptions, NestedComponentMeta>(_componentIndicatorOptions, {
+  componentType: "option",
+});
+
 // owners:
 // PivotGrid
 type ILoadPanelProps = React.PropsWithChildren<{
   enabled?: boolean;
   height?: number;
+  indicatorOptions?: LoadPanelIndicatorProperties;
   indicatorSrc?: string;
   shading?: boolean;
   shadingColor?: string;
@@ -275,6 +299,9 @@ const _componentLoadPanel = (props: ILoadPanelProps) => {
     ...props,
     elementDescriptor: {
       OptionName: "loadPanel",
+      ExpectedChildren: {
+        indicatorOptions: { optionName: "indicatorOptions", isCollectionItem: false }
+      },
     },
   });
 };
@@ -436,6 +463,8 @@ export {
   IHeaderFilterProps,
   HeaderFilterTexts,
   IHeaderFilterTextsProps,
+  IndicatorOptions,
+  IIndicatorOptionsProps,
   LoadPanel,
   ILoadPanelProps,
   PivotGridTexts,

packages/devextreme-vue/src/pivot-grid.ts

@@ -30,6 +30,12 @@ import {
  Mode,
  SearchMode,
 } from "devextreme/common";
+import {
+ LoadingAnimationType,
+} from "devextreme/ui/load_indicator";
+import {
+ LoadPanelIndicatorProperties,
+} from "devextreme/ui/load_panel";
 import { prepareConfigurationComponentConfig } from "./core/index";
 
 type AccessibleOptions = Pick<Properties,
@@ -385,12 +391,36 @@ const DxHeaderFilterTexts = defineComponent(DxHeaderFilterTextsConfig);
 
 (DxHeaderFilterTexts as any).$_optionName = "texts";
 
+const DxIndicatorOptionsConfig = {
+  emits: {
+    "update:isActive": null,
+    "update:hoveredElement": null,
+    "update:animationType": null,
+    "update:height": null,
+    "update:src": null,
+    "update:width": null,
+  },
+  props: {
+    animationType: String as PropType<LoadingAnimationType>,
+    height: [Number, String],
+    src: String,
+    width: [Number, String]
+  }
+};
+
+prepareConfigurationComponentConfig(DxIndicatorOptionsConfig);
+
+const DxIndicatorOptions = defineComponent(DxIndicatorOptionsConfig);
+
+(DxIndicatorOptions as any).$_optionName = "indicatorOptions";
+
 const DxLoadPanelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
     "update:enabled": null,
     "update:height": null,
+    "update:indicatorOptions": null,
     "update:indicatorSrc": null,
     "update:shading": null,
     "update:shadingColor": null,
@@ -402,6 +432,7 @@ const DxLoadPanelConfig = {
   props: {
     enabled: Boolean,
     height: Number,
+    indicatorOptions: Object as PropType<LoadPanelIndicatorProperties | Record<string, any>>,
     indicatorSrc: String,
     shading: Boolean,
     shadingColor: String,
@@ -417,6 +448,9 @@ prepareConfigurationComponentConfig(DxLoadPanelConfig);
 const DxLoadPanel = defineComponent(DxLoadPanelConfig);
 
 (DxLoadPanel as any).$_optionName = "loadPanel";
+(DxLoadPanel as any).$_expectedChildren = {
+  indicatorOptions: { isCollectionItem: false, optionName: "indicatorOptions" }
+};
 
 const DxPivotGridTextsConfig = {
   emits: {
@@ -595,6 +629,7 @@ export {
   DxFieldPanelTexts,
   DxHeaderFilter,
   DxHeaderFilterTexts,
+  DxIndicatorOptions,
   DxLoadPanel,
   DxPivotGridTexts,
   DxScrolling,

packages/devextreme/js/ui/pivot_grid.d.ts

@@ -34,6 +34,8 @@ import {
     StateStoreType,
 } from '../common/grids';
 
+import { LoadPanelIndicatorProperties } from './load_panel';
+
 export {
     ApplyChangesMode,
     FieldChooserLayout,
@@ -480,8 +482,13 @@ export interface dxPivotGridOptions extends WidgetOptions<dxPivotGrid> {
       /**
        * @docid
        * @default ""
+       * @deprecated dxPivotGridOptions.loadPanel.indicatorOptions
        */
       indicatorSrc?: string;
+      /**
+       * @docid
+       */
+      indicatorOptions?: LoadPanelIndicatorProperties;
       /**
        * @docid
        * @default false

packages/devextreme/ts/dx.all.d.ts

@@ -24701,8 +24701,13 @@ declare module DevExpress.ui {
       height?: number;
       /**
        * [descr:dxPivotGridOptions.loadPanel.indicatorSrc]
+       * @deprecated [depNote:dxPivotGridOptions.loadPanel.indicatorSrc]
        */
       indicatorSrc?: string;
+      /**
+       * [descr:dxPivotGridOptions.loadPanel.indicatorOptions]
+       */
+      indicatorOptions?: DevExpress.ui.dxLoadPanel.LoadPanelIndicatorProperties;
       /**
        * [descr:dxPivotGridOptions.loadPanel.shading]
        */