LoadPanel: support sparkle loadIndicator

packages/devextreme-angular/src/ui/card-view/index.ts

@@ -92,6 +92,7 @@ import { DxoCardViewGroupOperationDescriptionsModule } from 'devextreme-angular/
 import { DxoCardViewHeaderFilterModule } from 'devextreme-angular/ui/card-view/nested';
 import { DxoCardViewHeaderPanelModule } from 'devextreme-angular/ui/card-view/nested';
 import { DxoCardViewHideModule } from 'devextreme-angular/ui/card-view/nested';
+import { DxoCardViewIndicatorOptionsModule } from 'devextreme-angular/ui/card-view/nested';
 import { DxiCardViewItemModule } from 'devextreme-angular/ui/card-view/nested';
 import { DxoCardViewLabelModule } from 'devextreme-angular/ui/card-view/nested';
 import { DxoCardViewLoadPanelModule } from 'devextreme-angular/ui/card-view/nested';
@@ -1385,6 +1386,7 @@ export class DxCardViewComponent<TCardData = any, TKey = any> extends DxComponen
     DxoCardViewHeaderFilterModule,
     DxoCardViewHeaderPanelModule,
     DxoCardViewHideModule,
+    DxoCardViewIndicatorOptionsModule,
     DxiCardViewItemModule,
     DxoCardViewLabelModule,
     DxoCardViewLoadPanelModule,
@@ -1466,6 +1468,7 @@ export class DxCardViewComponent<TCardData = any, TKey = any> extends DxComponen
     DxoCardViewHeaderFilterModule,
     DxoCardViewHeaderPanelModule,
     DxoCardViewHideModule,
+    DxoCardViewIndicatorOptionsModule,
     DxiCardViewItemModule,
     DxoCardViewLabelModule,
     DxoCardViewLoadPanelModule,

packages/devextreme-angular/src/ui/card-view/nested/index.ts

@@ -43,6 +43,7 @@ export * from './group-operation-descriptions';
 export * from './header-filter';
 export * from './header-panel';
 export * from './hide';
+export * from './indicator-options';
 export * from './item-dxi';
 export * from './label';
 export * from './load-panel';

packages/devextreme-angular/src/ui/card-view/nested/indicator-options.ts

@@ -0,0 +1,100 @@
+/* tslint:disable:max-line-length */
+
+
+import {
+    Component,
+    OnInit,
+    OnDestroy,
+    NgModule,
+    Host,
+    SkipSelf,
+    Input
+} from '@angular/core';
+
+
+
+
+import { LoadingAnimationType } from 'devextreme/ui/load_indicator';
+
+import {
+    DxIntegrationModule,
+    NestedOptionHost,
+} from 'devextreme-angular/core';
+import { NestedOption } from 'devextreme-angular/core';
+
+
+@Component({
+    selector: 'dxo-card-view-indicator-options',
+    standalone: true,
+    template: '',
+    styles: [''],
+    imports: [ DxIntegrationModule ],
+    providers: [NestedOptionHost]
+})
+export class DxoCardViewIndicatorOptionsComponent 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: [
+    DxoCardViewIndicatorOptionsComponent
+  ],
+  exports: [
+    DxoCardViewIndicatorOptionsComponent
+  ],
+})
+export class DxoCardViewIndicatorOptionsModule { }

packages/devextreme-angular/src/ui/card-view/nested/load-panel.ts

@@ -18,7 +18,7 @@ import {
 
 import { AnimationConfig, PositionConfig } from 'devextreme/common/core/animation';
 import { event } from 'devextreme/events/events.types';
-import { ContentReadyEvent, DisposingEvent, HiddenEvent, HidingEvent, InitializedEvent, OptionChangedEvent, ShowingEvent, ShownEvent } from 'devextreme/ui/load_panel';
+import { LoadPanelIndicatorProperties, ContentReadyEvent, DisposingEvent, HiddenEvent, HidingEvent, InitializedEvent, OptionChangedEvent, ShowingEvent, ShownEvent } from 'devextreme/ui/load_panel';
 import { PositionAlignment } from 'devextreme/common';
 
 import {
@@ -117,6 +117,14 @@ export class DxoCardViewLoadPanelComponent extends NestedOption implements OnDes
         this._setOption('hoverStateEnabled', 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-angular/src/ui/data-grid/index.ts

@@ -36,6 +36,7 @@ import { Store } from 'devextreme/data/store';
 import { dxFormOptions } from 'devextreme/ui/form';
 import { dxPopupOptions } from 'devextreme/ui/popup';
 import { dxFilterBuilderOptions } from 'devextreme/ui/filter_builder';
+import { LoadPanelIndicatorProperties } from 'devextreme/ui/load_panel';
 import { event } from 'devextreme/events/events.types';
 import { Format } from 'devextreme/common/core/localization';
 
@@ -172,6 +173,7 @@ import { DxoDataGridGroupPanelModule } from 'devextreme-angular/ui/data-grid/nes
 import { DxoDataGridHeaderFilterModule } from 'devextreme-angular/ui/data-grid/nested';
 import { DxoDataGridHideModule } from 'devextreme-angular/ui/data-grid/nested';
 import { DxoDataGridIconsModule } from 'devextreme-angular/ui/data-grid/nested';
+import { DxoDataGridIndicatorOptionsModule } from 'devextreme-angular/ui/data-grid/nested';
 import { DxiDataGridItemModule } from 'devextreme-angular/ui/data-grid/nested';
 import { DxoDataGridKeyboardNavigationModule } from 'devextreme-angular/ui/data-grid/nested';
 import { DxoDataGridLabelModule } from 'devextreme-angular/ui/data-grid/nested';
@@ -815,10 +817,10 @@ export class DxDataGridComponent<TRowData = any, TKey = any> extends DxComponent
 
      */
     @Input()
-    get loadPanel(): { enabled?: boolean | Mode, height?: number | string, indicatorSrc?: string, shading?: boolean, shadingColor?: string, showIndicator?: boolean, showPane?: boolean, text?: string, width?: number | string } {
+    get loadPanel(): { enabled?: boolean | Mode, height?: number | string, indicatorOptions?: LoadPanelIndicatorProperties, indicatorSrc?: string, shading?: boolean, shadingColor?: string, showIndicator?: boolean, showPane?: boolean, text?: string, width?: number | string } {
         return this._getOption('loadPanel');
     }
-    set loadPanel(value: { enabled?: boolean | Mode, height?: number | string, indicatorSrc?: string, shading?: boolean, shadingColor?: string, showIndicator?: boolean, showPane?: boolean, text?: string, width?: number | string }) {
+    set loadPanel(value: { enabled?: boolean | Mode, height?: number | string, indicatorOptions?: LoadPanelIndicatorProperties, indicatorSrc?: string, shading?: boolean, shadingColor?: string, showIndicator?: boolean, showPane?: boolean, text?: string, width?: number | string }) {
         this._setOption('loadPanel', value);
     }
 
@@ -1884,7 +1886,7 @@ export class DxDataGridComponent<TRowData = any, TKey = any> extends DxComponent
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
 
      */
-    @Output() loadPanelChange: EventEmitter<{ enabled?: boolean | Mode, height?: number | string, indicatorSrc?: string, shading?: boolean, shadingColor?: string, showIndicator?: boolean, showPane?: boolean, text?: string, width?: number | string }>;
+    @Output() loadPanelChange: EventEmitter<{ enabled?: boolean | Mode, height?: number | string, indicatorOptions?: LoadPanelIndicatorProperties, indicatorSrc?: string, shading?: boolean, shadingColor?: string, showIndicator?: boolean, showPane?: boolean, text?: string, width?: number | string }>;
 
     /**
 
@@ -2449,6 +2451,7 @@ export class DxDataGridComponent<TRowData = any, TKey = any> extends DxComponent
     DxoDataGridHeaderFilterModule,
     DxoDataGridHideModule,
     DxoDataGridIconsModule,
+    DxoDataGridIndicatorOptionsModule,
     DxiDataGridItemModule,
     DxoDataGridKeyboardNavigationModule,
     DxoDataGridLabelModule,
@@ -2611,6 +2614,7 @@ export class DxDataGridComponent<TRowData = any, TKey = any> extends DxComponent
     DxoDataGridHeaderFilterModule,
     DxoDataGridHideModule,
     DxoDataGridIconsModule,
+    DxoDataGridIndicatorOptionsModule,
     DxiDataGridItemModule,
     DxoDataGridKeyboardNavigationModule,
     DxoDataGridLabelModule,

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

@@ -53,6 +53,7 @@ export * from './grouping';
 export * from './header-filter';
 export * from './hide';
 export * from './icons';
+export * from './indicator-options';
 export * from './item-dxi';
 export * from './keyboard-navigation';
 export * from './label';

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

@@ -0,0 +1,100 @@
+/* tslint:disable:max-line-length */
+
+
+import {
+    Component,
+    OnInit,
+    OnDestroy,
+    NgModule,
+    Host,
+    SkipSelf,
+    Input
+} from '@angular/core';
+
+
+
+
+import { LoadingAnimationType } from 'devextreme/ui/load_indicator';
+
+import {
+    DxIntegrationModule,
+    NestedOptionHost,
+} from 'devextreme-angular/core';
+import { NestedOption } from 'devextreme-angular/core';
+
+
+@Component({
+    selector: 'dxo-data-grid-indicator-options',
+    standalone: true,
+    template: '',
+    styles: [''],
+    imports: [ DxIntegrationModule ],
+    providers: [NestedOptionHost]
+})
+export class DxoDataGridIndicatorOptionsComponent 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: [
+    DxoDataGridIndicatorOptionsComponent
+  ],
+  exports: [
+    DxoDataGridIndicatorOptionsComponent
+  ],
+})
+export class DxoDataGridIndicatorOptionsModule { }

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

@@ -15,6 +15,7 @@ import {
 
 
 import { Mode } from 'devextreme/common';
+import { LoadPanelIndicatorProperties } from 'devextreme/ui/load_panel';
 
 import {
     DxIntegrationModule,
@@ -48,6 +49,14 @@ export class DxoDataGridLoadPanelComponent extends NestedOption implements OnDes
         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');