From a027430d8895a7847d21b75c798cf2c3aac3512d Mon Sep 17 00:00:00 2001 From: Julia Volkova Date: Thu, 2 Oct 2025 13:33:12 +0300 Subject: [PATCH 01/20] LoadPanel: support sparkle loadIndicator --- .../js/__internal/ui/form/form.load_panel.ts | 23 ++++---------- .../devextreme/js/__internal/ui/load_panel.ts | 6 +++- packages/devextreme/js/common/grids.d.ts | 7 +++++ .../js/exporter/export_load_panel.d.ts | 7 +++++ packages/devextreme/js/ui/load_indicator.d.ts | 28 +++++++++++++---- packages/devextreme/js/ui/load_panel.d.ts | 10 +++++- .../DevExpress.ui.widgets.form/form.tests.js | 7 ++++- .../DevExpress.ui.widgets/loadPanel.tests.js | 31 +++++++++++++++---- 8 files changed, 87 insertions(+), 32 deletions(-) diff --git a/packages/devextreme/js/__internal/ui/form/form.load_panel.ts b/packages/devextreme/js/__internal/ui/form/form.load_panel.ts index 85522edb3c9d..eddef5cdaa31 100644 --- a/packages/devextreme/js/__internal/ui/form/form.load_panel.ts +++ b/packages/devextreme/js/__internal/ui/form/form.load_panel.ts @@ -4,7 +4,7 @@ import { FORM_LOAD_PANEL_CLASS, FORM_LOAD_PANEL_WRAPPER_CLASS, } from '@ts/ui/form/constants'; -import LoadIndicator, { AnimationType } from '@ts/ui/load_indicator'; +import { AnimationType } from '@ts/ui/load_indicator'; import type { LoadPanelProperties } from '@ts/ui/load_panel'; import type LoadPanel from '@ts/ui/load_panel'; @@ -72,6 +72,11 @@ export class FormLoadPanel { }, visible: false, showIndicator: true, + indicatorOptions: { + animationType: AnimationType.Sparkle, + width: FORM_LOAD_INDICATOR_SIZE, + height: FORM_LOAD_INDICATOR_SIZE, + }, showPane: false, shading: false, hideOnOutsideClick: false, @@ -83,21 +88,5 @@ export class FormLoadPanel { class: FORM_LOAD_PANEL_WRAPPER_CLASS, }, }); - - this._configureLoadIndicator(); - } - - private _configureLoadIndicator(): void { - const $loadIndicator = this._loadPanel?._$indicator; - - if ($loadIndicator?.length) { - const loadIndicator = LoadIndicator.getInstance($loadIndicator.get(0)); - - loadIndicator.option({ - animationType: AnimationType.Sparkle, - width: FORM_LOAD_INDICATOR_SIZE, - height: FORM_LOAD_INDICATOR_SIZE, - }); - } } } diff --git a/packages/devextreme/js/__internal/ui/load_panel.ts b/packages/devextreme/js/__internal/ui/load_panel.ts index 21eee9bfb1f1..4c4c0e35d97d 100644 --- a/packages/devextreme/js/__internal/ui/load_panel.ts +++ b/packages/devextreme/js/__internal/ui/load_panel.ts @@ -211,9 +211,12 @@ class LoadPanel extends Overlay { .appendTo(this._$loadPanelContentWrapper); } + const { indicatorOptions = {}, indicatorSrc } = this.option(); + this._createComponent(this._$indicator, LoadIndicator, { elementAttr: this._getAriaAttributes(), - indicatorSrc: this.option('indicatorSrc'), + indicatorSrc, + ...indicatorOptions, }); } @@ -243,6 +246,7 @@ class LoadPanel extends Overlay { this._togglePaneVisible(); break; case 'indicatorSrc': + case 'indicatorOptions': this._renderLoadIndicator(); break; default: diff --git a/packages/devextreme/js/common/grids.d.ts b/packages/devextreme/js/common/grids.d.ts index d47bd36a8190..dcbe014c7711 100644 --- a/packages/devextreme/js/common/grids.d.ts +++ b/packages/devextreme/js/common/grids.d.ts @@ -57,6 +57,8 @@ import { SimpleItem, } from '../ui/form'; +import { LoadIndicatorOptions } from '../ui/load_indicator'; + import { Properties as PopupProperties, } from '../ui/popup'; @@ -2592,8 +2594,13 @@ export type LoadPanel = { /** * @docid GridBaseOptions.loadPanel.indicatorSrc * @default "" + * @deprecated Use indicatorSrc in GridBaseOptions.loadPanel.indicatorOptions instead */ indicatorSrc?: string; + /** + * @docid GridBaseOptions.loadPanel.indicatorOptions + */ + indicatorOptions?: LoadIndicatorOptions; /** * @docid GridBaseOptions.loadPanel.shading * @default false diff --git a/packages/devextreme/js/exporter/export_load_panel.d.ts b/packages/devextreme/js/exporter/export_load_panel.d.ts index d6ef042f215a..e77b34f72be5 100644 --- a/packages/devextreme/js/exporter/export_load_panel.d.ts +++ b/packages/devextreme/js/exporter/export_load_panel.d.ts @@ -1,3 +1,5 @@ +import { LoadIndicatorOptions } from '../ui/load_indicator'; + /** * @docid * @type object @@ -32,8 +34,13 @@ export interface ExportLoadPanel { /** * @docid * @default "" + * @deprecated Use indicatorSrc in indicatorOptions instead */ indicatorSrc?: string; + /** + * @docid + */ + indicatorOptions?: LoadIndicatorOptions; /** * @docid * @default true diff --git a/packages/devextreme/js/ui/load_indicator.d.ts b/packages/devextreme/js/ui/load_indicator.d.ts index 47eb86ffbd54..84d16a889183 100644 --- a/packages/devextreme/js/ui/load_indicator.d.ts +++ b/packages/devextreme/js/ui/load_indicator.d.ts @@ -43,12 +43,8 @@ export type OptionChangedEvent = EventInfo & ChangedOptionInfo; /** @public */ export type LoadingAnimationType = 'circle' | 'sparkle'; -/** - * @deprecated use Properties instead - * @namespace DevExpress.ui - * @docid - */ -export interface dxLoadIndicatorOptions extends WidgetOptions { +/** @public */ +export interface LoadIndicatorOptions { /** * @docid * @default 'circle' @@ -61,7 +57,27 @@ export interface dxLoadIndicatorOptions extends WidgetOptions { * @public */ indicatorSrc?: string; + /** + * @docid + * @default undefined + * @public + */ + height?: number | string | undefined; + /** + * @docid + * @default undefined + * @public + */ + width?: number | string | undefined; } + +/** + * @deprecated use Properties instead + * @namespace DevExpress.ui + * @docid + */ +export interface dxLoadIndicatorOptions extends WidgetOptions, LoadIndicatorOptions {} + /** * @docid * @inherits Widget diff --git a/packages/devextreme/js/ui/load_panel.d.ts b/packages/devextreme/js/ui/load_panel.d.ts index 025c63408db9..c698cdc711f2 100644 --- a/packages/devextreme/js/ui/load_panel.d.ts +++ b/packages/devextreme/js/ui/load_panel.d.ts @@ -23,6 +23,8 @@ import { PositionAlignment, } from '../common'; +import { LoadIndicatorOptions } from './load_indicator'; + /** * @docid _ui_load_panel_ContentReadyEvent * @public @@ -129,9 +131,15 @@ export interface dxLoadPanelOptions extends dxOverlayOptions { /** * @docid * @default "" - * @public + * @deprecated Use indicatorSrc in indicatorOptions instead */ indicatorSrc?: string; + /** + * @docid + * @default undefined + * @public + */ + indicatorOptions?: LoadIndicatorOptions; /** * @docid * @default 60 &for(Material) diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.form/form.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.form/form.tests.js index 93b8ab96c2f6..a30992bd32d6 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.form/form.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.form/form.tests.js @@ -5362,6 +5362,11 @@ QUnit.module('LoadIndicator', () => { deferRendering: false, disabled: false, message: '', + indicatorOptions: { + animationType: 'sparkle', + width: FORM_LOAD_INDICATOR_SIZE, + height: FORM_LOAD_INDICATOR_SIZE, + }, 'wrapperAttr.class': FORM_LOAD_PANEL_WRAPPER_CLASS, width: FORM_LOAD_INDICATOR_SIZE, height: FORM_LOAD_INDICATOR_SIZE, @@ -5370,7 +5375,7 @@ QUnit.module('LoadIndicator', () => { }; Object.entries(expectedOptions).forEach(([optionName, value]) => { - assert.strictEqual(loadPanelInstance.option(optionName), value, `${optionName} option has correct default value`); + assert.deepEqual(loadPanelInstance.option(optionName), value, `${optionName} option has correct default value`); }); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/loadPanel.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/loadPanel.tests.js index 126570bd575c..49fb2ac73ecf 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/loadPanel.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/loadPanel.tests.js @@ -457,7 +457,7 @@ QUnit.module('options changed callbacks', { assert.ok(!instance.$content().hasClass(LOADPANEL_PANE_HIDDEN_CLASS)); }); - QUnit.test('LoadPanel with custom indicator', function(assert) { + QUnit.test('LoadPanel with custom indicator (deprecated)', function(assert) { const url = '../../testing/content/customLoadIndicator.png'; const instance = this.element .dxLoadPanel({ @@ -474,6 +474,25 @@ QUnit.module('options changed callbacks', { assert.equal(instance.option('indicatorSrc'), loadIndicatorInstance.option('indicatorSrc'), 'custom indicator option changed successfully'); }); + QUnit.test('LoadPanel with custom indicator', function(assert) { + const url = '../../testing/content/customLoadIndicator.png'; + const instance = this.element + .dxLoadPanel({ + showIndicator: true, + indicatorOptions: { + indicatorSrc: url + }, + }) + .dxLoadPanel('instance'); + instance.show(); + + const loadIndicatorInstance = this.instance.$content().find('.dx-loadindicator').dxLoadIndicator().dxLoadIndicator('instance'); + + assert.equal(loadIndicatorInstance.option('indicatorSrc'), url, 'custom indicator option installed successfully'); + instance.option('indicatorOptions.indicatorSrc', ''); + assert.equal(instance.option('indicatorOptions.indicatorSrc'), loadIndicatorInstance.option('indicatorSrc'), 'custom indicator option changed successfully'); + }); + QUnit.test('indicatorSrc option change', function(assert) { const url = '../../testing/content/customLoadIndicator.png'; const instance = this.element @@ -483,23 +502,23 @@ QUnit.module('options changed callbacks', { .dxLoadPanel('instance'); instance.show(); - instance.option('indicatorSrc', url); + instance.option('indicatorOptions.indicatorSrc', url); const loadIndicatorInstance = this.instance.$content().find('.dx-loadindicator').dxLoadIndicator().dxLoadIndicator('instance'); assert.strictEqual(loadIndicatorInstance.option('indicatorSrc'), url, 'custom indicator option installed successfully'); - instance.option('indicatorSrc', ''); - assert.equal(instance.option('indicatorSrc'), loadIndicatorInstance.option('indicatorSrc'), 'custom indicator option changed successfully'); + instance.option('indicatorOptions.indicatorSrc', ''); + assert.equal(instance.option('indicatorOptions.indicatorSrc'), loadIndicatorInstance.option('indicatorSrc'), 'custom indicator option changed successfully'); }); - QUnit.test('indicatorSrc option change when showIndicator is false', function(assert) { + QUnit.test('indicatorOptions.indicatorSrc option change when showIndicator is false', function(assert) { const url = '../../testing/content/customLoadIndicator.png'; const instance = this.element .dxLoadPanel({}) .dxLoadPanel('instance'); instance.show(); - instance.option('indicatorSrc', url); + instance.option('indicatorOptions.indicatorSrc', url); instance.option('showIndicator', true); const loadIndicatorInstance = this.instance.$content().find('.dx-loadindicator').dxLoadIndicator().dxLoadIndicator('instance'); From af3eff873f5b46c1e82216ca2bfed778cbd10489 Mon Sep 17 00:00:00 2001 From: Julia Volkova Date: Thu, 2 Oct 2025 13:40:06 +0300 Subject: [PATCH 02/20] update-ts-reexports --- packages/devextreme/js/ui/load_indicator_types.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/devextreme/js/ui/load_indicator_types.d.ts b/packages/devextreme/js/ui/load_indicator_types.d.ts index 8aab9b68a1dd..3520ebace37d 100644 --- a/packages/devextreme/js/ui/load_indicator_types.d.ts +++ b/packages/devextreme/js/ui/load_indicator_types.d.ts @@ -4,5 +4,6 @@ export { InitializedEvent, OptionChangedEvent, LoadingAnimationType, + LoadIndicatorOptions, Properties, } from './load_indicator'; From 0a9bdb7a8ab21e78f27b72fadd8eeb0d0abc2698 Mon Sep 17 00:00:00 2001 From: Julia Volkova Date: Thu, 2 Oct 2025 13:49:09 +0300 Subject: [PATCH 03/20] regenerate-all --- packages/devextreme/ts/dx.all.d.ts | 45 +++++++++++++++++++++++------- 1 file changed, 35 insertions(+), 10 deletions(-) diff --git a/packages/devextreme/ts/dx.all.d.ts b/packages/devextreme/ts/dx.all.d.ts index be6ade9e2d2c..471c7a0c00b8 100644 --- a/packages/devextreme/ts/dx.all.d.ts +++ b/packages/devextreme/ts/dx.all.d.ts @@ -767,8 +767,13 @@ declare module DevExpress { showIndicator?: boolean; /** * [descr:ExportLoadPanel.indicatorSrc] + * @deprecated [depNote:ExportLoadPanel.indicatorSrc] */ indicatorSrc?: string; + /** + * [descr:ExportLoadPanel.indicatorOptions] + */ + indicatorOptions?: DevExpress.ui.dxLoadIndicator.LoadIndicatorOptions; /** * [descr:ExportLoadPanel.showPane] */ @@ -6212,8 +6217,13 @@ declare module DevExpress.common.grids { height?: number | string; /** * [descr:GridBaseOptions.loadPanel.indicatorSrc] + * @deprecated [depNote:GridBaseOptions.loadPanel.indicatorSrc] */ indicatorSrc?: string; + /** + * [descr:GridBaseOptions.loadPanel.indicatorOptions] + */ + indicatorOptions?: DevExpress.ui.dxLoadIndicator.LoadIndicatorOptions; /** * [descr:GridBaseOptions.loadPanel.shading] */ @@ -22245,6 +22255,24 @@ declare module DevExpress.ui { */ export type InitializedEvent = DevExpress.common.core.events.InitializedEventInfo; + export interface LoadIndicatorOptions { + /** + * [descr:LoadIndicatorOptions.animationType] + */ + animationType?: LoadingAnimationType; + /** + * [descr:LoadIndicatorOptions.indicatorSrc] + */ + indicatorSrc?: string; + /** + * [descr:LoadIndicatorOptions.height] + */ + height?: number | string | undefined; + /** + * [descr:LoadIndicatorOptions.width] + */ + width?: number | string | undefined; + } export type LoadingAnimationType = 'circle' | 'sparkle'; /** * [descr:_ui_load_indicator_OptionChangedEvent] @@ -22260,16 +22288,8 @@ declare module DevExpress.ui { * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution. */ export interface dxLoadIndicatorOptions - extends WidgetOptions { - /** - * [descr:dxLoadIndicatorOptions.animationType] - */ - animationType?: DevExpress.ui.dxLoadIndicator.LoadingAnimationType; - /** - * [descr:dxLoadIndicatorOptions.indicatorSrc] - */ - indicatorSrc?: string; - } + extends WidgetOptions, + DevExpress.ui.dxLoadIndicator.LoadIndicatorOptions {} /** * [descr:dxLoadPanel] */ @@ -22360,8 +22380,13 @@ declare module DevExpress.ui { height?: number | string; /** * [descr:dxLoadPanelOptions.indicatorSrc] + * @deprecated [depNote:dxLoadPanelOptions.indicatorSrc] */ indicatorSrc?: string; + /** + * [descr:dxLoadPanelOptions.indicatorOptions] + */ + indicatorOptions?: DevExpress.ui.dxLoadIndicator.LoadIndicatorOptions; /** * [descr:dxLoadPanelOptions.maxHeight] */ From f4719391a8b51aa7f91e9929ed4b35481838cfe0 Mon Sep 17 00:00:00 2001 From: Julia Volkova Date: Thu, 2 Oct 2025 15:44:10 +0300 Subject: [PATCH 04/20] removed deprecated texts and regenerate --- .../src/ui/card-view/index.ts | 3 + .../src/ui/card-view/nested/index.ts | 1 + .../ui/card-view/nested/indicator-options.ts | 100 ++++++++++++++++++ .../src/ui/card-view/nested/load-panel.ts | 9 ++ .../src/ui/data-grid/index.ts | 13 ++- .../src/ui/data-grid/nested/index.ts | 1 + .../ui/data-grid/nested/indicator-options.ts | 100 ++++++++++++++++++ .../src/ui/data-grid/nested/load-panel.ts | 9 ++ .../src/ui/load-indicator/index.ts | 44 +------- .../src/ui/load-panel/index.ts | 30 ++++++ .../src/ui/load-panel/nested/index.ts | 1 + .../ui/load-panel/nested/indicator-options.ts | 100 ++++++++++++++++++ .../src/ui/nested/base/index.ts | 1 + .../ui/nested/base/load-indicator-options.ts | 41 +++++++ .../devextreme-angular/src/ui/nested/index.ts | 1 + .../src/ui/nested/indicator-options.ts | 73 +++++++++++++ .../src/ui/nested/load-panel.ts | 9 ++ .../src/ui/tree-list/index.ts | 13 ++- .../src/ui/tree-list/nested/index.ts | 1 + .../ui/tree-list/nested/indicator-options.ts | 100 ++++++++++++++++++ .../src/ui/tree-list/nested/load-panel.ts | 9 ++ packages/devextreme-react/src/card-view.ts | 27 +++++ packages/devextreme-react/src/data-grid.ts | 29 +++++ packages/devextreme-react/src/load-panel.ts | 25 +++++ packages/devextreme-react/src/tree-list.ts | 29 +++++ packages/devextreme-vue/src/card-view.ts | 30 ++++++ packages/devextreme-vue/src/data-grid.ts | 32 ++++++ packages/devextreme-vue/src/load-indicator.ts | 7 -- packages/devextreme-vue/src/load-panel.ts | 31 ++++++ packages/devextreme-vue/src/tree-list.ts | 32 ++++++ packages/devextreme/js/common/grids.d.ts | 2 +- .../js/exporter/export_load_panel.d.ts | 2 +- packages/devextreme/js/ui/load_indicator.d.ts | 4 +- packages/devextreme/js/ui/load_panel.d.ts | 2 +- packages/devextreme/ts/dx.all.d.ts | 4 +- 35 files changed, 852 insertions(+), 63 deletions(-) create mode 100644 packages/devextreme-angular/src/ui/card-view/nested/indicator-options.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/indicator-options.ts create mode 100644 packages/devextreme-angular/src/ui/load-panel/nested/indicator-options.ts create mode 100644 packages/devextreme-angular/src/ui/nested/base/load-indicator-options.ts create mode 100644 packages/devextreme-angular/src/ui/nested/indicator-options.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/indicator-options.ts diff --git a/packages/devextreme-angular/src/ui/card-view/index.ts b/packages/devextreme-angular/src/ui/card-view/index.ts index ccb3fbf99cd0..d7a0f0422a01 100644 --- a/packages/devextreme-angular/src/ui/card-view/index.ts +++ b/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 extends DxComponen DxoCardViewHeaderFilterModule, DxoCardViewHeaderPanelModule, DxoCardViewHideModule, + DxoCardViewIndicatorOptionsModule, DxiCardViewItemModule, DxoCardViewLabelModule, DxoCardViewLoadPanelModule, @@ -1466,6 +1468,7 @@ export class DxCardViewComponent extends DxComponen DxoCardViewHeaderFilterModule, DxoCardViewHeaderPanelModule, DxoCardViewHideModule, + DxoCardViewIndicatorOptionsModule, DxiCardViewItemModule, DxoCardViewLabelModule, DxoCardViewLoadPanelModule, diff --git a/packages/devextreme-angular/src/ui/card-view/nested/index.ts b/packages/devextreme-angular/src/ui/card-view/nested/index.ts index 7f418c889305..1a5acee0e5df 100644 --- a/packages/devextreme-angular/src/ui/card-view/nested/index.ts +++ b/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'; diff --git a/packages/devextreme-angular/src/ui/card-view/nested/indicator-options.ts b/packages/devextreme-angular/src/ui/card-view/nested/indicator-options.ts new file mode 100644 index 000000000000..5a4b670c8451 --- /dev/null +++ b/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 indicatorSrc(): string { + return this._getOption('indicatorSrc'); + } + set indicatorSrc(value: string) { + this._setOption('indicatorSrc', 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 { } diff --git a/packages/devextreme-angular/src/ui/card-view/nested/load-panel.ts b/packages/devextreme-angular/src/ui/card-view/nested/load-panel.ts index 5c42830783a8..a975e6fb6bc2 100644 --- a/packages/devextreme-angular/src/ui/card-view/nested/load-panel.ts +++ b/packages/devextreme-angular/src/ui/card-view/nested/load-panel.ts @@ -18,6 +18,7 @@ import { import { AnimationConfig, PositionConfig } from 'devextreme/common/core/animation'; import { event } from 'devextreme/events/events.types'; +import { LoadIndicatorOptions } from 'UNKNOWN_MODULE'; import { ContentReadyEvent, DisposingEvent, HiddenEvent, HidingEvent, InitializedEvent, OptionChangedEvent, ShowingEvent, ShownEvent } from 'devextreme/ui/load_panel'; import { PositionAlignment } from 'devextreme/common'; @@ -117,6 +118,14 @@ export class DxoCardViewLoadPanelComponent extends NestedOption implements OnDes this._setOption('hoverStateEnabled', value); } + @Input() + get indicatorOptions(): LoadIndicatorOptions { + return this._getOption('indicatorOptions'); + } + set indicatorOptions(value: LoadIndicatorOptions) { + this._setOption('indicatorOptions', value); + } + @Input() get indicatorSrc(): string { return this._getOption('indicatorSrc'); diff --git a/packages/devextreme-angular/src/ui/data-grid/index.ts b/packages/devextreme-angular/src/ui/data-grid/index.ts index be878d331c67..fbdef590ff89 100644 --- a/packages/devextreme-angular/src/ui/data-grid/index.ts +++ b/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 { LoadIndicatorOptions } from 'UNKNOWN_MODULE'; import { event } from 'devextreme/events/events.types'; import { Format } from 'devextreme/common/core/localization'; @@ -100,6 +101,7 @@ import { DxoGroupingModule } from 'devextreme-angular/ui/nested'; import { DxoGroupPanelModule } from 'devextreme-angular/ui/nested'; import { DxoKeyboardNavigationModule } from 'devextreme-angular/ui/nested'; import { DxoLoadPanelModule } from 'devextreme-angular/ui/nested'; +import { DxoIndicatorOptionsModule } from 'devextreme-angular/ui/nested'; import { DxoMasterDetailModule } from 'devextreme-angular/ui/nested'; import { DxoPagerModule } from 'devextreme-angular/ui/nested'; import { DxoPagingModule } from 'devextreme-angular/ui/nested'; @@ -172,6 +174,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 +818,10 @@ export class DxDataGridComponent 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?: LoadIndicatorOptions, 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?: LoadIndicatorOptions, indicatorSrc?: string, shading?: boolean, shadingColor?: string, showIndicator?: boolean, showPane?: boolean, text?: string, width?: number | string }) { this._setOption('loadPanel', value); } @@ -1884,7 +1887,7 @@ export class DxDataGridComponent 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?: LoadIndicatorOptions, indicatorSrc?: string, shading?: boolean, shadingColor?: string, showIndicator?: boolean, showPane?: boolean, text?: string, width?: number | string }>; /** @@ -2378,6 +2381,7 @@ export class DxDataGridComponent extends DxComponent DxoGroupPanelModule, DxoKeyboardNavigationModule, DxoLoadPanelModule, + DxoIndicatorOptionsModule, DxoMasterDetailModule, DxoPagerModule, DxoPagingModule, @@ -2449,6 +2453,7 @@ export class DxDataGridComponent extends DxComponent DxoDataGridHeaderFilterModule, DxoDataGridHideModule, DxoDataGridIconsModule, + DxoDataGridIndicatorOptionsModule, DxiDataGridItemModule, DxoDataGridKeyboardNavigationModule, DxoDataGridLabelModule, @@ -2540,6 +2545,7 @@ export class DxDataGridComponent extends DxComponent DxoGroupPanelModule, DxoKeyboardNavigationModule, DxoLoadPanelModule, + DxoIndicatorOptionsModule, DxoMasterDetailModule, DxoPagerModule, DxoPagingModule, @@ -2611,6 +2617,7 @@ export class DxDataGridComponent extends DxComponent DxoDataGridHeaderFilterModule, DxoDataGridHideModule, DxoDataGridIconsModule, + DxoDataGridIndicatorOptionsModule, DxiDataGridItemModule, DxoDataGridKeyboardNavigationModule, DxoDataGridLabelModule, diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/index.ts b/packages/devextreme-angular/src/ui/data-grid/nested/index.ts index 0266ed3e3e48..0358970c76c8 100644 --- a/packages/devextreme-angular/src/ui/data-grid/nested/index.ts +++ b/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'; diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/indicator-options.ts b/packages/devextreme-angular/src/ui/data-grid/nested/indicator-options.ts new file mode 100644 index 000000000000..aecf0b333b09 --- /dev/null +++ b/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 indicatorSrc(): string { + return this._getOption('indicatorSrc'); + } + set indicatorSrc(value: string) { + this._setOption('indicatorSrc', 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 { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/load-panel.ts b/packages/devextreme-angular/src/ui/data-grid/nested/load-panel.ts index 1f7ecc20057f..48b10824aa73 100644 --- a/packages/devextreme-angular/src/ui/data-grid/nested/load-panel.ts +++ b/packages/devextreme-angular/src/ui/data-grid/nested/load-panel.ts @@ -15,6 +15,7 @@ import { import { Mode } from 'devextreme/common'; +import { LoadIndicatorOptions } from 'UNKNOWN_MODULE'; import { DxIntegrationModule, @@ -48,6 +49,14 @@ export class DxoDataGridLoadPanelComponent extends NestedOption implements OnDes this._setOption('height', value); } + @Input() + get indicatorOptions(): LoadIndicatorOptions { + return this._getOption('indicatorOptions'); + } + set indicatorOptions(value: LoadIndicatorOptions) { + this._setOption('indicatorOptions', value); + } + @Input() get indicatorSrc(): string { return this._getOption('indicatorSrc'); diff --git a/packages/devextreme-angular/src/ui/load-indicator/index.ts b/packages/devextreme-angular/src/ui/load-indicator/index.ts index 7e222519218c..794406a6dd38 100644 --- a/packages/devextreme-angular/src/ui/load-indicator/index.ts +++ b/packages/devextreme-angular/src/ui/load-indicator/index.ts @@ -17,7 +17,7 @@ import { } from '@angular/core'; -import { LoadingAnimationType, ContentReadyEvent, DisposingEvent, InitializedEvent, OptionChangedEvent } from 'devextreme/ui/load_indicator'; +import { ContentReadyEvent, DisposingEvent, InitializedEvent, OptionChangedEvent } from 'devextreme/ui/load_indicator'; import DxLoadIndicator from 'devextreme/ui/load_indicator'; @@ -55,19 +55,6 @@ import { export class DxLoadIndicatorComponent extends DxComponent implements OnDestroy { instance: DxLoadIndicator = null; - /** - * [descr:dxLoadIndicatorOptions.animationType] - - */ - @Input() - get animationType(): LoadingAnimationType { - return this._getOption('animationType'); - } - set animationType(value: LoadingAnimationType) { - this._setOption('animationType', value); - } - - /** * [descr:DOMComponentOptions.elementAttr] @@ -107,19 +94,6 @@ export class DxLoadIndicatorComponent extends DxComponent implements OnDestroy { } - /** - * [descr:dxLoadIndicatorOptions.indicatorSrc] - - */ - @Input() - get indicatorSrc(): string { - return this._getOption('indicatorSrc'); - } - set indicatorSrc(value: string) { - this._setOption('indicatorSrc', value); - } - - /** * [descr:DOMComponentOptions.rtlEnabled] @@ -190,13 +164,6 @@ export class DxLoadIndicatorComponent extends DxComponent implements OnDestroy { */ @Output() onOptionChanged: EventEmitter; - /** - - * This member supports the internal infrastructure and is not intended to be used directly from your code. - - */ - @Output() animationTypeChange: EventEmitter; - /** * This member supports the internal infrastructure and is not intended to be used directly from your code. @@ -218,13 +185,6 @@ export class DxLoadIndicatorComponent extends DxComponent implements OnDestroy { */ @Output() hintChange: EventEmitter; - /** - - * This member supports the internal infrastructure and is not intended to be used directly from your code. - - */ - @Output() indicatorSrcChange: EventEmitter; - /** * This member supports the internal infrastructure and is not intended to be used directly from your code. @@ -266,11 +226,9 @@ export class DxLoadIndicatorComponent extends DxComponent implements OnDestroy { { subscribe: 'disposing', emit: 'onDisposing' }, { subscribe: 'initialized', emit: 'onInitialized' }, { subscribe: 'optionChanged', emit: 'onOptionChanged' }, - { emit: 'animationTypeChange' }, { emit: 'elementAttrChange' }, { emit: 'heightChange' }, { emit: 'hintChange' }, - { emit: 'indicatorSrcChange' }, { emit: 'rtlEnabledChange' }, { emit: 'visibleChange' }, { emit: 'widthChange' } diff --git a/packages/devextreme-angular/src/ui/load-panel/index.ts b/packages/devextreme-angular/src/ui/load-panel/index.ts index a9ffc49b0b1d..9ae87ad66197 100644 --- a/packages/devextreme-angular/src/ui/load-panel/index.ts +++ b/packages/devextreme-angular/src/ui/load-panel/index.ts @@ -19,6 +19,7 @@ import { import { AnimationConfig, PositionConfig } from 'devextreme/common/core/animation'; import { event } from 'devextreme/events/events.types'; +import { LoadIndicatorOptions } from 'UNKNOWN_MODULE'; import { ContentReadyEvent, DisposingEvent, HiddenEvent, HidingEvent, InitializedEvent, OptionChangedEvent, ShowingEvent, ShownEvent } from 'devextreme/ui/load_panel'; import { PositionAlignment } from 'devextreme/common'; @@ -45,6 +46,7 @@ import { DxoMyModule } from 'devextreme-angular/ui/nested'; import { DxoOffsetModule } from 'devextreme-angular/ui/nested'; import { DxoToModule } from 'devextreme-angular/ui/nested'; import { DxoShowModule } from 'devextreme-angular/ui/nested'; +import { DxoIndicatorOptionsModule } from 'devextreme-angular/ui/nested'; import { DxoLoadPanelAnimationModule } from 'devextreme-angular/ui/load-panel/nested'; import { DxoLoadPanelAtModule } from 'devextreme-angular/ui/load-panel/nested'; @@ -52,6 +54,7 @@ import { DxoLoadPanelBoundaryOffsetModule } from 'devextreme-angular/ui/load-pan import { DxoLoadPanelCollisionModule } from 'devextreme-angular/ui/load-panel/nested'; import { DxoLoadPanelFromModule } from 'devextreme-angular/ui/load-panel/nested'; import { DxoLoadPanelHideModule } from 'devextreme-angular/ui/load-panel/nested'; +import { DxoLoadPanelIndicatorOptionsModule } from 'devextreme-angular/ui/load-panel/nested'; import { DxoLoadPanelMyModule } from 'devextreme-angular/ui/load-panel/nested'; import { DxoLoadPanelOffsetModule } from 'devextreme-angular/ui/load-panel/nested'; import { DxoLoadPanelPositionModule } from 'devextreme-angular/ui/load-panel/nested'; @@ -210,9 +213,24 @@ export class DxLoadPanelComponent extends DxComponent implements OnDestroy { } + /** + * [descr:dxLoadPanelOptions.indicatorOptions] + + */ + @Input() + get indicatorOptions(): LoadIndicatorOptions { + return this._getOption('indicatorOptions'); + } + set indicatorOptions(value: LoadIndicatorOptions) { + this._setOption('indicatorOptions', value); + } + + /** * [descr:dxLoadPanelOptions.indicatorSrc] + * @deprecated [depNote:dxLoadPanelOptions.indicatorSrc] + */ @Input() get indicatorSrc(): string { @@ -538,6 +556,13 @@ export class DxLoadPanelComponent extends DxComponent implements OnDestroy { */ @Output() hoverStateEnabledChange: EventEmitter; + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() indicatorOptionsChange: EventEmitter; + /** * This member supports the internal infrastructure and is not intended to be used directly from your code. @@ -677,6 +702,7 @@ export class DxLoadPanelComponent extends DxComponent implements OnDestroy { { emit: 'hideOnParentScrollChange' }, { emit: 'hintChange' }, { emit: 'hoverStateEnabledChange' }, + { emit: 'indicatorOptionsChange' }, { emit: 'indicatorSrcChange' }, { emit: 'maxHeightChange' }, { emit: 'maxWidthChange' }, @@ -722,12 +748,14 @@ export class DxLoadPanelComponent extends DxComponent implements OnDestroy { DxoOffsetModule, DxoToModule, DxoShowModule, + DxoIndicatorOptionsModule, DxoLoadPanelAnimationModule, DxoLoadPanelAtModule, DxoLoadPanelBoundaryOffsetModule, DxoLoadPanelCollisionModule, DxoLoadPanelFromModule, DxoLoadPanelHideModule, + DxoLoadPanelIndicatorOptionsModule, DxoLoadPanelMyModule, DxoLoadPanelOffsetModule, DxoLoadPanelPositionModule, @@ -749,12 +777,14 @@ export class DxLoadPanelComponent extends DxComponent implements OnDestroy { DxoOffsetModule, DxoToModule, DxoShowModule, + DxoIndicatorOptionsModule, DxoLoadPanelAnimationModule, DxoLoadPanelAtModule, DxoLoadPanelBoundaryOffsetModule, DxoLoadPanelCollisionModule, DxoLoadPanelFromModule, DxoLoadPanelHideModule, + DxoLoadPanelIndicatorOptionsModule, DxoLoadPanelMyModule, DxoLoadPanelOffsetModule, DxoLoadPanelPositionModule, diff --git a/packages/devextreme-angular/src/ui/load-panel/nested/index.ts b/packages/devextreme-angular/src/ui/load-panel/nested/index.ts index 332a5a7d175b..4331dbd21c10 100644 --- a/packages/devextreme-angular/src/ui/load-panel/nested/index.ts +++ b/packages/devextreme-angular/src/ui/load-panel/nested/index.ts @@ -4,6 +4,7 @@ export * from './boundary-offset'; export * from './collision'; export * from './from'; export * from './hide'; +export * from './indicator-options'; export * from './my'; export * from './offset'; export * from './position'; diff --git a/packages/devextreme-angular/src/ui/load-panel/nested/indicator-options.ts b/packages/devextreme-angular/src/ui/load-panel/nested/indicator-options.ts new file mode 100644 index 000000000000..365c5fc41920 --- /dev/null +++ b/packages/devextreme-angular/src/ui/load-panel/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-load-panel-indicator-options', + standalone: true, + template: '', + styles: [''], + imports: [ DxIntegrationModule ], + providers: [NestedOptionHost] +}) +export class DxoLoadPanelIndicatorOptionsComponent 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 indicatorSrc(): string { + return this._getOption('indicatorSrc'); + } + set indicatorSrc(value: string) { + this._setOption('indicatorSrc', 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: [ + DxoLoadPanelIndicatorOptionsComponent + ], + exports: [ + DxoLoadPanelIndicatorOptionsComponent + ], +}) +export class DxoLoadPanelIndicatorOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/nested/base/index.ts b/packages/devextreme-angular/src/ui/nested/base/index.ts index de74c6df0cfc..b52b8ace6d12 100644 --- a/packages/devextreme-angular/src/ui/nested/base/index.ts +++ b/packages/devextreme-angular/src/ui/nested/base/index.ts @@ -41,6 +41,7 @@ export * from './html-editor-mention-dxi'; export * from './html-editor-table-context-menu'; export * from './html-editor-table-resizing'; export * from './html-editor-variables'; +export * from './load-indicator-options'; export * from './pager'; export * from './popup-options'; export * from './popup-toolbar-item-dxi'; diff --git a/packages/devextreme-angular/src/ui/nested/base/load-indicator-options.ts b/packages/devextreme-angular/src/ui/nested/base/load-indicator-options.ts new file mode 100644 index 000000000000..a83e9bdac947 --- /dev/null +++ b/packages/devextreme-angular/src/ui/nested/base/load-indicator-options.ts @@ -0,0 +1,41 @@ +/* tslint:disable:max-line-length */ + +import { NestedOption } from 'devextreme-angular/core'; +import { + Component, +} from '@angular/core'; + +import { LoadingAnimationType } from 'devextreme/ui/load_indicator'; + +@Component({ + template: '' +}) +export abstract class DxoLoadIndicatorOptions extends NestedOption { + get animationType(): LoadingAnimationType { + return this._getOption('animationType'); + } + set animationType(value: LoadingAnimationType) { + this._setOption('animationType', value); + } + + get height(): number | string | undefined { + return this._getOption('height'); + } + set height(value: number | string | undefined) { + this._setOption('height', value); + } + + get indicatorSrc(): string { + return this._getOption('indicatorSrc'); + } + set indicatorSrc(value: string) { + this._setOption('indicatorSrc', value); + } + + get width(): number | string | undefined { + return this._getOption('width'); + } + set width(value: number | string | undefined) { + this._setOption('width', value); + } +} diff --git a/packages/devextreme-angular/src/ui/nested/index.ts b/packages/devextreme-angular/src/ui/nested/index.ts index 7c291f7dc04e..a9b6fdaed127 100644 --- a/packages/devextreme-angular/src/ui/nested/index.ts +++ b/packages/devextreme-angular/src/ui/nested/index.ts @@ -108,6 +108,7 @@ export * from './icons'; export * from './image-upload'; export * from './image'; export * from './indent'; +export * from './indicator-options'; export * from './item-dragging'; export * from './item-dxi'; export * from './item-text-format'; diff --git a/packages/devextreme-angular/src/ui/nested/indicator-options.ts b/packages/devextreme-angular/src/ui/nested/indicator-options.ts new file mode 100644 index 000000000000..54e62629ec93 --- /dev/null +++ b/packages/devextreme-angular/src/ui/nested/indicator-options.ts @@ -0,0 +1,73 @@ +/* tslint:disable:max-line-length */ + +/* tslint:disable:use-input-property-decorator */ + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf +} from '@angular/core'; + + + + + +import { + DxIntegrationModule, + NestedOptionHost, +} from 'devextreme-angular/core'; +import { DxoLoadIndicatorOptions } from './base/load-indicator-options'; + + +@Component({ + selector: 'dxo-indicator-options', + standalone: true, + template: '', + styles: [''], + imports: [ DxIntegrationModule ], + providers: [NestedOptionHost], + inputs: [ + 'animationType', + 'height', + 'indicatorSrc', + 'width' + ] +}) +export class DxoIndicatorOptionsComponent extends DxoLoadIndicatorOptions implements OnDestroy, OnInit { + + 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: [ + DxoIndicatorOptionsComponent + ], + exports: [ + DxoIndicatorOptionsComponent + ], +}) +export class DxoIndicatorOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/nested/load-panel.ts b/packages/devextreme-angular/src/ui/nested/load-panel.ts index 3fd6f45a87c4..303a0bb1a038 100644 --- a/packages/devextreme-angular/src/ui/nested/load-panel.ts +++ b/packages/devextreme-angular/src/ui/nested/load-panel.ts @@ -14,6 +14,7 @@ import { +import { LoadIndicatorOptions } from 'devextreme/!generated-members'; import { Mode } from 'devextreme/common'; import { @@ -48,6 +49,14 @@ export class DxoLoadPanelComponent extends NestedOption implements OnDestroy, On this._setOption('height', value); } + @Input() + get indicatorOptions(): LoadIndicatorOptions { + return this._getOption('indicatorOptions'); + } + set indicatorOptions(value: LoadIndicatorOptions) { + this._setOption('indicatorOptions', value); + } + @Input() get indicatorSrc(): string { return this._getOption('indicatorSrc'); diff --git a/packages/devextreme-angular/src/ui/tree-list/index.ts b/packages/devextreme-angular/src/ui/tree-list/index.ts index c77de990bd0f..309c938936bf 100644 --- a/packages/devextreme-angular/src/ui/tree-list/index.ts +++ b/packages/devextreme-angular/src/ui/tree-list/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 { LoadIndicatorOptions } from 'UNKNOWN_MODULE'; import { event } from 'devextreme/events/events.types'; import DxTreeList from 'devextreme/ui/tree_list'; @@ -96,6 +97,7 @@ import { DxoFilterRowModule } from 'devextreme-angular/ui/nested'; import { DxoOperationDescriptionsModule } from 'devextreme-angular/ui/nested'; import { DxoKeyboardNavigationModule } from 'devextreme-angular/ui/nested'; import { DxoLoadPanelModule } from 'devextreme-angular/ui/nested'; +import { DxoIndicatorOptionsModule } from 'devextreme-angular/ui/nested'; import { DxoPagerModule } from 'devextreme-angular/ui/nested'; import { DxoPagingModule } from 'devextreme-angular/ui/nested'; import { DxoRemoteOperationsModule } from 'devextreme-angular/ui/nested'; @@ -152,6 +154,7 @@ import { DxoTreeListGroupOperationDescriptionsModule } from 'devextreme-angular/ import { DxoTreeListHeaderFilterModule } from 'devextreme-angular/ui/tree-list/nested'; import { DxoTreeListHideModule } from 'devextreme-angular/ui/tree-list/nested'; import { DxoTreeListIconsModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListIndicatorOptionsModule } from 'devextreme-angular/ui/tree-list/nested'; import { DxiTreeListItemModule } from 'devextreme-angular/ui/tree-list/nested'; import { DxoTreeListKeyboardNavigationModule } from 'devextreme-angular/ui/tree-list/nested'; import { DxoTreeListLabelModule } from 'devextreme-angular/ui/tree-list/nested'; @@ -830,10 +833,10 @@ export class DxTreeListComponent 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?: LoadIndicatorOptions, 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?: LoadIndicatorOptions, indicatorSrc?: string, shading?: boolean, shadingColor?: string, showIndicator?: boolean, showPane?: boolean, text?: string, width?: number | string }) { this._setOption('loadPanel', value); } @@ -1879,7 +1882,7 @@ export class DxTreeListComponent 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?: LoadIndicatorOptions, indicatorSrc?: string, shading?: boolean, shadingColor?: string, showIndicator?: boolean, showPane?: boolean, text?: string, width?: number | string }>; /** @@ -2329,6 +2332,7 @@ export class DxTreeListComponent extends DxComponent DxoOperationDescriptionsModule, DxoKeyboardNavigationModule, DxoLoadPanelModule, + DxoIndicatorOptionsModule, DxoPagerModule, DxoPagingModule, DxoRemoteOperationsModule, @@ -2384,6 +2388,7 @@ export class DxTreeListComponent extends DxComponent DxoTreeListHeaderFilterModule, DxoTreeListHideModule, DxoTreeListIconsModule, + DxoTreeListIndicatorOptionsModule, DxiTreeListItemModule, DxoTreeListKeyboardNavigationModule, DxoTreeListLabelModule, @@ -2470,6 +2475,7 @@ export class DxTreeListComponent extends DxComponent DxoOperationDescriptionsModule, DxoKeyboardNavigationModule, DxoLoadPanelModule, + DxoIndicatorOptionsModule, DxoPagerModule, DxoPagingModule, DxoRemoteOperationsModule, @@ -2525,6 +2531,7 @@ export class DxTreeListComponent extends DxComponent DxoTreeListHeaderFilterModule, DxoTreeListHideModule, DxoTreeListIconsModule, + DxoTreeListIndicatorOptionsModule, DxiTreeListItemModule, DxoTreeListKeyboardNavigationModule, DxoTreeListLabelModule, diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/index.ts b/packages/devextreme-angular/src/ui/tree-list/nested/index.ts index 37430892d02e..1602e75ef8f4 100644 --- a/packages/devextreme-angular/src/ui/tree-list/nested/index.ts +++ b/packages/devextreme-angular/src/ui/tree-list/nested/index.ts @@ -43,6 +43,7 @@ export * from './group-operation-descriptions'; 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'; diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/indicator-options.ts b/packages/devextreme-angular/src/ui/tree-list/nested/indicator-options.ts new file mode 100644 index 000000000000..76090ace56d5 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/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-tree-list-indicator-options', + standalone: true, + template: '', + styles: [''], + imports: [ DxIntegrationModule ], + providers: [NestedOptionHost] +}) +export class DxoTreeListIndicatorOptionsComponent 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 indicatorSrc(): string { + return this._getOption('indicatorSrc'); + } + set indicatorSrc(value: string) { + this._setOption('indicatorSrc', 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: [ + DxoTreeListIndicatorOptionsComponent + ], + exports: [ + DxoTreeListIndicatorOptionsComponent + ], +}) +export class DxoTreeListIndicatorOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/load-panel.ts b/packages/devextreme-angular/src/ui/tree-list/nested/load-panel.ts index 105e0f538717..3118e717544d 100644 --- a/packages/devextreme-angular/src/ui/tree-list/nested/load-panel.ts +++ b/packages/devextreme-angular/src/ui/tree-list/nested/load-panel.ts @@ -15,6 +15,7 @@ import { import { Mode } from 'devextreme/common'; +import { LoadIndicatorOptions } from 'UNKNOWN_MODULE'; import { DxIntegrationModule, @@ -48,6 +49,14 @@ export class DxoTreeListLoadPanelComponent extends NestedOption implements OnDes this._setOption('height', value); } + @Input() + get indicatorOptions(): LoadIndicatorOptions { + return this._getOption('indicatorOptions'); + } + set indicatorOptions(value: LoadIndicatorOptions) { + this._setOption('indicatorOptions', value); + } + @Input() get indicatorSrc(): string { return this._getOption('indicatorSrc'); diff --git a/packages/devextreme-react/src/card-view.ts b/packages/devextreme-react/src/card-view.ts index 3d2dc5260d58..6f702d6864ad 100644 --- a/packages/devextreme-react/src/card-view.ts +++ b/packages/devextreme-react/src/card-view.ts @@ -24,7 +24,9 @@ import type { Format as LocalizationFormat } from "devextreme/common/core/locali import type { DataSourceOptions } from "devextreme/data/data_source"; import type { Store } from "devextreme/data/store"; import type { AIIntegration } from "devextreme/common/ai-integration"; +import type { LoadingAnimationType } from "devextreme/ui/load_indicator"; import type { event } from "devextreme/events/events.types"; +import type { LoadIndicatorOptions } from "UNKNOWN_MODULE"; import type dxForm from "devextreme/ui/form"; import type DataSource from "devextreme/data/data_source"; @@ -1661,6 +1663,27 @@ const Hide = Object.assign(_componen componentType: "option", }); +// owners: +// LoadPanel +type IIndicatorOptionsProps = React.PropsWithChildren<{ + animationType?: LoadingAnimationType; + height?: number | string | undefined; + indicatorSrc?: string; + width?: number | string | undefined; +}> +const _componentIndicatorOptions = (props: IIndicatorOptionsProps) => { + return React.createElement(NestedOption, { + ...props, + elementDescriptor: { + OptionName: "indicatorOptions", + }, + }); +}; + +const IndicatorOptions = Object.assign(_componentIndicatorOptions, { + componentType: "option", +}); + // owners: // CardHeader // TabPanelOptions @@ -1842,6 +1865,7 @@ type ILoadPanelProps = React.PropsWithChildren<{ hideOnParentScroll?: boolean; hint?: string | undefined; hoverStateEnabled?: boolean; + indicatorOptions?: LoadIndicatorOptions; indicatorSrc?: string; maxHeight?: number | string; maxWidth?: number | string; @@ -1881,6 +1905,7 @@ const _componentLoadPanel = (props: ILoadPanelProps) => { }, ExpectedChildren: { animation: { optionName: "animation", isCollectionItem: false }, + indicatorOptions: { optionName: "indicatorOptions", isCollectionItem: false }, position: { optionName: "position", isCollectionItem: false } }, }, @@ -2911,6 +2936,8 @@ export { IHeaderPanelProps, Hide, IHideProps, + IndicatorOptions, + IIndicatorOptionsProps, Item, IItemProps, Label, diff --git a/packages/devextreme-react/src/data-grid.ts b/packages/devextreme-react/src/data-grid.ts index c4d82bf99a94..332f79e50356 100644 --- a/packages/devextreme-react/src/data-grid.ts +++ b/packages/devextreme-react/src/data-grid.ts @@ -25,8 +25,10 @@ import type { dxPopupOptions, dxPopupToolbarItem, ToolbarLocation } from "devext import type { event } from "devextreme/events/events.types"; import type { EventInfo } from "devextreme/common/core/events"; import type { Component } from "devextreme/core/component"; +import type { LoadingAnimationType } from "devextreme/ui/load_indicator"; import type { LocateInMenuMode, ShowTextMode } from "devextreme/ui/toolbar"; import type { CollectionWidgetItem } from "devextreme/ui/collection/ui.collection_widget.base"; +import type { LoadIndicatorOptions } from "UNKNOWN_MODULE"; import type dxOverlay from "devextreme/ui/overlay"; import type DOMComponent from "devextreme/core/dom_component"; @@ -2087,6 +2089,27 @@ const Icons = Object.assign(_compon componentType: "option", }); +// owners: +// LoadPanel +type IIndicatorOptionsProps = React.PropsWithChildren<{ + animationType?: LoadingAnimationType; + height?: number | string | undefined; + indicatorSrc?: string; + width?: number | string | undefined; +}> +const _componentIndicatorOptions = (props: IIndicatorOptionsProps) => { + return React.createElement(NestedOption, { + ...props, + elementDescriptor: { + OptionName: "indicatorOptions", + }, + }); +}; + +const IndicatorOptions = Object.assign(_componentIndicatorOptions, { + componentType: "option", +}); + // owners: // Toolbar type IItemProps = React.PropsWithChildren<{ @@ -2187,6 +2210,7 @@ const Label = Object.assign(_compon type ILoadPanelProps = React.PropsWithChildren<{ enabled?: boolean | Mode; height?: number | string; + indicatorOptions?: LoadIndicatorOptions; indicatorSrc?: string; shading?: boolean; shadingColor?: string; @@ -2200,6 +2224,9 @@ const _componentLoadPanel = (props: ILoadPanelProps) => { ...props, elementDescriptor: { OptionName: "loadPanel", + ExpectedChildren: { + indicatorOptions: { optionName: "indicatorOptions", isCollectionItem: false } + }, }, }); }; @@ -3431,6 +3458,8 @@ export { IHideProps, Icons, IIconsProps, + IndicatorOptions, + IIndicatorOptionsProps, Item, IItemProps, KeyboardNavigation, diff --git a/packages/devextreme-react/src/load-panel.ts b/packages/devextreme-react/src/load-panel.ts index 974f0824fd61..8f6f5d7f36fe 100644 --- a/packages/devextreme-react/src/load-panel.ts +++ b/packages/devextreme-react/src/load-panel.ts @@ -11,6 +11,7 @@ import NestedOption from "./core/nested-option"; import type { PositionAlignment, HorizontalAlignment, VerticalAlignment, Direction } from "devextreme/common"; import type { PositionConfig, AnimationConfig, CollisionResolution, AnimationState, AnimationType, CollisionResolutionCombination } from "devextreme/common/core/animation"; import type { ContentReadyEvent, DisposingEvent, HiddenEvent, HidingEvent, InitializedEvent, ShowingEvent, ShownEvent } from "devextreme/ui/load_panel"; +import type { LoadingAnimationType } from "devextreme/ui/load_indicator"; type ReplaceFieldTypes = { [P in keyof TSource]: P extends keyof TReplacement ? TReplacement[P] : TSource[P]; @@ -60,6 +61,7 @@ const LoadPanel = memo( const expectedChildren = useMemo(() => ({ animation: { optionName: "animation", isCollectionItem: false }, + indicatorOptions: { optionName: "indicatorOptions", isCollectionItem: false }, position: { optionName: "position", isCollectionItem: false } }), []); @@ -217,6 +219,27 @@ const Hide = Object.assign(_componen componentType: "option", }); +// owners: +// LoadPanel +type IIndicatorOptionsProps = React.PropsWithChildren<{ + animationType?: LoadingAnimationType; + height?: number | string | undefined; + indicatorSrc?: string; + width?: number | string | undefined; +}> +const _componentIndicatorOptions = (props: IIndicatorOptionsProps) => { + return React.createElement(NestedOption, { + ...props, + elementDescriptor: { + OptionName: "indicatorOptions", + }, + }); +}; + +const IndicatorOptions = Object.assign(_componentIndicatorOptions, { + componentType: "option", +}); + // owners: // Position type IMyProps = React.PropsWithChildren<{ @@ -377,6 +400,8 @@ export { IFromProps, Hide, IHideProps, + IndicatorOptions, + IIndicatorOptionsProps, My, IMyProps, Offset, diff --git a/packages/devextreme-react/src/tree-list.ts b/packages/devextreme-react/src/tree-list.ts index 030b4fe4bce9..21b44a7d68a8 100644 --- a/packages/devextreme-react/src/tree-list.ts +++ b/packages/devextreme-react/src/tree-list.ts @@ -25,8 +25,10 @@ import type { Store } from "devextreme/data/store"; import type { dxPopupOptions, dxPopupToolbarItem, ToolbarLocation } from "devextreme/ui/popup"; import type { EventInfo } from "devextreme/common/core/events"; import type { Component } from "devextreme/core/component"; +import type { LoadingAnimationType } from "devextreme/ui/load_indicator"; import type { LocateInMenuMode, ShowTextMode } from "devextreme/ui/toolbar"; import type { CollectionWidgetItem } from "devextreme/ui/collection/ui.collection_widget.base"; +import type { LoadIndicatorOptions } from "UNKNOWN_MODULE"; import type dxOverlay from "devextreme/ui/overlay"; import type DOMComponent from "devextreme/core/dom_component"; @@ -1790,6 +1792,27 @@ const Icons = Object.assign(_compon componentType: "option", }); +// owners: +// LoadPanel +type IIndicatorOptionsProps = React.PropsWithChildren<{ + animationType?: LoadingAnimationType; + height?: number | string | undefined; + indicatorSrc?: string; + width?: number | string | undefined; +}> +const _componentIndicatorOptions = (props: IIndicatorOptionsProps) => { + return React.createElement(NestedOption, { + ...props, + elementDescriptor: { + OptionName: "indicatorOptions", + }, + }); +}; + +const IndicatorOptions = Object.assign(_componentIndicatorOptions, { + componentType: "option", +}); + // owners: // Toolbar type IItemProps = React.PropsWithChildren<{ @@ -1890,6 +1913,7 @@ const Label = Object.assign(_compon type ILoadPanelProps = React.PropsWithChildren<{ enabled?: boolean | Mode; height?: number | string; + indicatorOptions?: LoadIndicatorOptions; indicatorSrc?: string; shading?: boolean; shadingColor?: string; @@ -1903,6 +1927,9 @@ const _componentLoadPanel = (props: ILoadPanelProps) => { ...props, elementDescriptor: { OptionName: "loadPanel", + ExpectedChildren: { + indicatorOptions: { optionName: "indicatorOptions", isCollectionItem: false } + }, }, }); }; @@ -2990,6 +3017,8 @@ export { IHideProps, Icons, IIconsProps, + IndicatorOptions, + IIndicatorOptionsProps, Item, IItemProps, KeyboardNavigation, diff --git a/packages/devextreme-vue/src/card-view.ts b/packages/devextreme-vue/src/card-view.ts index 8e42bb997f42..7a803bde37c2 100644 --- a/packages/devextreme-vue/src/card-view.ts +++ b/packages/devextreme-vue/src/card-view.ts @@ -181,6 +181,9 @@ import { import { AIIntegration, } from "devextreme/common/ai-integration"; +import { + LoadingAnimationType, +} from "devextreme/ui/load_indicator"; import { dxTabPanelOptions, dxTabPanelItem, @@ -2079,6 +2082,29 @@ const DxHide = defineComponent(DxHideConfig); to: { isCollectionItem: false, optionName: "to" } }; +const DxIndicatorOptionsConfig = { + emits: { + "update:isActive": null, + "update:hoveredElement": null, + "update:animationType": null, + "update:height": null, + "update:indicatorSrc": null, + "update:width": null, + }, + props: { + animationType: String as PropType, + height: [Number, String], + indicatorSrc: String, + width: [Number, String] + } +}; + +prepareConfigurationComponentConfig(DxIndicatorOptionsConfig); + +const DxIndicatorOptions = defineComponent(DxIndicatorOptionsConfig); + +(DxIndicatorOptions as any).$_optionName = "indicatorOptions"; + const DxItemConfig = { emits: { "update:isActive": null, @@ -2232,6 +2258,7 @@ const DxLoadPanelConfig = { "update:hideOnParentScroll": null, "update:hint": null, "update:hoverStateEnabled": null, + "update:indicatorOptions": null, "update:indicatorSrc": null, "update:maxHeight": null, "update:maxWidth": null, @@ -2267,6 +2294,7 @@ const DxLoadPanelConfig = { hideOnParentScroll: Boolean, hint: String, hoverStateEnabled: Boolean, + indicatorOptions: Object, indicatorSrc: String, maxHeight: [Number, String], maxWidth: [Number, String], @@ -2300,6 +2328,7 @@ const DxLoadPanel = defineComponent(DxLoadPanelConfig); (DxLoadPanel as any).$_optionName = "loadPanel"; (DxLoadPanel as any).$_expectedChildren = { animation: { isCollectionItem: false, optionName: "animation" }, + indicatorOptions: { isCollectionItem: false, optionName: "indicatorOptions" }, position: { isCollectionItem: false, optionName: "position" } }; @@ -3291,6 +3320,7 @@ export { DxHeaderFilter, DxHeaderPanel, DxHide, + DxIndicatorOptions, DxItem, DxLabel, DxLoadPanel, diff --git a/packages/devextreme-vue/src/data-grid.ts b/packages/devextreme-vue/src/data-grid.ts index 824ff03cc4ed..e94a97e97bf7 100644 --- a/packages/devextreme-vue/src/data-grid.ts +++ b/packages/devextreme-vue/src/data-grid.ts @@ -238,6 +238,9 @@ import { import { Component, } from "devextreme/core/component"; +import { + LoadingAnimationType, +} from "devextreme/ui/load_indicator"; import { LocateInMenuMode, ShowTextMode, @@ -2720,6 +2723,29 @@ const DxIcons = defineComponent(DxIconsConfig); (DxIcons as any).$_optionName = "icons"; +const DxIndicatorOptionsConfig = { + emits: { + "update:isActive": null, + "update:hoveredElement": null, + "update:animationType": null, + "update:height": null, + "update:indicatorSrc": null, + "update:width": null, + }, + props: { + animationType: String as PropType, + height: [Number, String], + indicatorSrc: String, + width: [Number, String] + } +}; + +prepareConfigurationComponentConfig(DxIndicatorOptionsConfig); + +const DxIndicatorOptions = defineComponent(DxIndicatorOptionsConfig); + +(DxIndicatorOptions as any).$_optionName = "indicatorOptions"; + const DxItemConfig = { emits: { "update:isActive": null, @@ -2818,6 +2844,7 @@ const DxLoadPanelConfig = { "update:hoveredElement": null, "update:enabled": null, "update:height": null, + "update:indicatorOptions": null, "update:indicatorSrc": null, "update:shading": null, "update:shadingColor": null, @@ -2829,6 +2856,7 @@ const DxLoadPanelConfig = { props: { enabled: [Boolean, String] as PropType, height: [Number, String], + indicatorOptions: Object, indicatorSrc: String, shading: Boolean, shadingColor: String, @@ -2844,6 +2872,9 @@ prepareConfigurationComponentConfig(DxLoadPanelConfig); const DxLoadPanel = defineComponent(DxLoadPanelConfig); (DxLoadPanel as any).$_optionName = "loadPanel"; +(DxLoadPanel as any).$_expectedChildren = { + indicatorOptions: { isCollectionItem: false, optionName: "indicatorOptions" } +}; const DxLookupConfig = { emits: { @@ -4112,6 +4143,7 @@ export { DxHeaderFilter, DxHide, DxIcons, + DxIndicatorOptions, DxItem, DxKeyboardNavigation, DxLabel, diff --git a/packages/devextreme-vue/src/load-indicator.ts b/packages/devextreme-vue/src/load-indicator.ts index 179d067858ba..f0823e600b48 100644 --- a/packages/devextreme-vue/src/load-indicator.ts +++ b/packages/devextreme-vue/src/load-indicator.ts @@ -3,7 +3,6 @@ import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; import LoadIndicator, { Properties } from "devextreme/ui/load_indicator"; import { - LoadingAnimationType, ContentReadyEvent, DisposingEvent, InitializedEvent, @@ -11,11 +10,9 @@ import { } from "devextreme/ui/load_indicator"; type AccessibleOptions = Pick, elementAttr: Object as PropType>, height: [Number, String], hint: String, - indicatorSrc: String, onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, onDisposing: Function as PropType<((e: DisposingEvent) => void)>, onInitialized: Function as PropType<((e: InitializedEvent) => void)>, @@ -47,11 +42,9 @@ const componentConfig = { emits: { "update:isActive": null, "update:hoveredElement": null, - "update:animationType": null, "update:elementAttr": null, "update:height": null, "update:hint": null, - "update:indicatorSrc": null, "update:onContentReady": null, "update:onDisposing": null, "update:onInitialized": null, diff --git a/packages/devextreme-vue/src/load-panel.ts b/packages/devextreme-vue/src/load-panel.ts index 7c9d96fbf3c9..475d6c4047e3 100644 --- a/packages/devextreme-vue/src/load-panel.ts +++ b/packages/devextreme-vue/src/load-panel.ts @@ -29,6 +29,9 @@ import { AnimationType, CollisionResolutionCombination, } from "devextreme/common/core/animation"; +import { + LoadingAnimationType, +} from "devextreme/ui/load_indicator"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick, + height: [Number, String], + indicatorSrc: String, + width: [Number, String] + } +}; + +prepareConfigurationComponentConfig(DxIndicatorOptionsConfig); + +const DxIndicatorOptions = defineComponent(DxIndicatorOptionsConfig); + +(DxIndicatorOptions as any).$_optionName = "indicatorOptions"; + const DxMyConfig = { emits: { "update:isActive": null, @@ -461,6 +491,7 @@ export { DxCollision, DxFrom, DxHide, + DxIndicatorOptions, DxMy, DxOffset, DxPosition, diff --git a/packages/devextreme-vue/src/tree-list.ts b/packages/devextreme-vue/src/tree-list.ts index 1cd9edd473ab..cc015652dd1a 100644 --- a/packages/devextreme-vue/src/tree-list.ts +++ b/packages/devextreme-vue/src/tree-list.ts @@ -232,6 +232,9 @@ import { import { Component, } from "devextreme/core/component"; +import { + LoadingAnimationType, +} from "devextreme/ui/load_indicator"; import { LocateInMenuMode, ShowTextMode, @@ -2424,6 +2427,29 @@ const DxIcons = defineComponent(DxIconsConfig); (DxIcons as any).$_optionName = "icons"; +const DxIndicatorOptionsConfig = { + emits: { + "update:isActive": null, + "update:hoveredElement": null, + "update:animationType": null, + "update:height": null, + "update:indicatorSrc": null, + "update:width": null, + }, + props: { + animationType: String as PropType, + height: [Number, String], + indicatorSrc: String, + width: [Number, String] + } +}; + +prepareConfigurationComponentConfig(DxIndicatorOptionsConfig); + +const DxIndicatorOptions = defineComponent(DxIndicatorOptionsConfig); + +(DxIndicatorOptions as any).$_optionName = "indicatorOptions"; + const DxItemConfig = { emits: { "update:isActive": null, @@ -2522,6 +2548,7 @@ const DxLoadPanelConfig = { "update:hoveredElement": null, "update:enabled": null, "update:height": null, + "update:indicatorOptions": null, "update:indicatorSrc": null, "update:shading": null, "update:shadingColor": null, @@ -2533,6 +2560,7 @@ const DxLoadPanelConfig = { props: { enabled: [Boolean, String] as PropType, height: [Number, String], + indicatorOptions: Object, indicatorSrc: String, shading: Boolean, shadingColor: String, @@ -2548,6 +2576,9 @@ prepareConfigurationComponentConfig(DxLoadPanelConfig); const DxLoadPanel = defineComponent(DxLoadPanelConfig); (DxLoadPanel as any).$_optionName = "loadPanel"; +(DxLoadPanel as any).$_expectedChildren = { + indicatorOptions: { isCollectionItem: false, optionName: "indicatorOptions" } +}; const DxLookupConfig = { emits: { @@ -3687,6 +3718,7 @@ export { DxHeaderFilter, DxHide, DxIcons, + DxIndicatorOptions, DxItem, DxKeyboardNavigation, DxLabel, diff --git a/packages/devextreme/js/common/grids.d.ts b/packages/devextreme/js/common/grids.d.ts index dcbe014c7711..e7b4c9dd6000 100644 --- a/packages/devextreme/js/common/grids.d.ts +++ b/packages/devextreme/js/common/grids.d.ts @@ -2594,7 +2594,7 @@ export type LoadPanel = { /** * @docid GridBaseOptions.loadPanel.indicatorSrc * @default "" - * @deprecated Use indicatorSrc in GridBaseOptions.loadPanel.indicatorOptions instead + * @deprecated */ indicatorSrc?: string; /** diff --git a/packages/devextreme/js/exporter/export_load_panel.d.ts b/packages/devextreme/js/exporter/export_load_panel.d.ts index e77b34f72be5..2091335bd33c 100644 --- a/packages/devextreme/js/exporter/export_load_panel.d.ts +++ b/packages/devextreme/js/exporter/export_load_panel.d.ts @@ -34,7 +34,7 @@ export interface ExportLoadPanel { /** * @docid * @default "" - * @deprecated Use indicatorSrc in indicatorOptions instead + * @deprecated */ indicatorSrc?: string; /** diff --git a/packages/devextreme/js/ui/load_indicator.d.ts b/packages/devextreme/js/ui/load_indicator.d.ts index 84d16a889183..523b901f1510 100644 --- a/packages/devextreme/js/ui/load_indicator.d.ts +++ b/packages/devextreme/js/ui/load_indicator.d.ts @@ -44,7 +44,7 @@ export type OptionChangedEvent = EventInfo & ChangedOptionInfo; export type LoadingAnimationType = 'circle' | 'sparkle'; /** @public */ -export interface LoadIndicatorOptions { +export type LoadIndicatorOptions = { /** * @docid * @default 'circle' @@ -69,7 +69,7 @@ export interface LoadIndicatorOptions { * @public */ width?: number | string | undefined; -} +}; /** * @deprecated use Properties instead diff --git a/packages/devextreme/js/ui/load_panel.d.ts b/packages/devextreme/js/ui/load_panel.d.ts index c698cdc711f2..fa0a09508724 100644 --- a/packages/devextreme/js/ui/load_panel.d.ts +++ b/packages/devextreme/js/ui/load_panel.d.ts @@ -131,7 +131,7 @@ export interface dxLoadPanelOptions extends dxOverlayOptions { /** * @docid * @default "" - * @deprecated Use indicatorSrc in indicatorOptions instead + * @deprecated */ indicatorSrc?: string; /** diff --git a/packages/devextreme/ts/dx.all.d.ts b/packages/devextreme/ts/dx.all.d.ts index 471c7a0c00b8..f07240665860 100644 --- a/packages/devextreme/ts/dx.all.d.ts +++ b/packages/devextreme/ts/dx.all.d.ts @@ -22255,7 +22255,7 @@ declare module DevExpress.ui { */ export type InitializedEvent = DevExpress.common.core.events.InitializedEventInfo; - export interface LoadIndicatorOptions { + export type LoadIndicatorOptions = { /** * [descr:LoadIndicatorOptions.animationType] */ @@ -22272,7 +22272,7 @@ declare module DevExpress.ui { * [descr:LoadIndicatorOptions.width] */ width?: number | string | undefined; - } + }; export type LoadingAnimationType = 'circle' | 'sparkle'; /** * [descr:_ui_load_indicator_OptionChangedEvent] From 0ddeb306357241f7585a6cfe5e785447cf0bb0bd Mon Sep 17 00:00:00 2001 From: Julia Volkova Date: Thu, 2 Oct 2025 16:49:57 +0300 Subject: [PATCH 05/20] regenerated load-indicator --- .../src/ui/load-indicator/index.ts | 48 +++++++++++++++++-- packages/devextreme-vue/src/load-indicator.ts | 7 +++ packages/devextreme/js/ui/load_indicator.d.ts | 1 + 3 files changed, 53 insertions(+), 3 deletions(-) diff --git a/packages/devextreme-angular/src/ui/load-indicator/index.ts b/packages/devextreme-angular/src/ui/load-indicator/index.ts index 794406a6dd38..3be3a93fab83 100644 --- a/packages/devextreme-angular/src/ui/load-indicator/index.ts +++ b/packages/devextreme-angular/src/ui/load-indicator/index.ts @@ -17,7 +17,7 @@ import { } from '@angular/core'; -import { ContentReadyEvent, DisposingEvent, InitializedEvent, OptionChangedEvent } from 'devextreme/ui/load_indicator'; +import { LoadingAnimationType, ContentReadyEvent, DisposingEvent, InitializedEvent, OptionChangedEvent } from 'devextreme/ui/load_indicator'; import DxLoadIndicator from 'devextreme/ui/load_indicator'; @@ -55,6 +55,19 @@ import { export class DxLoadIndicatorComponent extends DxComponent implements OnDestroy { instance: DxLoadIndicator = null; + /** + * [descr:LoadIndicatorOptions.animationType] + + */ + @Input() + get animationType(): LoadingAnimationType { + return this._getOption('animationType'); + } + set animationType(value: LoadingAnimationType) { + this._setOption('animationType', value); + } + + /** * [descr:DOMComponentOptions.elementAttr] @@ -69,7 +82,7 @@ export class DxLoadIndicatorComponent extends DxComponent implements OnDestroy { /** - * [descr:DOMComponentOptions.height] + * [descr:LoadIndicatorOptions.height] */ @Input() @@ -94,6 +107,19 @@ export class DxLoadIndicatorComponent extends DxComponent implements OnDestroy { } + /** + * [descr:LoadIndicatorOptions.indicatorSrc] + + */ + @Input() + get indicatorSrc(): string { + return this._getOption('indicatorSrc'); + } + set indicatorSrc(value: string) { + this._setOption('indicatorSrc', value); + } + + /** * [descr:DOMComponentOptions.rtlEnabled] @@ -121,7 +147,7 @@ export class DxLoadIndicatorComponent extends DxComponent implements OnDestroy { /** - * [descr:DOMComponentOptions.width] + * [descr:LoadIndicatorOptions.width] */ @Input() @@ -164,6 +190,13 @@ export class DxLoadIndicatorComponent extends DxComponent implements OnDestroy { */ @Output() onOptionChanged: EventEmitter; + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() animationTypeChange: EventEmitter; + /** * This member supports the internal infrastructure and is not intended to be used directly from your code. @@ -185,6 +218,13 @@ export class DxLoadIndicatorComponent extends DxComponent implements OnDestroy { */ @Output() hintChange: EventEmitter; + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() indicatorSrcChange: EventEmitter; + /** * This member supports the internal infrastructure and is not intended to be used directly from your code. @@ -226,9 +266,11 @@ export class DxLoadIndicatorComponent extends DxComponent implements OnDestroy { { subscribe: 'disposing', emit: 'onDisposing' }, { subscribe: 'initialized', emit: 'onInitialized' }, { subscribe: 'optionChanged', emit: 'onOptionChanged' }, + { emit: 'animationTypeChange' }, { emit: 'elementAttrChange' }, { emit: 'heightChange' }, { emit: 'hintChange' }, + { emit: 'indicatorSrcChange' }, { emit: 'rtlEnabledChange' }, { emit: 'visibleChange' }, { emit: 'widthChange' } diff --git a/packages/devextreme-vue/src/load-indicator.ts b/packages/devextreme-vue/src/load-indicator.ts index f0823e600b48..179d067858ba 100644 --- a/packages/devextreme-vue/src/load-indicator.ts +++ b/packages/devextreme-vue/src/load-indicator.ts @@ -3,6 +3,7 @@ import { defineComponent } from "vue"; import { prepareComponentConfig } from "./core/index"; import LoadIndicator, { Properties } from "devextreme/ui/load_indicator"; import { + LoadingAnimationType, ContentReadyEvent, DisposingEvent, InitializedEvent, @@ -10,9 +11,11 @@ import { } from "devextreme/ui/load_indicator"; type AccessibleOptions = Pick, elementAttr: Object as PropType>, height: [Number, String], hint: String, + indicatorSrc: String, onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>, onDisposing: Function as PropType<((e: DisposingEvent) => void)>, onInitialized: Function as PropType<((e: InitializedEvent) => void)>, @@ -42,9 +47,11 @@ const componentConfig = { emits: { "update:isActive": null, "update:hoveredElement": null, + "update:animationType": null, "update:elementAttr": null, "update:height": null, "update:hint": null, + "update:indicatorSrc": null, "update:onContentReady": null, "update:onDisposing": null, "update:onInitialized": null, diff --git a/packages/devextreme/js/ui/load_indicator.d.ts b/packages/devextreme/js/ui/load_indicator.d.ts index 523b901f1510..633dc4171362 100644 --- a/packages/devextreme/js/ui/load_indicator.d.ts +++ b/packages/devextreme/js/ui/load_indicator.d.ts @@ -75,6 +75,7 @@ export type LoadIndicatorOptions = { * @deprecated use Properties instead * @namespace DevExpress.ui * @docid + * @inherits LoadIndicatorOptions */ export interface dxLoadIndicatorOptions extends WidgetOptions, LoadIndicatorOptions {} From f43676ad0afd7eaf9c1408b2992195d374f2e870 Mon Sep 17 00:00:00 2001 From: Julia Volkova Date: Thu, 2 Oct 2025 17:48:22 +0300 Subject: [PATCH 06/20] chenged LoadIndicatorOptions to interface --- .../src/ui/card-view/nested/load-panel.ts | 2 +- packages/devextreme-angular/src/ui/data-grid/index.ts | 2 +- .../src/ui/data-grid/nested/load-panel.ts | 2 +- packages/devextreme-angular/src/ui/load-panel/index.ts | 2 +- packages/devextreme-angular/src/ui/nested/load-panel.ts | 2 +- packages/devextreme-angular/src/ui/tree-list/index.ts | 2 +- .../src/ui/tree-list/nested/load-panel.ts | 2 +- packages/devextreme-react/src/card-view.ts | 3 +-- packages/devextreme-react/src/data-grid.ts | 3 +-- packages/devextreme-react/src/tree-list.ts | 3 +-- packages/devextreme-vue/src/card-view.ts | 3 ++- packages/devextreme-vue/src/data-grid.ts | 3 ++- packages/devextreme-vue/src/load-panel.ts | 9 +++++---- packages/devextreme-vue/src/tree-list.ts | 3 ++- packages/devextreme/js/ui/load_indicator.d.ts | 9 ++++++--- packages/devextreme/ts/dx.all.d.ts | 7 +++++-- 16 files changed, 32 insertions(+), 25 deletions(-) diff --git a/packages/devextreme-angular/src/ui/card-view/nested/load-panel.ts b/packages/devextreme-angular/src/ui/card-view/nested/load-panel.ts index a975e6fb6bc2..cc9614eaf443 100644 --- a/packages/devextreme-angular/src/ui/card-view/nested/load-panel.ts +++ b/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 { LoadIndicatorOptions } from 'UNKNOWN_MODULE'; +import { LoadIndicatorOptions } from 'devextreme/ui/load_indicator'; import { ContentReadyEvent, DisposingEvent, HiddenEvent, HidingEvent, InitializedEvent, OptionChangedEvent, ShowingEvent, ShownEvent } from 'devextreme/ui/load_panel'; import { PositionAlignment } from 'devextreme/common'; diff --git a/packages/devextreme-angular/src/ui/data-grid/index.ts b/packages/devextreme-angular/src/ui/data-grid/index.ts index fbdef590ff89..84a919181c42 100644 --- a/packages/devextreme-angular/src/ui/data-grid/index.ts +++ b/packages/devextreme-angular/src/ui/data-grid/index.ts @@ -36,7 +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 { LoadIndicatorOptions } from 'UNKNOWN_MODULE'; +import { LoadIndicatorOptions } from 'devextreme/ui/load_indicator'; import { event } from 'devextreme/events/events.types'; import { Format } from 'devextreme/common/core/localization'; diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/load-panel.ts b/packages/devextreme-angular/src/ui/data-grid/nested/load-panel.ts index 48b10824aa73..83e36435cb27 100644 --- a/packages/devextreme-angular/src/ui/data-grid/nested/load-panel.ts +++ b/packages/devextreme-angular/src/ui/data-grid/nested/load-panel.ts @@ -15,7 +15,7 @@ import { import { Mode } from 'devextreme/common'; -import { LoadIndicatorOptions } from 'UNKNOWN_MODULE'; +import { LoadIndicatorOptions } from 'devextreme/ui/load_indicator'; import { DxIntegrationModule, diff --git a/packages/devextreme-angular/src/ui/load-panel/index.ts b/packages/devextreme-angular/src/ui/load-panel/index.ts index 9ae87ad66197..88c206f901ed 100644 --- a/packages/devextreme-angular/src/ui/load-panel/index.ts +++ b/packages/devextreme-angular/src/ui/load-panel/index.ts @@ -19,7 +19,7 @@ import { import { AnimationConfig, PositionConfig } from 'devextreme/common/core/animation'; import { event } from 'devextreme/events/events.types'; -import { LoadIndicatorOptions } from 'UNKNOWN_MODULE'; +import { LoadIndicatorOptions } from 'devextreme/ui/load_indicator'; import { ContentReadyEvent, DisposingEvent, HiddenEvent, HidingEvent, InitializedEvent, OptionChangedEvent, ShowingEvent, ShownEvent } from 'devextreme/ui/load_panel'; import { PositionAlignment } from 'devextreme/common'; diff --git a/packages/devextreme-angular/src/ui/nested/load-panel.ts b/packages/devextreme-angular/src/ui/nested/load-panel.ts index 303a0bb1a038..2232797c2c96 100644 --- a/packages/devextreme-angular/src/ui/nested/load-panel.ts +++ b/packages/devextreme-angular/src/ui/nested/load-panel.ts @@ -14,8 +14,8 @@ import { -import { LoadIndicatorOptions } from 'devextreme/!generated-members'; import { Mode } from 'devextreme/common'; +import { LoadIndicatorOptions } from 'devextreme/ui/load_indicator'; import { DxIntegrationModule, diff --git a/packages/devextreme-angular/src/ui/tree-list/index.ts b/packages/devextreme-angular/src/ui/tree-list/index.ts index 309c938936bf..e9b31c38b837 100644 --- a/packages/devextreme-angular/src/ui/tree-list/index.ts +++ b/packages/devextreme-angular/src/ui/tree-list/index.ts @@ -36,7 +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 { LoadIndicatorOptions } from 'UNKNOWN_MODULE'; +import { LoadIndicatorOptions } from 'devextreme/ui/load_indicator'; import { event } from 'devextreme/events/events.types'; import DxTreeList from 'devextreme/ui/tree_list'; diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/load-panel.ts b/packages/devextreme-angular/src/ui/tree-list/nested/load-panel.ts index 3118e717544d..25cf33ee2f9a 100644 --- a/packages/devextreme-angular/src/ui/tree-list/nested/load-panel.ts +++ b/packages/devextreme-angular/src/ui/tree-list/nested/load-panel.ts @@ -15,7 +15,7 @@ import { import { Mode } from 'devextreme/common'; -import { LoadIndicatorOptions } from 'UNKNOWN_MODULE'; +import { LoadIndicatorOptions } from 'devextreme/ui/load_indicator'; import { DxIntegrationModule, diff --git a/packages/devextreme-react/src/card-view.ts b/packages/devextreme-react/src/card-view.ts index 6f702d6864ad..bb37c0f86c4c 100644 --- a/packages/devextreme-react/src/card-view.ts +++ b/packages/devextreme-react/src/card-view.ts @@ -24,9 +24,8 @@ import type { Format as LocalizationFormat } from "devextreme/common/core/locali import type { DataSourceOptions } from "devextreme/data/data_source"; import type { Store } from "devextreme/data/store"; import type { AIIntegration } from "devextreme/common/ai-integration"; -import type { LoadingAnimationType } from "devextreme/ui/load_indicator"; +import type { LoadingAnimationType, LoadIndicatorOptions } from "devextreme/ui/load_indicator"; import type { event } from "devextreme/events/events.types"; -import type { LoadIndicatorOptions } from "UNKNOWN_MODULE"; import type dxForm from "devextreme/ui/form"; import type DataSource from "devextreme/data/data_source"; diff --git a/packages/devextreme-react/src/data-grid.ts b/packages/devextreme-react/src/data-grid.ts index 332f79e50356..c3bc4d0520b2 100644 --- a/packages/devextreme-react/src/data-grid.ts +++ b/packages/devextreme-react/src/data-grid.ts @@ -25,10 +25,9 @@ import type { dxPopupOptions, dxPopupToolbarItem, ToolbarLocation } from "devext import type { event } from "devextreme/events/events.types"; import type { EventInfo } from "devextreme/common/core/events"; import type { Component } from "devextreme/core/component"; -import type { LoadingAnimationType } from "devextreme/ui/load_indicator"; +import type { LoadingAnimationType, LoadIndicatorOptions } from "devextreme/ui/load_indicator"; import type { LocateInMenuMode, ShowTextMode } from "devextreme/ui/toolbar"; import type { CollectionWidgetItem } from "devextreme/ui/collection/ui.collection_widget.base"; -import type { LoadIndicatorOptions } from "UNKNOWN_MODULE"; import type dxOverlay from "devextreme/ui/overlay"; import type DOMComponent from "devextreme/core/dom_component"; diff --git a/packages/devextreme-react/src/tree-list.ts b/packages/devextreme-react/src/tree-list.ts index 21b44a7d68a8..1cf27243e6c5 100644 --- a/packages/devextreme-react/src/tree-list.ts +++ b/packages/devextreme-react/src/tree-list.ts @@ -25,10 +25,9 @@ import type { Store } from "devextreme/data/store"; import type { dxPopupOptions, dxPopupToolbarItem, ToolbarLocation } from "devextreme/ui/popup"; import type { EventInfo } from "devextreme/common/core/events"; import type { Component } from "devextreme/core/component"; -import type { LoadingAnimationType } from "devextreme/ui/load_indicator"; +import type { LoadingAnimationType, LoadIndicatorOptions } from "devextreme/ui/load_indicator"; import type { LocateInMenuMode, ShowTextMode } from "devextreme/ui/toolbar"; import type { CollectionWidgetItem } from "devextreme/ui/collection/ui.collection_widget.base"; -import type { LoadIndicatorOptions } from "UNKNOWN_MODULE"; import type dxOverlay from "devextreme/ui/overlay"; import type DOMComponent from "devextreme/core/dom_component"; diff --git a/packages/devextreme-vue/src/card-view.ts b/packages/devextreme-vue/src/card-view.ts index 7a803bde37c2..cec470f3062c 100644 --- a/packages/devextreme-vue/src/card-view.ts +++ b/packages/devextreme-vue/src/card-view.ts @@ -183,6 +183,7 @@ import { } from "devextreme/common/ai-integration"; import { LoadingAnimationType, + LoadIndicatorOptions, } from "devextreme/ui/load_indicator"; import { dxTabPanelOptions, @@ -2294,7 +2295,7 @@ const DxLoadPanelConfig = { hideOnParentScroll: Boolean, hint: String, hoverStateEnabled: Boolean, - indicatorOptions: Object, + indicatorOptions: Object as PropType, indicatorSrc: String, maxHeight: [Number, String], maxWidth: [Number, String], diff --git a/packages/devextreme-vue/src/data-grid.ts b/packages/devextreme-vue/src/data-grid.ts index e94a97e97bf7..ab42b6715476 100644 --- a/packages/devextreme-vue/src/data-grid.ts +++ b/packages/devextreme-vue/src/data-grid.ts @@ -240,6 +240,7 @@ import { } from "devextreme/core/component"; import { LoadingAnimationType, + LoadIndicatorOptions, } from "devextreme/ui/load_indicator"; import { LocateInMenuMode, @@ -2856,7 +2857,7 @@ const DxLoadPanelConfig = { props: { enabled: [Boolean, String] as PropType, height: [Number, String], - indicatorOptions: Object, + indicatorOptions: Object as PropType, indicatorSrc: String, shading: Boolean, shadingColor: String, diff --git a/packages/devextreme-vue/src/load-panel.ts b/packages/devextreme-vue/src/load-panel.ts index 475d6c4047e3..f57f4863264f 100644 --- a/packages/devextreme-vue/src/load-panel.ts +++ b/packages/devextreme-vue/src/load-panel.ts @@ -5,6 +5,10 @@ import LoadPanel, { Properties } from "devextreme/ui/load_panel"; import { event, } from "devextreme/events/events.types"; +import { + LoadIndicatorOptions, + LoadingAnimationType, +} from "devextreme/ui/load_indicator"; import { ContentReadyEvent, DisposingEvent, @@ -29,9 +33,6 @@ import { AnimationType, CollisionResolutionCombination, } from "devextreme/common/core/animation"; -import { - LoadingAnimationType, -} from "devextreme/ui/load_indicator"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick, indicatorSrc: String, maxHeight: [Number, String], maxWidth: [Number, String], diff --git a/packages/devextreme-vue/src/tree-list.ts b/packages/devextreme-vue/src/tree-list.ts index cc015652dd1a..15b3b0eefa40 100644 --- a/packages/devextreme-vue/src/tree-list.ts +++ b/packages/devextreme-vue/src/tree-list.ts @@ -234,6 +234,7 @@ import { } from "devextreme/core/component"; import { LoadingAnimationType, + LoadIndicatorOptions, } from "devextreme/ui/load_indicator"; import { LocateInMenuMode, @@ -2560,7 +2561,7 @@ const DxLoadPanelConfig = { props: { enabled: [Boolean, String] as PropType, height: [Number, String], - indicatorOptions: Object, + indicatorOptions: Object as PropType, indicatorSrc: String, shading: Boolean, shadingColor: String, diff --git a/packages/devextreme/js/ui/load_indicator.d.ts b/packages/devextreme/js/ui/load_indicator.d.ts index 633dc4171362..a6e6d2f16d36 100644 --- a/packages/devextreme/js/ui/load_indicator.d.ts +++ b/packages/devextreme/js/ui/load_indicator.d.ts @@ -43,8 +43,11 @@ export type OptionChangedEvent = EventInfo & ChangedOptionInfo; /** @public */ export type LoadingAnimationType = 'circle' | 'sparkle'; -/** @public */ -export type LoadIndicatorOptions = { +/** + * @docid + * @public + */ +export interface LoadIndicatorOptions { /** * @docid * @default 'circle' @@ -69,7 +72,7 @@ export type LoadIndicatorOptions = { * @public */ width?: number | string | undefined; -}; +} /** * @deprecated use Properties instead diff --git a/packages/devextreme/ts/dx.all.d.ts b/packages/devextreme/ts/dx.all.d.ts index f07240665860..ffb8b67ab045 100644 --- a/packages/devextreme/ts/dx.all.d.ts +++ b/packages/devextreme/ts/dx.all.d.ts @@ -22255,7 +22255,10 @@ declare module DevExpress.ui { */ export type InitializedEvent = DevExpress.common.core.events.InitializedEventInfo; - export type LoadIndicatorOptions = { + /** + * [descr:LoadIndicatorOptions] + */ + export interface LoadIndicatorOptions { /** * [descr:LoadIndicatorOptions.animationType] */ @@ -22272,7 +22275,7 @@ declare module DevExpress.ui { * [descr:LoadIndicatorOptions.width] */ width?: number | string | undefined; - }; + } export type LoadingAnimationType = 'circle' | 'sparkle'; /** * [descr:_ui_load_indicator_OptionChangedEvent] From 26bd20968027c185b4e9ab3eff68958c4048c779 Mon Sep 17 00:00:00 2001 From: Julia Volkova Date: Thu, 2 Oct 2025 19:01:38 +0300 Subject: [PATCH 07/20] chnged LoadIndicatorOptions interface to type for validate-declarations --- packages/devextreme-vue/src/card-view.ts | 2 +- packages/devextreme-vue/src/data-grid.ts | 2 +- packages/devextreme-vue/src/load-panel.ts | 2 +- packages/devextreme-vue/src/tree-list.ts | 2 +- packages/devextreme/js/ui/load_indicator.d.ts | 4 ++-- packages/devextreme/ts/dx.all.d.ts | 4 ++-- 6 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/devextreme-vue/src/card-view.ts b/packages/devextreme-vue/src/card-view.ts index cec470f3062c..378d589df6ce 100644 --- a/packages/devextreme-vue/src/card-view.ts +++ b/packages/devextreme-vue/src/card-view.ts @@ -2295,7 +2295,7 @@ const DxLoadPanelConfig = { hideOnParentScroll: Boolean, hint: String, hoverStateEnabled: Boolean, - indicatorOptions: Object as PropType, + indicatorOptions: Object as PropType>, indicatorSrc: String, maxHeight: [Number, String], maxWidth: [Number, String], diff --git a/packages/devextreme-vue/src/data-grid.ts b/packages/devextreme-vue/src/data-grid.ts index ab42b6715476..10fd33e42cca 100644 --- a/packages/devextreme-vue/src/data-grid.ts +++ b/packages/devextreme-vue/src/data-grid.ts @@ -2857,7 +2857,7 @@ const DxLoadPanelConfig = { props: { enabled: [Boolean, String] as PropType, height: [Number, String], - indicatorOptions: Object as PropType, + indicatorOptions: Object as PropType>, indicatorSrc: String, shading: Boolean, shadingColor: String, diff --git a/packages/devextreme-vue/src/load-panel.ts b/packages/devextreme-vue/src/load-panel.ts index f57f4863264f..364700cc80d9 100644 --- a/packages/devextreme-vue/src/load-panel.ts +++ b/packages/devextreme-vue/src/load-panel.ts @@ -88,7 +88,7 @@ const componentConfig = { hideOnParentScroll: Boolean, hint: String, hoverStateEnabled: Boolean, - indicatorOptions: Object as PropType, + indicatorOptions: Object as PropType>, indicatorSrc: String, maxHeight: [Number, String], maxWidth: [Number, String], diff --git a/packages/devextreme-vue/src/tree-list.ts b/packages/devextreme-vue/src/tree-list.ts index 15b3b0eefa40..b8909a39b2ce 100644 --- a/packages/devextreme-vue/src/tree-list.ts +++ b/packages/devextreme-vue/src/tree-list.ts @@ -2561,7 +2561,7 @@ const DxLoadPanelConfig = { props: { enabled: [Boolean, String] as PropType, height: [Number, String], - indicatorOptions: Object as PropType, + indicatorOptions: Object as PropType>, indicatorSrc: String, shading: Boolean, shadingColor: String, diff --git a/packages/devextreme/js/ui/load_indicator.d.ts b/packages/devextreme/js/ui/load_indicator.d.ts index a6e6d2f16d36..803ec9ed9dc3 100644 --- a/packages/devextreme/js/ui/load_indicator.d.ts +++ b/packages/devextreme/js/ui/load_indicator.d.ts @@ -47,7 +47,7 @@ export type LoadingAnimationType = 'circle' | 'sparkle'; * @docid * @public */ -export interface LoadIndicatorOptions { +export type LoadIndicatorOptions = { /** * @docid * @default 'circle' @@ -72,7 +72,7 @@ export interface LoadIndicatorOptions { * @public */ width?: number | string | undefined; -} +}; /** * @deprecated use Properties instead diff --git a/packages/devextreme/ts/dx.all.d.ts b/packages/devextreme/ts/dx.all.d.ts index ffb8b67ab045..fa8983deadef 100644 --- a/packages/devextreme/ts/dx.all.d.ts +++ b/packages/devextreme/ts/dx.all.d.ts @@ -22258,7 +22258,7 @@ declare module DevExpress.ui { /** * [descr:LoadIndicatorOptions] */ - export interface LoadIndicatorOptions { + export type LoadIndicatorOptions = { /** * [descr:LoadIndicatorOptions.animationType] */ @@ -22275,7 +22275,7 @@ declare module DevExpress.ui { * [descr:LoadIndicatorOptions.width] */ width?: number | string | undefined; - } + }; export type LoadingAnimationType = 'circle' | 'sparkle'; /** * [descr:_ui_load_indicator_OptionChangedEvent] From c0ec04deb824744b7fbbbe4fd3b7548ea6225482 Mon Sep 17 00:00:00 2001 From: Mikhail Preyskurantov <5574159+mpreyskurantov@users.noreply.github.com> Date: Fri, 3 Oct 2025 14:52:48 +0300 Subject: [PATCH 08/20] type + prop | LoadIndicatorOptions / indicatorOptions | exclude from ng --- packages/devextreme-metadata/make-angular-metadata.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/devextreme-metadata/make-angular-metadata.ts b/packages/devextreme-metadata/make-angular-metadata.ts index 795cd293875a..4d3e3f6a5904 100644 --- a/packages/devextreme-metadata/make-angular-metadata.ts +++ b/packages/devextreme-metadata/make-angular-metadata.ts @@ -17,6 +17,8 @@ Ng.makeMetadata({ removeMembers(/\/form:dxFormSimpleItem\.aiOptions/), removeMembers(/\/form:FormPredefinedButtonItem/), removeMembers(/\/drop_down_editor\/ui.drop_down_editor:FieldAddons/), + removeMembers(/\/load_indicator:LoadIndicatorOptions/), + removeMembers(/\/load_panel:dxLoadPanelOptions.indicatorOptions/), removeMembers(/\/scheduler:Toolbar/), removeMembers(/\/scheduler:dxSchedulerOptions\.editing\.form/), removeMembers(/\/stepper:/), From 0fe247fa8e69d99ec91b2b7b25b50d26e4719bf5 Mon Sep 17 00:00:00 2001 From: Mikhail Preyskurantov <5574159+mpreyskurantov@users.noreply.github.com> Date: Fri, 3 Oct 2025 14:53:03 +0300 Subject: [PATCH 09/20] type + prop | LoadIndicatorOptions / indicatorOptions | exclude from ng | regenerate --- .../src/ui/data-grid/index.ts | 3 - .../src/ui/load-panel/index.ts | 6 -- .../src/ui/nested/base/index.ts | 1 - .../ui/nested/base/load-indicator-options.ts | 41 ----------- .../devextreme-angular/src/ui/nested/index.ts | 1 - .../src/ui/nested/indicator-options.ts | 73 ------------------- .../src/ui/nested/load-panel.ts | 5 +- .../src/ui/tree-list/index.ts | 3 - 8 files changed, 2 insertions(+), 131 deletions(-) delete mode 100644 packages/devextreme-angular/src/ui/nested/base/load-indicator-options.ts delete mode 100644 packages/devextreme-angular/src/ui/nested/indicator-options.ts diff --git a/packages/devextreme-angular/src/ui/data-grid/index.ts b/packages/devextreme-angular/src/ui/data-grid/index.ts index 84a919181c42..3d34efcfc133 100644 --- a/packages/devextreme-angular/src/ui/data-grid/index.ts +++ b/packages/devextreme-angular/src/ui/data-grid/index.ts @@ -101,7 +101,6 @@ import { DxoGroupingModule } from 'devextreme-angular/ui/nested'; import { DxoGroupPanelModule } from 'devextreme-angular/ui/nested'; import { DxoKeyboardNavigationModule } from 'devextreme-angular/ui/nested'; import { DxoLoadPanelModule } from 'devextreme-angular/ui/nested'; -import { DxoIndicatorOptionsModule } from 'devextreme-angular/ui/nested'; import { DxoMasterDetailModule } from 'devextreme-angular/ui/nested'; import { DxoPagerModule } from 'devextreme-angular/ui/nested'; import { DxoPagingModule } from 'devextreme-angular/ui/nested'; @@ -2381,7 +2380,6 @@ export class DxDataGridComponent extends DxComponent DxoGroupPanelModule, DxoKeyboardNavigationModule, DxoLoadPanelModule, - DxoIndicatorOptionsModule, DxoMasterDetailModule, DxoPagerModule, DxoPagingModule, @@ -2545,7 +2543,6 @@ export class DxDataGridComponent extends DxComponent DxoGroupPanelModule, DxoKeyboardNavigationModule, DxoLoadPanelModule, - DxoIndicatorOptionsModule, DxoMasterDetailModule, DxoPagerModule, DxoPagingModule, diff --git a/packages/devextreme-angular/src/ui/load-panel/index.ts b/packages/devextreme-angular/src/ui/load-panel/index.ts index 88c206f901ed..1f784572bb37 100644 --- a/packages/devextreme-angular/src/ui/load-panel/index.ts +++ b/packages/devextreme-angular/src/ui/load-panel/index.ts @@ -46,7 +46,6 @@ import { DxoMyModule } from 'devextreme-angular/ui/nested'; import { DxoOffsetModule } from 'devextreme-angular/ui/nested'; import { DxoToModule } from 'devextreme-angular/ui/nested'; import { DxoShowModule } from 'devextreme-angular/ui/nested'; -import { DxoIndicatorOptionsModule } from 'devextreme-angular/ui/nested'; import { DxoLoadPanelAnimationModule } from 'devextreme-angular/ui/load-panel/nested'; import { DxoLoadPanelAtModule } from 'devextreme-angular/ui/load-panel/nested'; @@ -213,10 +212,7 @@ export class DxLoadPanelComponent extends DxComponent implements OnDestroy { } - /** - * [descr:dxLoadPanelOptions.indicatorOptions] - */ @Input() get indicatorOptions(): LoadIndicatorOptions { return this._getOption('indicatorOptions'); @@ -748,7 +744,6 @@ export class DxLoadPanelComponent extends DxComponent implements OnDestroy { DxoOffsetModule, DxoToModule, DxoShowModule, - DxoIndicatorOptionsModule, DxoLoadPanelAnimationModule, DxoLoadPanelAtModule, DxoLoadPanelBoundaryOffsetModule, @@ -777,7 +772,6 @@ export class DxLoadPanelComponent extends DxComponent implements OnDestroy { DxoOffsetModule, DxoToModule, DxoShowModule, - DxoIndicatorOptionsModule, DxoLoadPanelAnimationModule, DxoLoadPanelAtModule, DxoLoadPanelBoundaryOffsetModule, diff --git a/packages/devextreme-angular/src/ui/nested/base/index.ts b/packages/devextreme-angular/src/ui/nested/base/index.ts index b52b8ace6d12..de74c6df0cfc 100644 --- a/packages/devextreme-angular/src/ui/nested/base/index.ts +++ b/packages/devextreme-angular/src/ui/nested/base/index.ts @@ -41,7 +41,6 @@ export * from './html-editor-mention-dxi'; export * from './html-editor-table-context-menu'; export * from './html-editor-table-resizing'; export * from './html-editor-variables'; -export * from './load-indicator-options'; export * from './pager'; export * from './popup-options'; export * from './popup-toolbar-item-dxi'; diff --git a/packages/devextreme-angular/src/ui/nested/base/load-indicator-options.ts b/packages/devextreme-angular/src/ui/nested/base/load-indicator-options.ts deleted file mode 100644 index a83e9bdac947..000000000000 --- a/packages/devextreme-angular/src/ui/nested/base/load-indicator-options.ts +++ /dev/null @@ -1,41 +0,0 @@ -/* tslint:disable:max-line-length */ - -import { NestedOption } from 'devextreme-angular/core'; -import { - Component, -} from '@angular/core'; - -import { LoadingAnimationType } from 'devextreme/ui/load_indicator'; - -@Component({ - template: '' -}) -export abstract class DxoLoadIndicatorOptions extends NestedOption { - get animationType(): LoadingAnimationType { - return this._getOption('animationType'); - } - set animationType(value: LoadingAnimationType) { - this._setOption('animationType', value); - } - - get height(): number | string | undefined { - return this._getOption('height'); - } - set height(value: number | string | undefined) { - this._setOption('height', value); - } - - get indicatorSrc(): string { - return this._getOption('indicatorSrc'); - } - set indicatorSrc(value: string) { - this._setOption('indicatorSrc', value); - } - - get width(): number | string | undefined { - return this._getOption('width'); - } - set width(value: number | string | undefined) { - this._setOption('width', value); - } -} diff --git a/packages/devextreme-angular/src/ui/nested/index.ts b/packages/devextreme-angular/src/ui/nested/index.ts index a9b6fdaed127..7c291f7dc04e 100644 --- a/packages/devextreme-angular/src/ui/nested/index.ts +++ b/packages/devextreme-angular/src/ui/nested/index.ts @@ -108,7 +108,6 @@ export * from './icons'; export * from './image-upload'; export * from './image'; export * from './indent'; -export * from './indicator-options'; export * from './item-dragging'; export * from './item-dxi'; export * from './item-text-format'; diff --git a/packages/devextreme-angular/src/ui/nested/indicator-options.ts b/packages/devextreme-angular/src/ui/nested/indicator-options.ts deleted file mode 100644 index 54e62629ec93..000000000000 --- a/packages/devextreme-angular/src/ui/nested/indicator-options.ts +++ /dev/null @@ -1,73 +0,0 @@ -/* tslint:disable:max-line-length */ - -/* tslint:disable:use-input-property-decorator */ - -import { - Component, - OnInit, - OnDestroy, - NgModule, - Host, - SkipSelf -} from '@angular/core'; - - - - - -import { - DxIntegrationModule, - NestedOptionHost, -} from 'devextreme-angular/core'; -import { DxoLoadIndicatorOptions } from './base/load-indicator-options'; - - -@Component({ - selector: 'dxo-indicator-options', - standalone: true, - template: '', - styles: [''], - imports: [ DxIntegrationModule ], - providers: [NestedOptionHost], - inputs: [ - 'animationType', - 'height', - 'indicatorSrc', - 'width' - ] -}) -export class DxoIndicatorOptionsComponent extends DxoLoadIndicatorOptions implements OnDestroy, OnInit { - - 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: [ - DxoIndicatorOptionsComponent - ], - exports: [ - DxoIndicatorOptionsComponent - ], -}) -export class DxoIndicatorOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/nested/load-panel.ts b/packages/devextreme-angular/src/ui/nested/load-panel.ts index 2232797c2c96..d3ce086b22f6 100644 --- a/packages/devextreme-angular/src/ui/nested/load-panel.ts +++ b/packages/devextreme-angular/src/ui/nested/load-panel.ts @@ -15,7 +15,6 @@ import { import { Mode } from 'devextreme/common'; -import { LoadIndicatorOptions } from 'devextreme/ui/load_indicator'; import { DxIntegrationModule, @@ -50,10 +49,10 @@ export class DxoLoadPanelComponent extends NestedOption implements OnDestroy, On } @Input() - get indicatorOptions(): LoadIndicatorOptions { + get indicatorOptions(): any { return this._getOption('indicatorOptions'); } - set indicatorOptions(value: LoadIndicatorOptions) { + set indicatorOptions(value: any) { this._setOption('indicatorOptions', value); } diff --git a/packages/devextreme-angular/src/ui/tree-list/index.ts b/packages/devextreme-angular/src/ui/tree-list/index.ts index e9b31c38b837..09a7d39e5638 100644 --- a/packages/devextreme-angular/src/ui/tree-list/index.ts +++ b/packages/devextreme-angular/src/ui/tree-list/index.ts @@ -97,7 +97,6 @@ import { DxoFilterRowModule } from 'devextreme-angular/ui/nested'; import { DxoOperationDescriptionsModule } from 'devextreme-angular/ui/nested'; import { DxoKeyboardNavigationModule } from 'devextreme-angular/ui/nested'; import { DxoLoadPanelModule } from 'devextreme-angular/ui/nested'; -import { DxoIndicatorOptionsModule } from 'devextreme-angular/ui/nested'; import { DxoPagerModule } from 'devextreme-angular/ui/nested'; import { DxoPagingModule } from 'devextreme-angular/ui/nested'; import { DxoRemoteOperationsModule } from 'devextreme-angular/ui/nested'; @@ -2332,7 +2331,6 @@ export class DxTreeListComponent extends DxComponent DxoOperationDescriptionsModule, DxoKeyboardNavigationModule, DxoLoadPanelModule, - DxoIndicatorOptionsModule, DxoPagerModule, DxoPagingModule, DxoRemoteOperationsModule, @@ -2475,7 +2473,6 @@ export class DxTreeListComponent extends DxComponent DxoOperationDescriptionsModule, DxoKeyboardNavigationModule, DxoLoadPanelModule, - DxoIndicatorOptionsModule, DxoPagerModule, DxoPagingModule, DxoRemoteOperationsModule, From d8aa3553c042ef0ec65bb0edce5052a0239d66ca Mon Sep 17 00:00:00 2001 From: Julia Volkova Date: Fri, 3 Oct 2025 15:24:27 +0300 Subject: [PATCH 10/20] added removeMembers, added _setDeprecatedOptions --- .../js/__internal/grids/pivot_grid/m_widget.ts | 9 +++++++++ packages/devextreme/js/__internal/ui/load_panel.ts | 9 +++++++++ packages/devextreme/js/common/grids.d.ts | 2 +- packages/devextreme/js/exporter/export_load_panel.d.ts | 2 +- packages/devextreme/js/ui/load_panel.d.ts | 4 ++-- 5 files changed, 22 insertions(+), 4 deletions(-) diff --git a/packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts b/packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts index 0a72d6c76b9f..7859efca246a 100644 --- a/packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts +++ b/packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts @@ -282,6 +282,15 @@ class PivotGrid extends Widget { }); } + _setDeprecatedOptions(): void { + super._setDeprecatedOptions(); + this._deprecatedOptions = { + ...this._deprecatedOptions, + // @ts-expect-error ts-error + 'loadPanel.indicatorSrc': { since: '25.2', message: 'Use indicatorSrc in indicatorOptions' }, + }; + } + _updateCalculatedOptions(fields) { const that = this; each(fields, (_, field) => { diff --git a/packages/devextreme/js/__internal/ui/load_panel.ts b/packages/devextreme/js/__internal/ui/load_panel.ts index 4c4c0e35d97d..658bf5646e5a 100644 --- a/packages/devextreme/js/__internal/ui/load_panel.ts +++ b/packages/devextreme/js/__internal/ui/load_panel.ts @@ -104,6 +104,15 @@ class LoadPanel extends Overlay { this._updateWrapperAria(); } + _setDeprecatedOptions(): void { + super._setDeprecatedOptions(); + this._deprecatedOptions = { + ...this._deprecatedOptions, + // @ts-expect-error ts-error + indicatorSrc: { since: '25.2', message: 'Use indicatorSrc in indicatorOptions' }, + }; + } + _updateWrapperAria(): void { this.$wrapper() .removeAttr('aria-label') diff --git a/packages/devextreme/js/common/grids.d.ts b/packages/devextreme/js/common/grids.d.ts index e7b4c9dd6000..c30bd261a802 100644 --- a/packages/devextreme/js/common/grids.d.ts +++ b/packages/devextreme/js/common/grids.d.ts @@ -2594,7 +2594,7 @@ export type LoadPanel = { /** * @docid GridBaseOptions.loadPanel.indicatorSrc * @default "" - * @deprecated + * @deprecated GridBaseOptions.loadPanel.indicatorOptions */ indicatorSrc?: string; /** diff --git a/packages/devextreme/js/exporter/export_load_panel.d.ts b/packages/devextreme/js/exporter/export_load_panel.d.ts index 2091335bd33c..a935acb46fee 100644 --- a/packages/devextreme/js/exporter/export_load_panel.d.ts +++ b/packages/devextreme/js/exporter/export_load_panel.d.ts @@ -34,7 +34,7 @@ export interface ExportLoadPanel { /** * @docid * @default "" - * @deprecated + * @deprecated ExportLoadPanel.indicatorOptions */ indicatorSrc?: string; /** diff --git a/packages/devextreme/js/ui/load_panel.d.ts b/packages/devextreme/js/ui/load_panel.d.ts index fa0a09508724..c9c78f6d9683 100644 --- a/packages/devextreme/js/ui/load_panel.d.ts +++ b/packages/devextreme/js/ui/load_panel.d.ts @@ -131,12 +131,12 @@ export interface dxLoadPanelOptions extends dxOverlayOptions { /** * @docid * @default "" - * @deprecated + * @public + * @deprecated dxLoadPanelOptions.indicatorOptions */ indicatorSrc?: string; /** * @docid - * @default undefined * @public */ indicatorOptions?: LoadIndicatorOptions; From c7296a3cd83fe60260914ca3882624acd6c738af Mon Sep 17 00:00:00 2001 From: Mikhail Preyskurantov <5574159+mpreyskurantov@users.noreply.github.com> Date: Fri, 3 Oct 2025 15:44:54 +0300 Subject: [PATCH 11/20] merged prop with docid | 'grids:LoadPanel.indicatorOptions' | 'GridBaseOptions.loadPanel.indicatorOptions' | exclude from ng | regenerate --- packages/devextreme-angular/src/ui/nested/load-panel.ts | 8 -------- packages/devextreme-metadata/make-angular-metadata.ts | 1 + 2 files changed, 1 insertion(+), 8 deletions(-) diff --git a/packages/devextreme-angular/src/ui/nested/load-panel.ts b/packages/devextreme-angular/src/ui/nested/load-panel.ts index d3ce086b22f6..3fd6f45a87c4 100644 --- a/packages/devextreme-angular/src/ui/nested/load-panel.ts +++ b/packages/devextreme-angular/src/ui/nested/load-panel.ts @@ -48,14 +48,6 @@ export class DxoLoadPanelComponent extends NestedOption implements OnDestroy, On this._setOption('height', value); } - @Input() - get indicatorOptions(): any { - return this._getOption('indicatorOptions'); - } - set indicatorOptions(value: any) { - this._setOption('indicatorOptions', value); - } - @Input() get indicatorSrc(): string { return this._getOption('indicatorSrc'); diff --git a/packages/devextreme-metadata/make-angular-metadata.ts b/packages/devextreme-metadata/make-angular-metadata.ts index 4d3e3f6a5904..9849dcb39dde 100644 --- a/packages/devextreme-metadata/make-angular-metadata.ts +++ b/packages/devextreme-metadata/make-angular-metadata.ts @@ -11,6 +11,7 @@ Ng.makeMetadata({ }, mutations: [ removeMembers(/\/grids:ColumnBase.ai/), + removeMembers(/\/grids:LoadPanel.indicatorOptions/), removeMembers(/\/calendar:dxCalendarOptions.todayButtonText/), removeMembers(/\/card_view:/), removeMembers(/\/form:dxFormOptions\.(aiIntegration|onSmartPasting|onSmartPasted|smartPaste)/), From cbd9204a99c10f66106cb6552c843aebba3ed2c2 Mon Sep 17 00:00:00 2001 From: Mikhail Preyskurantov <5574159+mpreyskurantov@users.noreply.github.com> Date: Fri, 3 Oct 2025 15:50:32 +0300 Subject: [PATCH 12/20] merged prop with docid | no need to ignore type - no usages | regenerate --- packages/devextreme-metadata/make-angular-metadata.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/devextreme-metadata/make-angular-metadata.ts b/packages/devextreme-metadata/make-angular-metadata.ts index 9849dcb39dde..42196f16bd90 100644 --- a/packages/devextreme-metadata/make-angular-metadata.ts +++ b/packages/devextreme-metadata/make-angular-metadata.ts @@ -18,7 +18,6 @@ Ng.makeMetadata({ removeMembers(/\/form:dxFormSimpleItem\.aiOptions/), removeMembers(/\/form:FormPredefinedButtonItem/), removeMembers(/\/drop_down_editor\/ui.drop_down_editor:FieldAddons/), - removeMembers(/\/load_indicator:LoadIndicatorOptions/), removeMembers(/\/load_panel:dxLoadPanelOptions.indicatorOptions/), removeMembers(/\/scheduler:Toolbar/), removeMembers(/\/scheduler:dxSchedulerOptions\.editing\.form/), From cfa34040ea86212b4910a6048971012780a34eda Mon Sep 17 00:00:00 2001 From: Julia Volkova Date: Fri, 3 Oct 2025 15:55:56 +0300 Subject: [PATCH 13/20] all loadPanels in one place --- packages/devextreme-metadata/make-angular-metadata.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/devextreme-metadata/make-angular-metadata.ts b/packages/devextreme-metadata/make-angular-metadata.ts index 42196f16bd90..f78239d1789c 100644 --- a/packages/devextreme-metadata/make-angular-metadata.ts +++ b/packages/devextreme-metadata/make-angular-metadata.ts @@ -11,7 +11,6 @@ Ng.makeMetadata({ }, mutations: [ removeMembers(/\/grids:ColumnBase.ai/), - removeMembers(/\/grids:LoadPanel.indicatorOptions/), removeMembers(/\/calendar:dxCalendarOptions.todayButtonText/), removeMembers(/\/card_view:/), removeMembers(/\/form:dxFormOptions\.(aiIntegration|onSmartPasting|onSmartPasted|smartPaste)/), @@ -19,6 +18,7 @@ Ng.makeMetadata({ removeMembers(/\/form:FormPredefinedButtonItem/), removeMembers(/\/drop_down_editor\/ui.drop_down_editor:FieldAddons/), removeMembers(/\/load_panel:dxLoadPanelOptions.indicatorOptions/), + removeMembers(/\/grids:LoadPanel.indicatorOptions/), removeMembers(/\/scheduler:Toolbar/), removeMembers(/\/scheduler:dxSchedulerOptions\.editing\.form/), removeMembers(/\/stepper:/), From 696585e5f9782544ea48444d2e43b194cafdb977 Mon Sep 17 00:00:00 2001 From: Julia Volkova Date: Mon, 6 Oct 2025 15:27:43 +0300 Subject: [PATCH 14/20] added tests for loadPabel custom options --- .../DevExpress.ui.widgets/loadPanel.tests.js | 47 +++++++++---------- 1 file changed, 22 insertions(+), 25 deletions(-) diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/loadPanel.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/loadPanel.tests.js index 49fb2ac73ecf..1ee85e125627 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/loadPanel.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/loadPanel.tests.js @@ -457,7 +457,7 @@ QUnit.module('options changed callbacks', { assert.ok(!instance.$content().hasClass(LOADPANEL_PANE_HIDDEN_CLASS)); }); - QUnit.test('LoadPanel with custom indicator (deprecated)', function(assert) { + QUnit.test('LoadPanel with custom indicator (deprecated from 25.2)', function(assert) { const url = '../../testing/content/customLoadIndicator.png'; const instance = this.element .dxLoadPanel({ @@ -476,39 +476,36 @@ QUnit.module('options changed callbacks', { QUnit.test('LoadPanel with custom indicator', function(assert) { const url = '../../testing/content/customLoadIndicator.png'; + const customSize = 120; + const indicatorOptions = { + indicatorSrc: url, + animationType: 'sparkle', + height: customSize, + width: customSize, + }; + const updatedOptions = { + indicatorSrc: '', + animationType: 'circle', + height: undefined, + width: undefined, + }; const instance = this.element .dxLoadPanel({ showIndicator: true, - indicatorOptions: { - indicatorSrc: url - }, + indicatorOptions, }) .dxLoadPanel('instance'); instance.show(); const loadIndicatorInstance = this.instance.$content().find('.dx-loadindicator').dxLoadIndicator().dxLoadIndicator('instance'); - assert.equal(loadIndicatorInstance.option('indicatorSrc'), url, 'custom indicator option installed successfully'); - instance.option('indicatorOptions.indicatorSrc', ''); - assert.equal(instance.option('indicatorOptions.indicatorSrc'), loadIndicatorInstance.option('indicatorSrc'), 'custom indicator option changed successfully'); - }); - - QUnit.test('indicatorSrc option change', function(assert) { - const url = '../../testing/content/customLoadIndicator.png'; - const instance = this.element - .dxLoadPanel({ - showIndicator: true - }) - .dxLoadPanel('instance'); - instance.show(); - - instance.option('indicatorOptions.indicatorSrc', url); - - const loadIndicatorInstance = this.instance.$content().find('.dx-loadindicator').dxLoadIndicator().dxLoadIndicator('instance'); - - assert.strictEqual(loadIndicatorInstance.option('indicatorSrc'), url, 'custom indicator option installed successfully'); - instance.option('indicatorOptions.indicatorSrc', ''); - assert.equal(instance.option('indicatorOptions.indicatorSrc'), loadIndicatorInstance.option('indicatorSrc'), 'custom indicator option changed successfully'); + Object.entries(indicatorOptions).forEach(([optionName, value]) => { + assert.strictEqual(loadIndicatorInstance.option(optionName), value, `custom ${optionName} option installed successfully`); + }); + Object.entries(updatedOptions).forEach(([optionName, value]) => { + instance.option(`indicatorOptions.${optionName}`, value); + assert.strictEqual(loadIndicatorInstance.option(optionName), value, `custom ${optionName} option changed successfully`); + }); }); QUnit.test('indicatorOptions.indicatorSrc option change when showIndicator is false', function(assert) { From 1fa003723af06b98197dcbc8868d39df2a49e8be Mon Sep 17 00:00:00 2001 From: Julia Volkova Date: Mon, 6 Oct 2025 17:03:34 +0300 Subject: [PATCH 15/20] aliases for deprecated indicatorSrc --- packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts | 2 +- packages/devextreme/js/__internal/ui/load_panel.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts b/packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts index 7859efca246a..ce66e11254fe 100644 --- a/packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts +++ b/packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts @@ -287,7 +287,7 @@ class PivotGrid extends Widget { this._deprecatedOptions = { ...this._deprecatedOptions, // @ts-expect-error ts-error - 'loadPanel.indicatorSrc': { since: '25.2', message: 'Use indicatorSrc in indicatorOptions' }, + 'loadPanel.indicatorSrc': { since: '25.2', alias: 'loadPanel.indicatorOptions.indicatorSrc' }, }; } diff --git a/packages/devextreme/js/__internal/ui/load_panel.ts b/packages/devextreme/js/__internal/ui/load_panel.ts index 658bf5646e5a..c0972369b499 100644 --- a/packages/devextreme/js/__internal/ui/load_panel.ts +++ b/packages/devextreme/js/__internal/ui/load_panel.ts @@ -109,7 +109,7 @@ class LoadPanel extends Overlay { this._deprecatedOptions = { ...this._deprecatedOptions, // @ts-expect-error ts-error - indicatorSrc: { since: '25.2', message: 'Use indicatorSrc in indicatorOptions' }, + indicatorSrc: { since: '25.2', alias: 'indicatorOptions.indicatorSrc' }, }; } From 5dc9799a74bbcfcd3b27908295594e927f088fce Mon Sep 17 00:00:00 2001 From: Julia Volkova Date: Tue, 7 Oct 2025 15:24:08 +0300 Subject: [PATCH 16/20] indicatorSrc -> src --- .../ui/card-view/nested/indicator-options.ts | 8 +-- .../src/ui/card-view/nested/load-panel.ts | 7 +-- .../src/ui/data-grid/index.ts | 8 +-- .../ui/data-grid/nested/indicator-options.ts | 8 +-- .../src/ui/data-grid/nested/load-panel.ts | 6 +- .../src/ui/load-indicator/index.ts | 8 +-- .../src/ui/load-panel/index.ts | 9 ++- .../ui/load-panel/nested/indicator-options.ts | 8 +-- .../src/ui/tree-list/index.ts | 8 +-- .../ui/tree-list/nested/indicator-options.ts | 8 +-- .../src/ui/tree-list/nested/load-panel.ts | 6 +- packages/devextreme-react/src/card-view.ts | 8 +-- packages/devextreme-react/src/data-grid.ts | 7 ++- packages/devextreme-react/src/load-panel.ts | 2 +- packages/devextreme-react/src/tree-list.ts | 7 ++- packages/devextreme-vue/src/card-view.ts | 8 +-- packages/devextreme-vue/src/data-grid.ts | 10 ++-- packages/devextreme-vue/src/load-panel.ts | 14 ++--- packages/devextreme-vue/src/tree-list.ts | 10 ++-- .../__internal/grids/pivot_grid/m_widget.ts | 2 +- .../js/__internal/ui/load_indicator.ts | 1 - .../devextreme/js/__internal/ui/load_panel.ts | 7 ++- packages/devextreme/js/common/grids.d.ts | 4 +- .../js/exporter/export_load_panel.d.ts | 4 +- packages/devextreme/js/ui/load_indicator.d.ts | 27 ++------- .../js/ui/load_indicator_types.d.ts | 1 - packages/devextreme/js/ui/load_panel.d.ts | 35 ++++++++++- .../devextreme/js/ui/load_panel_types.d.ts | 1 + .../DevExpress.ui.widgets/loadPanel.tests.js | 18 ++++-- packages/devextreme/ts/dx.all.d.ts | 60 +++++++++++-------- 30 files changed, 170 insertions(+), 140 deletions(-) diff --git a/packages/devextreme-angular/src/ui/card-view/nested/indicator-options.ts b/packages/devextreme-angular/src/ui/card-view/nested/indicator-options.ts index 5a4b670c8451..9aadeb1eb724 100644 --- a/packages/devextreme-angular/src/ui/card-view/nested/indicator-options.ts +++ b/packages/devextreme-angular/src/ui/card-view/nested/indicator-options.ts @@ -49,11 +49,11 @@ export class DxoCardViewIndicatorOptionsComponent extends NestedOption implement } @Input() - get indicatorSrc(): string { - return this._getOption('indicatorSrc'); + get src(): string { + return this._getOption('src'); } - set indicatorSrc(value: string) { - this._setOption('indicatorSrc', value); + set src(value: string) { + this._setOption('src', value); } @Input() diff --git a/packages/devextreme-angular/src/ui/card-view/nested/load-panel.ts b/packages/devextreme-angular/src/ui/card-view/nested/load-panel.ts index cc9614eaf443..149d1cf74012 100644 --- a/packages/devextreme-angular/src/ui/card-view/nested/load-panel.ts +++ b/packages/devextreme-angular/src/ui/card-view/nested/load-panel.ts @@ -18,8 +18,7 @@ import { import { AnimationConfig, PositionConfig } from 'devextreme/common/core/animation'; import { event } from 'devextreme/events/events.types'; -import { LoadIndicatorOptions } from 'devextreme/ui/load_indicator'; -import { ContentReadyEvent, DisposingEvent, HiddenEvent, HidingEvent, InitializedEvent, OptionChangedEvent, ShowingEvent, ShownEvent } from 'devextreme/ui/load_panel'; +import { LoadPanelIndicatorOptions, ContentReadyEvent, DisposingEvent, HiddenEvent, HidingEvent, InitializedEvent, OptionChangedEvent, ShowingEvent, ShownEvent } from 'devextreme/ui/load_panel'; import { PositionAlignment } from 'devextreme/common'; import { @@ -119,10 +118,10 @@ export class DxoCardViewLoadPanelComponent extends NestedOption implements OnDes } @Input() - get indicatorOptions(): LoadIndicatorOptions { + get indicatorOptions(): LoadPanelIndicatorOptions { return this._getOption('indicatorOptions'); } - set indicatorOptions(value: LoadIndicatorOptions) { + set indicatorOptions(value: LoadPanelIndicatorOptions) { this._setOption('indicatorOptions', value); } diff --git a/packages/devextreme-angular/src/ui/data-grid/index.ts b/packages/devextreme-angular/src/ui/data-grid/index.ts index 3d34efcfc133..4b48ebf27981 100644 --- a/packages/devextreme-angular/src/ui/data-grid/index.ts +++ b/packages/devextreme-angular/src/ui/data-grid/index.ts @@ -36,7 +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 { LoadIndicatorOptions } from 'devextreme/ui/load_indicator'; +import { LoadPanelIndicatorOptions } from 'devextreme/ui/load_panel'; import { event } from 'devextreme/events/events.types'; import { Format } from 'devextreme/common/core/localization'; @@ -817,10 +817,10 @@ export class DxDataGridComponent extends DxComponent */ @Input() - get loadPanel(): { enabled?: boolean | Mode, height?: number | string, indicatorOptions?: LoadIndicatorOptions, indicatorSrc?: string, shading?: boolean, shadingColor?: string, showIndicator?: boolean, showPane?: boolean, text?: string, width?: number | string } { + get loadPanel(): { enabled?: boolean | Mode, height?: number | string, indicatorOptions?: LoadPanelIndicatorOptions, 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, indicatorOptions?: LoadIndicatorOptions, 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?: LoadPanelIndicatorOptions, indicatorSrc?: string, shading?: boolean, shadingColor?: string, showIndicator?: boolean, showPane?: boolean, text?: string, width?: number | string }) { this._setOption('loadPanel', value); } @@ -1886,7 +1886,7 @@ export class DxDataGridComponent 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, indicatorOptions?: LoadIndicatorOptions, 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?: LoadPanelIndicatorOptions, indicatorSrc?: string, shading?: boolean, shadingColor?: string, showIndicator?: boolean, showPane?: boolean, text?: string, width?: number | string }>; /** diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/indicator-options.ts b/packages/devextreme-angular/src/ui/data-grid/nested/indicator-options.ts index aecf0b333b09..b2893f643656 100644 --- a/packages/devextreme-angular/src/ui/data-grid/nested/indicator-options.ts +++ b/packages/devextreme-angular/src/ui/data-grid/nested/indicator-options.ts @@ -49,11 +49,11 @@ export class DxoDataGridIndicatorOptionsComponent extends NestedOption implement } @Input() - get indicatorSrc(): string { - return this._getOption('indicatorSrc'); + get src(): string { + return this._getOption('src'); } - set indicatorSrc(value: string) { - this._setOption('indicatorSrc', value); + set src(value: string) { + this._setOption('src', value); } @Input() diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/load-panel.ts b/packages/devextreme-angular/src/ui/data-grid/nested/load-panel.ts index 83e36435cb27..ea1d084c527a 100644 --- a/packages/devextreme-angular/src/ui/data-grid/nested/load-panel.ts +++ b/packages/devextreme-angular/src/ui/data-grid/nested/load-panel.ts @@ -15,7 +15,7 @@ import { import { Mode } from 'devextreme/common'; -import { LoadIndicatorOptions } from 'devextreme/ui/load_indicator'; +import { LoadPanelIndicatorOptions } from 'devextreme/ui/load_panel'; import { DxIntegrationModule, @@ -50,10 +50,10 @@ export class DxoDataGridLoadPanelComponent extends NestedOption implements OnDes } @Input() - get indicatorOptions(): LoadIndicatorOptions { + get indicatorOptions(): LoadPanelIndicatorOptions { return this._getOption('indicatorOptions'); } - set indicatorOptions(value: LoadIndicatorOptions) { + set indicatorOptions(value: LoadPanelIndicatorOptions) { this._setOption('indicatorOptions', value); } diff --git a/packages/devextreme-angular/src/ui/load-indicator/index.ts b/packages/devextreme-angular/src/ui/load-indicator/index.ts index 3be3a93fab83..7e222519218c 100644 --- a/packages/devextreme-angular/src/ui/load-indicator/index.ts +++ b/packages/devextreme-angular/src/ui/load-indicator/index.ts @@ -56,7 +56,7 @@ export class DxLoadIndicatorComponent extends DxComponent implements OnDestroy { instance: DxLoadIndicator = null; /** - * [descr:LoadIndicatorOptions.animationType] + * [descr:dxLoadIndicatorOptions.animationType] */ @Input() @@ -82,7 +82,7 @@ export class DxLoadIndicatorComponent extends DxComponent implements OnDestroy { /** - * [descr:LoadIndicatorOptions.height] + * [descr:DOMComponentOptions.height] */ @Input() @@ -108,7 +108,7 @@ export class DxLoadIndicatorComponent extends DxComponent implements OnDestroy { /** - * [descr:LoadIndicatorOptions.indicatorSrc] + * [descr:dxLoadIndicatorOptions.indicatorSrc] */ @Input() @@ -147,7 +147,7 @@ export class DxLoadIndicatorComponent extends DxComponent implements OnDestroy { /** - * [descr:LoadIndicatorOptions.width] + * [descr:DOMComponentOptions.width] */ @Input() diff --git a/packages/devextreme-angular/src/ui/load-panel/index.ts b/packages/devextreme-angular/src/ui/load-panel/index.ts index 1f784572bb37..95b262d4df97 100644 --- a/packages/devextreme-angular/src/ui/load-panel/index.ts +++ b/packages/devextreme-angular/src/ui/load-panel/index.ts @@ -19,8 +19,7 @@ import { import { AnimationConfig, PositionConfig } from 'devextreme/common/core/animation'; import { event } from 'devextreme/events/events.types'; -import { LoadIndicatorOptions } from 'devextreme/ui/load_indicator'; -import { ContentReadyEvent, DisposingEvent, HiddenEvent, HidingEvent, InitializedEvent, OptionChangedEvent, ShowingEvent, ShownEvent } from 'devextreme/ui/load_panel'; +import { LoadPanelIndicatorOptions, ContentReadyEvent, DisposingEvent, HiddenEvent, HidingEvent, InitializedEvent, OptionChangedEvent, ShowingEvent, ShownEvent } from 'devextreme/ui/load_panel'; import { PositionAlignment } from 'devextreme/common'; import DxLoadPanel from 'devextreme/ui/load_panel'; @@ -214,10 +213,10 @@ export class DxLoadPanelComponent extends DxComponent implements OnDestroy { @Input() - get indicatorOptions(): LoadIndicatorOptions { + get indicatorOptions(): LoadPanelIndicatorOptions { return this._getOption('indicatorOptions'); } - set indicatorOptions(value: LoadIndicatorOptions) { + set indicatorOptions(value: LoadPanelIndicatorOptions) { this._setOption('indicatorOptions', value); } @@ -557,7 +556,7 @@ export class DxLoadPanelComponent extends DxComponent implements OnDestroy { * This member supports the internal infrastructure and is not intended to be used directly from your code. */ - @Output() indicatorOptionsChange: EventEmitter; + @Output() indicatorOptionsChange: EventEmitter; /** diff --git a/packages/devextreme-angular/src/ui/load-panel/nested/indicator-options.ts b/packages/devextreme-angular/src/ui/load-panel/nested/indicator-options.ts index 365c5fc41920..0faf6d0fa427 100644 --- a/packages/devextreme-angular/src/ui/load-panel/nested/indicator-options.ts +++ b/packages/devextreme-angular/src/ui/load-panel/nested/indicator-options.ts @@ -49,11 +49,11 @@ export class DxoLoadPanelIndicatorOptionsComponent extends NestedOption implemen } @Input() - get indicatorSrc(): string { - return this._getOption('indicatorSrc'); + get src(): string { + return this._getOption('src'); } - set indicatorSrc(value: string) { - this._setOption('indicatorSrc', value); + set src(value: string) { + this._setOption('src', value); } @Input() diff --git a/packages/devextreme-angular/src/ui/tree-list/index.ts b/packages/devextreme-angular/src/ui/tree-list/index.ts index 09a7d39e5638..84de581193b9 100644 --- a/packages/devextreme-angular/src/ui/tree-list/index.ts +++ b/packages/devextreme-angular/src/ui/tree-list/index.ts @@ -36,7 +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 { LoadIndicatorOptions } from 'devextreme/ui/load_indicator'; +import { LoadPanelIndicatorOptions } from 'devextreme/ui/load_panel'; import { event } from 'devextreme/events/events.types'; import DxTreeList from 'devextreme/ui/tree_list'; @@ -832,10 +832,10 @@ export class DxTreeListComponent extends DxComponent */ @Input() - get loadPanel(): { enabled?: boolean | Mode, height?: number | string, indicatorOptions?: LoadIndicatorOptions, indicatorSrc?: string, shading?: boolean, shadingColor?: string, showIndicator?: boolean, showPane?: boolean, text?: string, width?: number | string } { + get loadPanel(): { enabled?: boolean | Mode, height?: number | string, indicatorOptions?: LoadPanelIndicatorOptions, 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, indicatorOptions?: LoadIndicatorOptions, 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?: LoadPanelIndicatorOptions, indicatorSrc?: string, shading?: boolean, shadingColor?: string, showIndicator?: boolean, showPane?: boolean, text?: string, width?: number | string }) { this._setOption('loadPanel', value); } @@ -1881,7 +1881,7 @@ export class DxTreeListComponent 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, indicatorOptions?: LoadIndicatorOptions, 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?: LoadPanelIndicatorOptions, indicatorSrc?: string, shading?: boolean, shadingColor?: string, showIndicator?: boolean, showPane?: boolean, text?: string, width?: number | string }>; /** diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/indicator-options.ts b/packages/devextreme-angular/src/ui/tree-list/nested/indicator-options.ts index 76090ace56d5..a21a457a09b8 100644 --- a/packages/devextreme-angular/src/ui/tree-list/nested/indicator-options.ts +++ b/packages/devextreme-angular/src/ui/tree-list/nested/indicator-options.ts @@ -49,11 +49,11 @@ export class DxoTreeListIndicatorOptionsComponent extends NestedOption implement } @Input() - get indicatorSrc(): string { - return this._getOption('indicatorSrc'); + get src(): string { + return this._getOption('src'); } - set indicatorSrc(value: string) { - this._setOption('indicatorSrc', value); + set src(value: string) { + this._setOption('src', value); } @Input() diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/load-panel.ts b/packages/devextreme-angular/src/ui/tree-list/nested/load-panel.ts index 25cf33ee2f9a..1404bb14c80a 100644 --- a/packages/devextreme-angular/src/ui/tree-list/nested/load-panel.ts +++ b/packages/devextreme-angular/src/ui/tree-list/nested/load-panel.ts @@ -15,7 +15,7 @@ import { import { Mode } from 'devextreme/common'; -import { LoadIndicatorOptions } from 'devextreme/ui/load_indicator'; +import { LoadPanelIndicatorOptions } from 'devextreme/ui/load_panel'; import { DxIntegrationModule, @@ -50,10 +50,10 @@ export class DxoTreeListLoadPanelComponent extends NestedOption implements OnDes } @Input() - get indicatorOptions(): LoadIndicatorOptions { + get indicatorOptions(): LoadPanelIndicatorOptions { return this._getOption('indicatorOptions'); } - set indicatorOptions(value: LoadIndicatorOptions) { + set indicatorOptions(value: LoadPanelIndicatorOptions) { this._setOption('indicatorOptions', value); } diff --git a/packages/devextreme-react/src/card-view.ts b/packages/devextreme-react/src/card-view.ts index bb37c0f86c4c..492fa147a5cc 100644 --- a/packages/devextreme-react/src/card-view.ts +++ b/packages/devextreme-react/src/card-view.ts @@ -15,7 +15,7 @@ import type { ValidationRuleType, HorizontalAlignment, VerticalAlignment, Button import type { dxButtonOptions, ClickEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, OptionChangedEvent } from "devextreme/ui/button"; import type { FormItemType, FormPredefinedButtonItem, ContentReadyEvent as FormContentReadyEvent, DisposingEvent as FormDisposingEvent, InitializedEvent as FormInitializedEvent, OptionChangedEvent as FormOptionChangedEvent, dxFormSimpleItem, dxFormOptions, dxFormGroupItem, dxFormTabbedItem, dxFormEmptyItem, dxFormButtonItem, LabelLocation, FormLabelMode, EditorEnterKeyEvent, FieldDataChangedEvent, SmartPastedEvent, SmartPastingEvent, FormItemComponent } from "devextreme/ui/form"; import type { ContentReadyEvent as FilterBuilderContentReadyEvent, DisposingEvent as FilterBuilderDisposingEvent, InitializedEvent as FilterBuilderInitializedEvent, OptionChangedEvent as FilterBuilderOptionChangedEvent, dxFilterBuilderField, FieldInfo, FilterBuilderOperation, dxFilterBuilderCustomOperation, GroupOperation, EditorPreparedEvent, EditorPreparingEvent, ValueChangedEvent } from "devextreme/ui/filter_builder"; -import type { ContentReadyEvent as LoadPanelContentReadyEvent, DisposingEvent as LoadPanelDisposingEvent, InitializedEvent as LoadPanelInitializedEvent, OptionChangedEvent as LoadPanelOptionChangedEvent, HiddenEvent, HidingEvent, ShowingEvent, ShownEvent } from "devextreme/ui/load_panel"; +import type { ContentReadyEvent as LoadPanelContentReadyEvent, DisposingEvent as LoadPanelDisposingEvent, InitializedEvent as LoadPanelInitializedEvent, OptionChangedEvent as LoadPanelOptionChangedEvent, LoadPanelIndicatorOptions, HiddenEvent, HidingEvent, ShowingEvent, ShownEvent } from "devextreme/ui/load_panel"; import type { ContentReadyEvent as TabPanelContentReadyEvent, DisposingEvent as TabPanelDisposingEvent, InitializedEvent as TabPanelInitializedEvent, OptionChangedEvent as TabPanelOptionChangedEvent, dxTabPanelOptions, dxTabPanelItem, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent, SelectionChangedEvent, SelectionChangingEvent, TitleClickEvent, TitleHoldEvent, TitleRenderedEvent } from "devextreme/ui/tab_panel"; import type { LocateInMenuMode, ShowTextMode } from "devextreme/ui/toolbar"; import type { CollectionWidgetItem } from "devextreme/ui/collection/ui.collection_widget.base"; @@ -24,7 +24,7 @@ import type { Format as LocalizationFormat } from "devextreme/common/core/locali import type { DataSourceOptions } from "devextreme/data/data_source"; import type { Store } from "devextreme/data/store"; import type { AIIntegration } from "devextreme/common/ai-integration"; -import type { LoadingAnimationType, LoadIndicatorOptions } from "devextreme/ui/load_indicator"; +import type { LoadingAnimationType } from "devextreme/ui/load_indicator"; import type { event } from "devextreme/events/events.types"; import type dxForm from "devextreme/ui/form"; @@ -1667,7 +1667,7 @@ const Hide = Object.assign(_componen type IIndicatorOptionsProps = React.PropsWithChildren<{ animationType?: LoadingAnimationType; height?: number | string | undefined; - indicatorSrc?: string; + src?: string; width?: number | string | undefined; }> const _componentIndicatorOptions = (props: IIndicatorOptionsProps) => { @@ -1864,7 +1864,7 @@ type ILoadPanelProps = React.PropsWithChildren<{ hideOnParentScroll?: boolean; hint?: string | undefined; hoverStateEnabled?: boolean; - indicatorOptions?: LoadIndicatorOptions; + indicatorOptions?: LoadPanelIndicatorOptions; indicatorSrc?: string; maxHeight?: number | string; maxWidth?: number | string; diff --git a/packages/devextreme-react/src/data-grid.ts b/packages/devextreme-react/src/data-grid.ts index c3bc4d0520b2..1ac287f53626 100644 --- a/packages/devextreme-react/src/data-grid.ts +++ b/packages/devextreme-react/src/data-grid.ts @@ -25,9 +25,10 @@ import type { dxPopupOptions, dxPopupToolbarItem, ToolbarLocation } from "devext import type { event } from "devextreme/events/events.types"; import type { EventInfo } from "devextreme/common/core/events"; import type { Component } from "devextreme/core/component"; -import type { LoadingAnimationType, LoadIndicatorOptions } from "devextreme/ui/load_indicator"; +import type { LoadingAnimationType } from "devextreme/ui/load_indicator"; import type { LocateInMenuMode, ShowTextMode } from "devextreme/ui/toolbar"; import type { CollectionWidgetItem } from "devextreme/ui/collection/ui.collection_widget.base"; +import type { LoadPanelIndicatorOptions } from "devextreme/ui/load_panel"; import type dxOverlay from "devextreme/ui/overlay"; import type DOMComponent from "devextreme/core/dom_component"; @@ -2093,7 +2094,7 @@ const Icons = Object.assign(_compon type IIndicatorOptionsProps = React.PropsWithChildren<{ animationType?: LoadingAnimationType; height?: number | string | undefined; - indicatorSrc?: string; + src?: string; width?: number | string | undefined; }> const _componentIndicatorOptions = (props: IIndicatorOptionsProps) => { @@ -2209,7 +2210,7 @@ const Label = Object.assign(_compon type ILoadPanelProps = React.PropsWithChildren<{ enabled?: boolean | Mode; height?: number | string; - indicatorOptions?: LoadIndicatorOptions; + indicatorOptions?: LoadPanelIndicatorOptions; indicatorSrc?: string; shading?: boolean; shadingColor?: string; diff --git a/packages/devextreme-react/src/load-panel.ts b/packages/devextreme-react/src/load-panel.ts index 8f6f5d7f36fe..444e6795a97e 100644 --- a/packages/devextreme-react/src/load-panel.ts +++ b/packages/devextreme-react/src/load-panel.ts @@ -224,7 +224,7 @@ const Hide = Object.assign(_componen type IIndicatorOptionsProps = React.PropsWithChildren<{ animationType?: LoadingAnimationType; height?: number | string | undefined; - indicatorSrc?: string; + src?: string; width?: number | string | undefined; }> const _componentIndicatorOptions = (props: IIndicatorOptionsProps) => { diff --git a/packages/devextreme-react/src/tree-list.ts b/packages/devextreme-react/src/tree-list.ts index 1cf27243e6c5..8aebe9020343 100644 --- a/packages/devextreme-react/src/tree-list.ts +++ b/packages/devextreme-react/src/tree-list.ts @@ -25,9 +25,10 @@ import type { Store } from "devextreme/data/store"; import type { dxPopupOptions, dxPopupToolbarItem, ToolbarLocation } from "devextreme/ui/popup"; import type { EventInfo } from "devextreme/common/core/events"; import type { Component } from "devextreme/core/component"; -import type { LoadingAnimationType, LoadIndicatorOptions } from "devextreme/ui/load_indicator"; +import type { LoadingAnimationType } from "devextreme/ui/load_indicator"; import type { LocateInMenuMode, ShowTextMode } from "devextreme/ui/toolbar"; import type { CollectionWidgetItem } from "devextreme/ui/collection/ui.collection_widget.base"; +import type { LoadPanelIndicatorOptions } from "devextreme/ui/load_panel"; import type dxOverlay from "devextreme/ui/overlay"; import type DOMComponent from "devextreme/core/dom_component"; @@ -1796,7 +1797,7 @@ const Icons = Object.assign(_compon type IIndicatorOptionsProps = React.PropsWithChildren<{ animationType?: LoadingAnimationType; height?: number | string | undefined; - indicatorSrc?: string; + src?: string; width?: number | string | undefined; }> const _componentIndicatorOptions = (props: IIndicatorOptionsProps) => { @@ -1912,7 +1913,7 @@ const Label = Object.assign(_compon type ILoadPanelProps = React.PropsWithChildren<{ enabled?: boolean | Mode; height?: number | string; - indicatorOptions?: LoadIndicatorOptions; + indicatorOptions?: LoadPanelIndicatorOptions; indicatorSrc?: string; shading?: boolean; shadingColor?: string; diff --git a/packages/devextreme-vue/src/card-view.ts b/packages/devextreme-vue/src/card-view.ts index 378d589df6ce..7c8c8ffd2e6b 100644 --- a/packages/devextreme-vue/src/card-view.ts +++ b/packages/devextreme-vue/src/card-view.ts @@ -116,6 +116,7 @@ import { } from "devextreme/ui/filter_builder"; import { dxLoadPanelOptions, + LoadPanelIndicatorOptions, ContentReadyEvent as LoadPanelContentReadyEvent, DisposingEvent as LoadPanelDisposingEvent, HiddenEvent, @@ -183,7 +184,6 @@ import { } from "devextreme/common/ai-integration"; import { LoadingAnimationType, - LoadIndicatorOptions, } from "devextreme/ui/load_indicator"; import { dxTabPanelOptions, @@ -2089,13 +2089,13 @@ const DxIndicatorOptionsConfig = { "update:hoveredElement": null, "update:animationType": null, "update:height": null, - "update:indicatorSrc": null, + "update:src": null, "update:width": null, }, props: { animationType: String as PropType, height: [Number, String], - indicatorSrc: String, + src: String, width: [Number, String] } }; @@ -2295,7 +2295,7 @@ const DxLoadPanelConfig = { hideOnParentScroll: Boolean, hint: String, hoverStateEnabled: Boolean, - indicatorOptions: Object as PropType>, + indicatorOptions: Object as PropType>, indicatorSrc: String, maxHeight: [Number, String], maxWidth: [Number, String], diff --git a/packages/devextreme-vue/src/data-grid.ts b/packages/devextreme-vue/src/data-grid.ts index 10fd33e42cca..165f6ffdacc0 100644 --- a/packages/devextreme-vue/src/data-grid.ts +++ b/packages/devextreme-vue/src/data-grid.ts @@ -240,12 +240,14 @@ import { } from "devextreme/core/component"; import { LoadingAnimationType, - LoadIndicatorOptions, } from "devextreme/ui/load_indicator"; import { LocateInMenuMode, ShowTextMode, } from "devextreme/ui/toolbar"; +import { + LoadPanelIndicatorOptions, +} from "devextreme/ui/load_panel"; import * as CommonTypes from "devextreme/common"; import { prepareConfigurationComponentConfig } from "./core/index"; @@ -2730,13 +2732,13 @@ const DxIndicatorOptionsConfig = { "update:hoveredElement": null, "update:animationType": null, "update:height": null, - "update:indicatorSrc": null, + "update:src": null, "update:width": null, }, props: { animationType: String as PropType, height: [Number, String], - indicatorSrc: String, + src: String, width: [Number, String] } }; @@ -2857,7 +2859,7 @@ const DxLoadPanelConfig = { props: { enabled: [Boolean, String] as PropType, height: [Number, String], - indicatorOptions: Object as PropType>, + indicatorOptions: Object as PropType>, indicatorSrc: String, shading: Boolean, shadingColor: String, diff --git a/packages/devextreme-vue/src/load-panel.ts b/packages/devextreme-vue/src/load-panel.ts index 364700cc80d9..2a005c5a45c7 100644 --- a/packages/devextreme-vue/src/load-panel.ts +++ b/packages/devextreme-vue/src/load-panel.ts @@ -6,10 +6,7 @@ import { event, } from "devextreme/events/events.types"; import { - LoadIndicatorOptions, - LoadingAnimationType, -} from "devextreme/ui/load_indicator"; -import { + LoadPanelIndicatorOptions, ContentReadyEvent, DisposingEvent, HiddenEvent, @@ -33,6 +30,9 @@ import { AnimationType, CollisionResolutionCombination, } from "devextreme/common/core/animation"; +import { + LoadingAnimationType, +} from "devextreme/ui/load_indicator"; import { prepareConfigurationComponentConfig } from "./core/index"; type AccessibleOptions = Pick>, + indicatorOptions: Object as PropType>, indicatorSrc: String, maxHeight: [Number, String], maxWidth: [Number, String], @@ -325,13 +325,13 @@ const DxIndicatorOptionsConfig = { "update:hoveredElement": null, "update:animationType": null, "update:height": null, - "update:indicatorSrc": null, + "update:src": null, "update:width": null, }, props: { animationType: String as PropType, height: [Number, String], - indicatorSrc: String, + src: String, width: [Number, String] } }; diff --git a/packages/devextreme-vue/src/tree-list.ts b/packages/devextreme-vue/src/tree-list.ts index b8909a39b2ce..620dd4a9964b 100644 --- a/packages/devextreme-vue/src/tree-list.ts +++ b/packages/devextreme-vue/src/tree-list.ts @@ -234,12 +234,14 @@ import { } from "devextreme/core/component"; import { LoadingAnimationType, - LoadIndicatorOptions, } from "devextreme/ui/load_indicator"; import { LocateInMenuMode, ShowTextMode, } from "devextreme/ui/toolbar"; +import { + LoadPanelIndicatorOptions, +} from "devextreme/ui/load_panel"; import * as CommonTypes from "devextreme/common"; import { prepareConfigurationComponentConfig } from "./core/index"; @@ -2434,13 +2436,13 @@ const DxIndicatorOptionsConfig = { "update:hoveredElement": null, "update:animationType": null, "update:height": null, - "update:indicatorSrc": null, + "update:src": null, "update:width": null, }, props: { animationType: String as PropType, height: [Number, String], - indicatorSrc: String, + src: String, width: [Number, String] } }; @@ -2561,7 +2563,7 @@ const DxLoadPanelConfig = { props: { enabled: [Boolean, String] as PropType, height: [Number, String], - indicatorOptions: Object as PropType>, + indicatorOptions: Object as PropType>, indicatorSrc: String, shading: Boolean, shadingColor: String, diff --git a/packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts b/packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts index ce66e11254fe..e6dfa73358e9 100644 --- a/packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts +++ b/packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts @@ -287,7 +287,7 @@ class PivotGrid extends Widget { this._deprecatedOptions = { ...this._deprecatedOptions, // @ts-expect-error ts-error - 'loadPanel.indicatorSrc': { since: '25.2', alias: 'loadPanel.indicatorOptions.indicatorSrc' }, + 'loadPanel.indicatorSrc': { since: '25.2', alias: 'loadPanel.indicatorOptions.src' }, }; } diff --git a/packages/devextreme/js/__internal/ui/load_indicator.ts b/packages/devextreme/js/__internal/ui/load_indicator.ts index f73703dcc9fa..665bda7a9cca 100644 --- a/packages/devextreme/js/__internal/ui/load_indicator.ts +++ b/packages/devextreme/js/__internal/ui/load_indicator.ts @@ -82,7 +82,6 @@ class LoadIndicator extends Widget { ]); } - // eslint-disable-next-line class-methods-use-this _useTemplates(): boolean { return false; } diff --git a/packages/devextreme/js/__internal/ui/load_panel.ts b/packages/devextreme/js/__internal/ui/load_panel.ts index c0972369b499..f901a389a872 100644 --- a/packages/devextreme/js/__internal/ui/load_panel.ts +++ b/packages/devextreme/js/__internal/ui/load_panel.ts @@ -109,7 +109,7 @@ class LoadPanel extends Overlay { this._deprecatedOptions = { ...this._deprecatedOptions, // @ts-expect-error ts-error - indicatorSrc: { since: '25.2', alias: 'indicatorOptions.indicatorSrc' }, + indicatorSrc: { since: '25.2', alias: 'indicatorOptions.src' }, }; } @@ -221,11 +221,12 @@ class LoadPanel extends Overlay { } const { indicatorOptions = {}, indicatorSrc } = this.option(); + const { src, ...restIndicatorOptions } = indicatorOptions; this._createComponent(this._$indicator, LoadIndicator, { elementAttr: this._getAriaAttributes(), - indicatorSrc, - ...indicatorOptions, + indicatorSrc: src ?? indicatorSrc, + ...restIndicatorOptions, }); } diff --git a/packages/devextreme/js/common/grids.d.ts b/packages/devextreme/js/common/grids.d.ts index c30bd261a802..c7c89c5edabb 100644 --- a/packages/devextreme/js/common/grids.d.ts +++ b/packages/devextreme/js/common/grids.d.ts @@ -57,7 +57,7 @@ import { SimpleItem, } from '../ui/form'; -import { LoadIndicatorOptions } from '../ui/load_indicator'; +import { LoadPanelIndicatorOptions } from '../ui/load_panel'; import { Properties as PopupProperties, @@ -2600,7 +2600,7 @@ export type LoadPanel = { /** * @docid GridBaseOptions.loadPanel.indicatorOptions */ - indicatorOptions?: LoadIndicatorOptions; + indicatorOptions?: LoadPanelIndicatorOptions; /** * @docid GridBaseOptions.loadPanel.shading * @default false diff --git a/packages/devextreme/js/exporter/export_load_panel.d.ts b/packages/devextreme/js/exporter/export_load_panel.d.ts index a935acb46fee..1073a834a6e9 100644 --- a/packages/devextreme/js/exporter/export_load_panel.d.ts +++ b/packages/devextreme/js/exporter/export_load_panel.d.ts @@ -1,4 +1,4 @@ -import { LoadIndicatorOptions } from '../ui/load_indicator'; +import { LoadPanelIndicatorOptions } from '../ui/load_panel'; /** * @docid @@ -40,7 +40,7 @@ export interface ExportLoadPanel { /** * @docid */ - indicatorOptions?: LoadIndicatorOptions; + indicatorOptions?: LoadPanelIndicatorOptions; /** * @docid * @default true diff --git a/packages/devextreme/js/ui/load_indicator.d.ts b/packages/devextreme/js/ui/load_indicator.d.ts index 803ec9ed9dc3..884e68cab8aa 100644 --- a/packages/devextreme/js/ui/load_indicator.d.ts +++ b/packages/devextreme/js/ui/load_indicator.d.ts @@ -44,10 +44,11 @@ export type OptionChangedEvent = EventInfo & ChangedOptionInfo; export type LoadingAnimationType = 'circle' | 'sparkle'; /** + * @deprecated use Properties instead + * @namespace DevExpress.ui * @docid - * @public */ -export type LoadIndicatorOptions = { +export interface dxLoadIndicatorOptions extends WidgetOptions { /** * @docid * @default 'circle' @@ -60,27 +61,7 @@ export type LoadIndicatorOptions = { * @public */ indicatorSrc?: string; - /** - * @docid - * @default undefined - * @public - */ - height?: number | string | undefined; - /** - * @docid - * @default undefined - * @public - */ - width?: number | string | undefined; -}; - -/** - * @deprecated use Properties instead - * @namespace DevExpress.ui - * @docid - * @inherits LoadIndicatorOptions - */ -export interface dxLoadIndicatorOptions extends WidgetOptions, LoadIndicatorOptions {} +} /** * @docid diff --git a/packages/devextreme/js/ui/load_indicator_types.d.ts b/packages/devextreme/js/ui/load_indicator_types.d.ts index 3520ebace37d..8aab9b68a1dd 100644 --- a/packages/devextreme/js/ui/load_indicator_types.d.ts +++ b/packages/devextreme/js/ui/load_indicator_types.d.ts @@ -4,6 +4,5 @@ export { InitializedEvent, OptionChangedEvent, LoadingAnimationType, - LoadIndicatorOptions, Properties, } from './load_indicator'; diff --git a/packages/devextreme/js/ui/load_panel.d.ts b/packages/devextreme/js/ui/load_panel.d.ts index c9c78f6d9683..19a4beb9eff2 100644 --- a/packages/devextreme/js/ui/load_panel.d.ts +++ b/packages/devextreme/js/ui/load_panel.d.ts @@ -23,7 +23,38 @@ import { PositionAlignment, } from '../common'; -import { LoadIndicatorOptions } from './load_indicator'; +import { LoadingAnimationType } from './load_indicator'; + +/** + * @docid + * @public + */ +export type LoadPanelIndicatorOptions = { + /** + * @docid + * @default 'circle' + * @public + */ + animationType?: LoadingAnimationType; + /** + * @docid + * @default '' + * @public + */ + src?: string; + /** + * @docid + * @default undefined + * @public + */ + height?: number | string | undefined; + /** + * @docid + * @default undefined + * @public + */ + width?: number | string | undefined; +}; /** * @docid _ui_load_panel_ContentReadyEvent @@ -139,7 +170,7 @@ export interface dxLoadPanelOptions extends dxOverlayOptions { * @docid * @public */ - indicatorOptions?: LoadIndicatorOptions; + indicatorOptions?: LoadPanelIndicatorOptions; /** * @docid * @default 60 &for(Material) diff --git a/packages/devextreme/js/ui/load_panel_types.d.ts b/packages/devextreme/js/ui/load_panel_types.d.ts index 3221cf74c4b4..1d968f6b06be 100644 --- a/packages/devextreme/js/ui/load_panel_types.d.ts +++ b/packages/devextreme/js/ui/load_panel_types.d.ts @@ -1,4 +1,5 @@ export { + LoadPanelIndicatorOptions, ContentReadyEvent, DisposingEvent, HidingEvent, diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/loadPanel.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/loadPanel.tests.js index 1ee85e125627..5a3723b36594 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/loadPanel.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/loadPanel.tests.js @@ -478,17 +478,23 @@ QUnit.module('options changed callbacks', { const url = '../../testing/content/customLoadIndicator.png'; const customSize = 120; const indicatorOptions = { - indicatorSrc: url, + src: url, animationType: 'sparkle', height: customSize, width: customSize, }; const updatedOptions = { - indicatorSrc: '', + src: '', animationType: 'circle', height: undefined, width: undefined, }; + const optionNames = { + src: 'indicatorSrc', + animationType: 'animationType', + height: 'height', + width: 'width' + }; const instance = this.element .dxLoadPanel({ showIndicator: true, @@ -500,22 +506,22 @@ QUnit.module('options changed callbacks', { const loadIndicatorInstance = this.instance.$content().find('.dx-loadindicator').dxLoadIndicator().dxLoadIndicator('instance'); Object.entries(indicatorOptions).forEach(([optionName, value]) => { - assert.strictEqual(loadIndicatorInstance.option(optionName), value, `custom ${optionName} option installed successfully`); + assert.strictEqual(loadIndicatorInstance.option(optionNames[optionName]), value, `custom ${optionName} option installed successfully`); }); Object.entries(updatedOptions).forEach(([optionName, value]) => { instance.option(`indicatorOptions.${optionName}`, value); - assert.strictEqual(loadIndicatorInstance.option(optionName), value, `custom ${optionName} option changed successfully`); + assert.strictEqual(loadIndicatorInstance.option(optionNames[optionName]), value, `custom ${optionName} option changed successfully`); }); }); - QUnit.test('indicatorOptions.indicatorSrc option change when showIndicator is false', function(assert) { + QUnit.test('indicatorOptions.src option change when showIndicator is false', function(assert) { const url = '../../testing/content/customLoadIndicator.png'; const instance = this.element .dxLoadPanel({}) .dxLoadPanel('instance'); instance.show(); - instance.option('indicatorOptions.indicatorSrc', url); + instance.option('indicatorOptions.src', url); instance.option('showIndicator', true); const loadIndicatorInstance = this.instance.$content().find('.dx-loadindicator').dxLoadIndicator().dxLoadIndicator('instance'); diff --git a/packages/devextreme/ts/dx.all.d.ts b/packages/devextreme/ts/dx.all.d.ts index fa8983deadef..0ac1be406bce 100644 --- a/packages/devextreme/ts/dx.all.d.ts +++ b/packages/devextreme/ts/dx.all.d.ts @@ -773,7 +773,7 @@ declare module DevExpress { /** * [descr:ExportLoadPanel.indicatorOptions] */ - indicatorOptions?: DevExpress.ui.dxLoadIndicator.LoadIndicatorOptions; + indicatorOptions?: DevExpress.ui.dxLoadPanel.LoadPanelIndicatorOptions; /** * [descr:ExportLoadPanel.showPane] */ @@ -6223,7 +6223,7 @@ declare module DevExpress.common.grids { /** * [descr:GridBaseOptions.loadPanel.indicatorOptions] */ - indicatorOptions?: DevExpress.ui.dxLoadIndicator.LoadIndicatorOptions; + indicatorOptions?: DevExpress.ui.dxLoadPanel.LoadPanelIndicatorOptions; /** * [descr:GridBaseOptions.loadPanel.shading] */ @@ -22255,27 +22255,6 @@ declare module DevExpress.ui { */ export type InitializedEvent = DevExpress.common.core.events.InitializedEventInfo; - /** - * [descr:LoadIndicatorOptions] - */ - export type LoadIndicatorOptions = { - /** - * [descr:LoadIndicatorOptions.animationType] - */ - animationType?: LoadingAnimationType; - /** - * [descr:LoadIndicatorOptions.indicatorSrc] - */ - indicatorSrc?: string; - /** - * [descr:LoadIndicatorOptions.height] - */ - height?: number | string | undefined; - /** - * [descr:LoadIndicatorOptions.width] - */ - width?: number | string | undefined; - }; export type LoadingAnimationType = 'circle' | 'sparkle'; /** * [descr:_ui_load_indicator_OptionChangedEvent] @@ -22291,8 +22270,16 @@ declare module DevExpress.ui { * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution. */ export interface dxLoadIndicatorOptions - extends WidgetOptions, - DevExpress.ui.dxLoadIndicator.LoadIndicatorOptions {} + extends WidgetOptions { + /** + * [descr:dxLoadIndicatorOptions.animationType] + */ + animationType?: DevExpress.ui.dxLoadIndicator.LoadingAnimationType; + /** + * [descr:dxLoadIndicatorOptions.indicatorSrc] + */ + indicatorSrc?: string; + } /** * [descr:dxLoadPanel] */ @@ -22323,6 +22310,27 @@ declare module DevExpress.ui { */ export type InitializedEvent = DevExpress.common.core.events.InitializedEventInfo; + /** + * [descr:LoadPanelIndicatorOptions] + */ + export type LoadPanelIndicatorOptions = { + /** + * [descr:LoadPanelIndicatorOptions.animationType] + */ + animationType?: DevExpress.ui.dxLoadIndicator.LoadingAnimationType; + /** + * [descr:LoadPanelIndicatorOptions.src] + */ + src?: string; + /** + * [descr:LoadPanelIndicatorOptions.height] + */ + height?: number | string | undefined; + /** + * [descr:LoadPanelIndicatorOptions.width] + */ + width?: number | string | undefined; + }; /** * [descr:_ui_load_panel_OptionChangedEvent] */ @@ -22389,7 +22397,7 @@ declare module DevExpress.ui { /** * [descr:dxLoadPanelOptions.indicatorOptions] */ - indicatorOptions?: DevExpress.ui.dxLoadIndicator.LoadIndicatorOptions; + indicatorOptions?: DevExpress.ui.dxLoadPanel.LoadPanelIndicatorOptions; /** * [descr:dxLoadPanelOptions.maxHeight] */ From cb7b64ec1681ed5bd8245b2e46c1a059f4f81ab2 Mon Sep 17 00:00:00 2001 From: Julia Volkova Date: Tue, 7 Oct 2025 18:51:53 +0300 Subject: [PATCH 17/20] removed indicatorSrc default for grids --- .../grids/grid_core/views/m_rows_view.ts | 1 - .../js/__internal/grids/pivot_grid/m_widget.ts | 1 - .../commonParts/loadPanel.tests.js | 17 +++++++++++++---- 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/packages/devextreme/js/__internal/grids/grid_core/views/m_rows_view.ts b/packages/devextreme/js/__internal/grids/grid_core/views/m_rows_view.ts index 45fa7bc5f8fd..8228738dc020 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/views/m_rows_view.ts +++ b/packages/devextreme/js/__internal/grids/grid_core/views/m_rows_view.ts @@ -1462,7 +1462,6 @@ export const rowsModule = { width: 200, height: 90, showIndicator: true, - indicatorSrc: '', showPane: true, }, dataRowTemplate: null, diff --git a/packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts b/packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts index e6dfa73358e9..a8551242092a 100644 --- a/packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts +++ b/packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts @@ -230,7 +230,6 @@ class PivotGrid extends Widget { width: 200, height: 70, showIndicator: true, - indicatorSrc: '', showPane: true, }, texts: { diff --git a/packages/devextreme/testing/tests/DevExpress.exporter/commonParts/loadPanel.tests.js b/packages/devextreme/testing/tests/DevExpress.exporter/commonParts/loadPanel.tests.js index c9c852ee0bab..754f82611440 100644 --- a/packages/devextreme/testing/tests/DevExpress.exporter/commonParts/loadPanel.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.exporter/commonParts/loadPanel.tests.js @@ -32,10 +32,18 @@ const LoadPanelTests = { width: 100, showIndicator: false, showPane: false, - } + }, + { + indicatorOptions: { + src: '', + animationType: 'sparkle', + height: 50, + width: 100, + }, + }, ].forEach((loadPanelOptions) => { QUnit.test(`loadPanel: ${JSON.stringify(loadPanelOptions)}`, function(assert) { - assert.expect(14); + assert.expect(15); const done = assert.async(); const component = getComponent(componentOptions); const initialComponentLoadPanelValue = component.option('loadPanel'); @@ -50,13 +58,14 @@ const LoadPanelTests = { enabled = true, height = 90, indicatorSrc = '', + indicatorOptions, showIndicator = true, showPane = true, text = 'Exporting...', width = 200, } = initialOptions; - const expectedOptions = { message: text, animation, enabled, height, indicatorSrc, showIndicator, showPane, width }; + const expectedOptions = { message: text, animation, enabled, height, indicatorSrc, indicatorOptions, showIndicator, showPane, width }; let isFirstCall = true; let exportLoadPanel; @@ -73,7 +82,7 @@ const LoadPanelTests = { assert.strictEqual(exportLoadPanel.option('visible'), true, 'export loadpanel is visible'); for(const optionName in expectedOptions) { - assert.strictEqual(exportLoadPanel.option(optionName), expectedOptions[optionName], `loadPanel.${optionName}`); + assert.deepEqual(exportLoadPanel.option()[optionName], expectedOptions[optionName], `loadPanel.${optionName}`); } isFirstCall = false; } From af276d0d8ed4586378cdd159d75a79d14dcf64d7 Mon Sep 17 00:00:00 2001 From: Julia Volkova Date: Thu, 9 Oct 2025 17:26:25 +0300 Subject: [PATCH 18/20] LoadPanelIndicatorOptions -> LoadPanelIndicatorProperties --- .../src/ui/card-view/nested/load-panel.ts | 6 +++--- .../src/ui/data-grid/index.ts | 8 ++++---- .../src/ui/data-grid/nested/load-panel.ts | 6 +++--- .../src/ui/load-panel/index.ts | 8 ++++---- .../src/ui/tree-list/index.ts | 8 ++++---- .../src/ui/tree-list/nested/load-panel.ts | 6 +++--- packages/devextreme-react/src/card-view.ts | 4 ++-- packages/devextreme-react/src/data-grid.ts | 4 ++-- packages/devextreme-react/src/tree-list.ts | 4 ++-- packages/devextreme-vue/src/card-view.ts | 4 ++-- packages/devextreme-vue/src/data-grid.ts | 4 ++-- packages/devextreme-vue/src/load-panel.ts | 4 ++-- packages/devextreme-vue/src/tree-list.ts | 4 ++-- packages/devextreme/js/common/grids.d.ts | 4 ++-- .../js/exporter/export_load_panel.d.ts | 4 ++-- packages/devextreme/js/ui/load_panel.d.ts | 4 ++-- .../devextreme/js/ui/load_panel_types.d.ts | 2 +- packages/devextreme/ts/dx.all.d.ts | 18 +++++++++--------- 18 files changed, 51 insertions(+), 51 deletions(-) diff --git a/packages/devextreme-angular/src/ui/card-view/nested/load-panel.ts b/packages/devextreme-angular/src/ui/card-view/nested/load-panel.ts index 149d1cf74012..3528f7801ebd 100644 --- a/packages/devextreme-angular/src/ui/card-view/nested/load-panel.ts +++ b/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 { LoadPanelIndicatorOptions, 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 { @@ -118,10 +118,10 @@ export class DxoCardViewLoadPanelComponent extends NestedOption implements OnDes } @Input() - get indicatorOptions(): LoadPanelIndicatorOptions { + get indicatorOptions(): LoadPanelIndicatorProperties { return this._getOption('indicatorOptions'); } - set indicatorOptions(value: LoadPanelIndicatorOptions) { + set indicatorOptions(value: LoadPanelIndicatorProperties) { this._setOption('indicatorOptions', value); } diff --git a/packages/devextreme-angular/src/ui/data-grid/index.ts b/packages/devextreme-angular/src/ui/data-grid/index.ts index 4b48ebf27981..ed5bc1346c1d 100644 --- a/packages/devextreme-angular/src/ui/data-grid/index.ts +++ b/packages/devextreme-angular/src/ui/data-grid/index.ts @@ -36,7 +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 { LoadPanelIndicatorOptions } from 'devextreme/ui/load_panel'; +import { LoadPanelIndicatorProperties } from 'devextreme/ui/load_panel'; import { event } from 'devextreme/events/events.types'; import { Format } from 'devextreme/common/core/localization'; @@ -817,10 +817,10 @@ export class DxDataGridComponent extends DxComponent */ @Input() - get loadPanel(): { enabled?: boolean | Mode, height?: number | string, indicatorOptions?: LoadPanelIndicatorOptions, 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, indicatorOptions?: LoadPanelIndicatorOptions, 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); } @@ -1886,7 +1886,7 @@ export class DxDataGridComponent 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, indicatorOptions?: LoadPanelIndicatorOptions, 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 }>; /** diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/load-panel.ts b/packages/devextreme-angular/src/ui/data-grid/nested/load-panel.ts index ea1d084c527a..6c15313e607e 100644 --- a/packages/devextreme-angular/src/ui/data-grid/nested/load-panel.ts +++ b/packages/devextreme-angular/src/ui/data-grid/nested/load-panel.ts @@ -15,7 +15,7 @@ import { import { Mode } from 'devextreme/common'; -import { LoadPanelIndicatorOptions } from 'devextreme/ui/load_panel'; +import { LoadPanelIndicatorProperties } from 'devextreme/ui/load_panel'; import { DxIntegrationModule, @@ -50,10 +50,10 @@ export class DxoDataGridLoadPanelComponent extends NestedOption implements OnDes } @Input() - get indicatorOptions(): LoadPanelIndicatorOptions { + get indicatorOptions(): LoadPanelIndicatorProperties { return this._getOption('indicatorOptions'); } - set indicatorOptions(value: LoadPanelIndicatorOptions) { + set indicatorOptions(value: LoadPanelIndicatorProperties) { this._setOption('indicatorOptions', value); } diff --git a/packages/devextreme-angular/src/ui/load-panel/index.ts b/packages/devextreme-angular/src/ui/load-panel/index.ts index 95b262d4df97..1b98aca59f4f 100644 --- a/packages/devextreme-angular/src/ui/load-panel/index.ts +++ b/packages/devextreme-angular/src/ui/load-panel/index.ts @@ -19,7 +19,7 @@ import { import { AnimationConfig, PositionConfig } from 'devextreme/common/core/animation'; import { event } from 'devextreme/events/events.types'; -import { LoadPanelIndicatorOptions, 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 DxLoadPanel from 'devextreme/ui/load_panel'; @@ -213,10 +213,10 @@ export class DxLoadPanelComponent extends DxComponent implements OnDestroy { @Input() - get indicatorOptions(): LoadPanelIndicatorOptions { + get indicatorOptions(): LoadPanelIndicatorProperties { return this._getOption('indicatorOptions'); } - set indicatorOptions(value: LoadPanelIndicatorOptions) { + set indicatorOptions(value: LoadPanelIndicatorProperties) { this._setOption('indicatorOptions', value); } @@ -556,7 +556,7 @@ export class DxLoadPanelComponent extends DxComponent implements OnDestroy { * This member supports the internal infrastructure and is not intended to be used directly from your code. */ - @Output() indicatorOptionsChange: EventEmitter; + @Output() indicatorOptionsChange: EventEmitter; /** diff --git a/packages/devextreme-angular/src/ui/tree-list/index.ts b/packages/devextreme-angular/src/ui/tree-list/index.ts index 84de581193b9..1d7d4d8482bb 100644 --- a/packages/devextreme-angular/src/ui/tree-list/index.ts +++ b/packages/devextreme-angular/src/ui/tree-list/index.ts @@ -36,7 +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 { LoadPanelIndicatorOptions } from 'devextreme/ui/load_panel'; +import { LoadPanelIndicatorProperties } from 'devextreme/ui/load_panel'; import { event } from 'devextreme/events/events.types'; import DxTreeList from 'devextreme/ui/tree_list'; @@ -832,10 +832,10 @@ export class DxTreeListComponent extends DxComponent */ @Input() - get loadPanel(): { enabled?: boolean | Mode, height?: number | string, indicatorOptions?: LoadPanelIndicatorOptions, 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, indicatorOptions?: LoadPanelIndicatorOptions, 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); } @@ -1881,7 +1881,7 @@ export class DxTreeListComponent 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, indicatorOptions?: LoadPanelIndicatorOptions, 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 }>; /** diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/load-panel.ts b/packages/devextreme-angular/src/ui/tree-list/nested/load-panel.ts index 1404bb14c80a..895272f755f6 100644 --- a/packages/devextreme-angular/src/ui/tree-list/nested/load-panel.ts +++ b/packages/devextreme-angular/src/ui/tree-list/nested/load-panel.ts @@ -15,7 +15,7 @@ import { import { Mode } from 'devextreme/common'; -import { LoadPanelIndicatorOptions } from 'devextreme/ui/load_panel'; +import { LoadPanelIndicatorProperties } from 'devextreme/ui/load_panel'; import { DxIntegrationModule, @@ -50,10 +50,10 @@ export class DxoTreeListLoadPanelComponent extends NestedOption implements OnDes } @Input() - get indicatorOptions(): LoadPanelIndicatorOptions { + get indicatorOptions(): LoadPanelIndicatorProperties { return this._getOption('indicatorOptions'); } - set indicatorOptions(value: LoadPanelIndicatorOptions) { + set indicatorOptions(value: LoadPanelIndicatorProperties) { this._setOption('indicatorOptions', value); } diff --git a/packages/devextreme-react/src/card-view.ts b/packages/devextreme-react/src/card-view.ts index 492fa147a5cc..0c60db8b04f9 100644 --- a/packages/devextreme-react/src/card-view.ts +++ b/packages/devextreme-react/src/card-view.ts @@ -15,7 +15,7 @@ import type { ValidationRuleType, HorizontalAlignment, VerticalAlignment, Button import type { dxButtonOptions, ClickEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, OptionChangedEvent } from "devextreme/ui/button"; import type { FormItemType, FormPredefinedButtonItem, ContentReadyEvent as FormContentReadyEvent, DisposingEvent as FormDisposingEvent, InitializedEvent as FormInitializedEvent, OptionChangedEvent as FormOptionChangedEvent, dxFormSimpleItem, dxFormOptions, dxFormGroupItem, dxFormTabbedItem, dxFormEmptyItem, dxFormButtonItem, LabelLocation, FormLabelMode, EditorEnterKeyEvent, FieldDataChangedEvent, SmartPastedEvent, SmartPastingEvent, FormItemComponent } from "devextreme/ui/form"; import type { ContentReadyEvent as FilterBuilderContentReadyEvent, DisposingEvent as FilterBuilderDisposingEvent, InitializedEvent as FilterBuilderInitializedEvent, OptionChangedEvent as FilterBuilderOptionChangedEvent, dxFilterBuilderField, FieldInfo, FilterBuilderOperation, dxFilterBuilderCustomOperation, GroupOperation, EditorPreparedEvent, EditorPreparingEvent, ValueChangedEvent } from "devextreme/ui/filter_builder"; -import type { ContentReadyEvent as LoadPanelContentReadyEvent, DisposingEvent as LoadPanelDisposingEvent, InitializedEvent as LoadPanelInitializedEvent, OptionChangedEvent as LoadPanelOptionChangedEvent, LoadPanelIndicatorOptions, HiddenEvent, HidingEvent, ShowingEvent, ShownEvent } from "devextreme/ui/load_panel"; +import type { ContentReadyEvent as LoadPanelContentReadyEvent, DisposingEvent as LoadPanelDisposingEvent, InitializedEvent as LoadPanelInitializedEvent, OptionChangedEvent as LoadPanelOptionChangedEvent, LoadPanelIndicatorProperties, HiddenEvent, HidingEvent, ShowingEvent, ShownEvent } from "devextreme/ui/load_panel"; import type { ContentReadyEvent as TabPanelContentReadyEvent, DisposingEvent as TabPanelDisposingEvent, InitializedEvent as TabPanelInitializedEvent, OptionChangedEvent as TabPanelOptionChangedEvent, dxTabPanelOptions, dxTabPanelItem, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent, SelectionChangedEvent, SelectionChangingEvent, TitleClickEvent, TitleHoldEvent, TitleRenderedEvent } from "devextreme/ui/tab_panel"; import type { LocateInMenuMode, ShowTextMode } from "devextreme/ui/toolbar"; import type { CollectionWidgetItem } from "devextreme/ui/collection/ui.collection_widget.base"; @@ -1864,7 +1864,7 @@ type ILoadPanelProps = React.PropsWithChildren<{ hideOnParentScroll?: boolean; hint?: string | undefined; hoverStateEnabled?: boolean; - indicatorOptions?: LoadPanelIndicatorOptions; + indicatorOptions?: LoadPanelIndicatorProperties; indicatorSrc?: string; maxHeight?: number | string; maxWidth?: number | string; diff --git a/packages/devextreme-react/src/data-grid.ts b/packages/devextreme-react/src/data-grid.ts index 1ac287f53626..6e4ecdf6db89 100644 --- a/packages/devextreme-react/src/data-grid.ts +++ b/packages/devextreme-react/src/data-grid.ts @@ -28,7 +28,7 @@ import type { Component } from "devextreme/core/component"; import type { LoadingAnimationType } from "devextreme/ui/load_indicator"; import type { LocateInMenuMode, ShowTextMode } from "devextreme/ui/toolbar"; import type { CollectionWidgetItem } from "devextreme/ui/collection/ui.collection_widget.base"; -import type { LoadPanelIndicatorOptions } from "devextreme/ui/load_panel"; +import type { LoadPanelIndicatorProperties } from "devextreme/ui/load_panel"; import type dxOverlay from "devextreme/ui/overlay"; import type DOMComponent from "devextreme/core/dom_component"; @@ -2210,7 +2210,7 @@ const Label = Object.assign(_compon type ILoadPanelProps = React.PropsWithChildren<{ enabled?: boolean | Mode; height?: number | string; - indicatorOptions?: LoadPanelIndicatorOptions; + indicatorOptions?: LoadPanelIndicatorProperties; indicatorSrc?: string; shading?: boolean; shadingColor?: string; diff --git a/packages/devextreme-react/src/tree-list.ts b/packages/devextreme-react/src/tree-list.ts index 8aebe9020343..bdf714b60aef 100644 --- a/packages/devextreme-react/src/tree-list.ts +++ b/packages/devextreme-react/src/tree-list.ts @@ -28,7 +28,7 @@ import type { Component } from "devextreme/core/component"; import type { LoadingAnimationType } from "devextreme/ui/load_indicator"; import type { LocateInMenuMode, ShowTextMode } from "devextreme/ui/toolbar"; import type { CollectionWidgetItem } from "devextreme/ui/collection/ui.collection_widget.base"; -import type { LoadPanelIndicatorOptions } from "devextreme/ui/load_panel"; +import type { LoadPanelIndicatorProperties } from "devextreme/ui/load_panel"; import type dxOverlay from "devextreme/ui/overlay"; import type DOMComponent from "devextreme/core/dom_component"; @@ -1913,7 +1913,7 @@ const Label = Object.assign(_compon type ILoadPanelProps = React.PropsWithChildren<{ enabled?: boolean | Mode; height?: number | string; - indicatorOptions?: LoadPanelIndicatorOptions; + indicatorOptions?: LoadPanelIndicatorProperties; indicatorSrc?: string; shading?: boolean; shadingColor?: string; diff --git a/packages/devextreme-vue/src/card-view.ts b/packages/devextreme-vue/src/card-view.ts index 7c8c8ffd2e6b..8dc65f65c8b8 100644 --- a/packages/devextreme-vue/src/card-view.ts +++ b/packages/devextreme-vue/src/card-view.ts @@ -116,7 +116,7 @@ import { } from "devextreme/ui/filter_builder"; import { dxLoadPanelOptions, - LoadPanelIndicatorOptions, + LoadPanelIndicatorProperties, ContentReadyEvent as LoadPanelContentReadyEvent, DisposingEvent as LoadPanelDisposingEvent, HiddenEvent, @@ -2295,7 +2295,7 @@ const DxLoadPanelConfig = { hideOnParentScroll: Boolean, hint: String, hoverStateEnabled: Boolean, - indicatorOptions: Object as PropType>, + indicatorOptions: Object as PropType>, indicatorSrc: String, maxHeight: [Number, String], maxWidth: [Number, String], diff --git a/packages/devextreme-vue/src/data-grid.ts b/packages/devextreme-vue/src/data-grid.ts index 165f6ffdacc0..c3459b601dd0 100644 --- a/packages/devextreme-vue/src/data-grid.ts +++ b/packages/devextreme-vue/src/data-grid.ts @@ -246,7 +246,7 @@ import { ShowTextMode, } from "devextreme/ui/toolbar"; import { - LoadPanelIndicatorOptions, + LoadPanelIndicatorProperties, } from "devextreme/ui/load_panel"; import * as CommonTypes from "devextreme/common"; import { prepareConfigurationComponentConfig } from "./core/index"; @@ -2859,7 +2859,7 @@ const DxLoadPanelConfig = { props: { enabled: [Boolean, String] as PropType, height: [Number, String], - indicatorOptions: Object as PropType>, + indicatorOptions: Object as PropType>, indicatorSrc: String, shading: Boolean, shadingColor: String, diff --git a/packages/devextreme-vue/src/load-panel.ts b/packages/devextreme-vue/src/load-panel.ts index 2a005c5a45c7..2101bbced3e2 100644 --- a/packages/devextreme-vue/src/load-panel.ts +++ b/packages/devextreme-vue/src/load-panel.ts @@ -6,7 +6,7 @@ import { event, } from "devextreme/events/events.types"; import { - LoadPanelIndicatorOptions, + LoadPanelIndicatorProperties, ContentReadyEvent, DisposingEvent, HiddenEvent, @@ -88,7 +88,7 @@ const componentConfig = { hideOnParentScroll: Boolean, hint: String, hoverStateEnabled: Boolean, - indicatorOptions: Object as PropType>, + indicatorOptions: Object as PropType>, indicatorSrc: String, maxHeight: [Number, String], maxWidth: [Number, String], diff --git a/packages/devextreme-vue/src/tree-list.ts b/packages/devextreme-vue/src/tree-list.ts index 620dd4a9964b..94e6780b9524 100644 --- a/packages/devextreme-vue/src/tree-list.ts +++ b/packages/devextreme-vue/src/tree-list.ts @@ -240,7 +240,7 @@ import { ShowTextMode, } from "devextreme/ui/toolbar"; import { - LoadPanelIndicatorOptions, + LoadPanelIndicatorProperties, } from "devextreme/ui/load_panel"; import * as CommonTypes from "devextreme/common"; import { prepareConfigurationComponentConfig } from "./core/index"; @@ -2563,7 +2563,7 @@ const DxLoadPanelConfig = { props: { enabled: [Boolean, String] as PropType, height: [Number, String], - indicatorOptions: Object as PropType>, + indicatorOptions: Object as PropType>, indicatorSrc: String, shading: Boolean, shadingColor: String, diff --git a/packages/devextreme/js/common/grids.d.ts b/packages/devextreme/js/common/grids.d.ts index c7c89c5edabb..a5ec0374aa21 100644 --- a/packages/devextreme/js/common/grids.d.ts +++ b/packages/devextreme/js/common/grids.d.ts @@ -57,7 +57,7 @@ import { SimpleItem, } from '../ui/form'; -import { LoadPanelIndicatorOptions } from '../ui/load_panel'; +import { LoadPanelIndicatorProperties } from '../ui/load_panel'; import { Properties as PopupProperties, @@ -2600,7 +2600,7 @@ export type LoadPanel = { /** * @docid GridBaseOptions.loadPanel.indicatorOptions */ - indicatorOptions?: LoadPanelIndicatorOptions; + indicatorOptions?: LoadPanelIndicatorProperties; /** * @docid GridBaseOptions.loadPanel.shading * @default false diff --git a/packages/devextreme/js/exporter/export_load_panel.d.ts b/packages/devextreme/js/exporter/export_load_panel.d.ts index 1073a834a6e9..898bfb05bca9 100644 --- a/packages/devextreme/js/exporter/export_load_panel.d.ts +++ b/packages/devextreme/js/exporter/export_load_panel.d.ts @@ -1,4 +1,4 @@ -import { LoadPanelIndicatorOptions } from '../ui/load_panel'; +import { LoadPanelIndicatorProperties } from '../ui/load_panel'; /** * @docid @@ -40,7 +40,7 @@ export interface ExportLoadPanel { /** * @docid */ - indicatorOptions?: LoadPanelIndicatorOptions; + indicatorOptions?: LoadPanelIndicatorProperties; /** * @docid * @default true diff --git a/packages/devextreme/js/ui/load_panel.d.ts b/packages/devextreme/js/ui/load_panel.d.ts index 19a4beb9eff2..1afed1ccf478 100644 --- a/packages/devextreme/js/ui/load_panel.d.ts +++ b/packages/devextreme/js/ui/load_panel.d.ts @@ -29,7 +29,7 @@ import { LoadingAnimationType } from './load_indicator'; * @docid * @public */ -export type LoadPanelIndicatorOptions = { +export type LoadPanelIndicatorProperties = { /** * @docid * @default 'circle' @@ -170,7 +170,7 @@ export interface dxLoadPanelOptions extends dxOverlayOptions { * @docid * @public */ - indicatorOptions?: LoadPanelIndicatorOptions; + indicatorOptions?: LoadPanelIndicatorProperties; /** * @docid * @default 60 &for(Material) diff --git a/packages/devextreme/js/ui/load_panel_types.d.ts b/packages/devextreme/js/ui/load_panel_types.d.ts index 1d968f6b06be..731e9d75a172 100644 --- a/packages/devextreme/js/ui/load_panel_types.d.ts +++ b/packages/devextreme/js/ui/load_panel_types.d.ts @@ -1,5 +1,5 @@ export { - LoadPanelIndicatorOptions, + LoadPanelIndicatorProperties, ContentReadyEvent, DisposingEvent, HidingEvent, diff --git a/packages/devextreme/ts/dx.all.d.ts b/packages/devextreme/ts/dx.all.d.ts index 0ac1be406bce..81858ed1d090 100644 --- a/packages/devextreme/ts/dx.all.d.ts +++ b/packages/devextreme/ts/dx.all.d.ts @@ -773,7 +773,7 @@ declare module DevExpress { /** * [descr:ExportLoadPanel.indicatorOptions] */ - indicatorOptions?: DevExpress.ui.dxLoadPanel.LoadPanelIndicatorOptions; + indicatorOptions?: DevExpress.ui.dxLoadPanel.LoadPanelIndicatorProperties; /** * [descr:ExportLoadPanel.showPane] */ @@ -6223,7 +6223,7 @@ declare module DevExpress.common.grids { /** * [descr:GridBaseOptions.loadPanel.indicatorOptions] */ - indicatorOptions?: DevExpress.ui.dxLoadPanel.LoadPanelIndicatorOptions; + indicatorOptions?: DevExpress.ui.dxLoadPanel.LoadPanelIndicatorProperties; /** * [descr:GridBaseOptions.loadPanel.shading] */ @@ -22311,23 +22311,23 @@ declare module DevExpress.ui { export type InitializedEvent = DevExpress.common.core.events.InitializedEventInfo; /** - * [descr:LoadPanelIndicatorOptions] + * [descr:LoadPanelIndicatorProperties] */ - export type LoadPanelIndicatorOptions = { + export type LoadPanelIndicatorProperties = { /** - * [descr:LoadPanelIndicatorOptions.animationType] + * [descr:LoadPanelIndicatorProperties.animationType] */ animationType?: DevExpress.ui.dxLoadIndicator.LoadingAnimationType; /** - * [descr:LoadPanelIndicatorOptions.src] + * [descr:LoadPanelIndicatorProperties.src] */ src?: string; /** - * [descr:LoadPanelIndicatorOptions.height] + * [descr:LoadPanelIndicatorProperties.height] */ height?: number | string | undefined; /** - * [descr:LoadPanelIndicatorOptions.width] + * [descr:LoadPanelIndicatorProperties.width] */ width?: number | string | undefined; }; @@ -22397,7 +22397,7 @@ declare module DevExpress.ui { /** * [descr:dxLoadPanelOptions.indicatorOptions] */ - indicatorOptions?: DevExpress.ui.dxLoadPanel.LoadPanelIndicatorOptions; + indicatorOptions?: DevExpress.ui.dxLoadPanel.LoadPanelIndicatorProperties; /** * [descr:dxLoadPanelOptions.maxHeight] */ From 9921d7869b223a277f2330c65dd77ef0acddbaa9 Mon Sep 17 00:00:00 2001 From: Mikhail Preyskurantov <5574159+mpreyskurantov@users.noreply.github.com> Date: Fri, 10 Oct 2025 08:10:53 +0300 Subject: [PATCH 19/20] re-export imported LoadingAnimationType enum --- packages/devextreme/js/ui/load_panel.d.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/devextreme/js/ui/load_panel.d.ts b/packages/devextreme/js/ui/load_panel.d.ts index 1afed1ccf478..73d32fcf3a34 100644 --- a/packages/devextreme/js/ui/load_panel.d.ts +++ b/packages/devextreme/js/ui/load_panel.d.ts @@ -25,6 +25,8 @@ import { import { LoadingAnimationType } from './load_indicator'; +export { LoadingAnimationType }; + /** * @docid * @public From 08091824a44c334e19f059c678b35d9b85c91833 Mon Sep 17 00:00:00 2001 From: Mikhail Preyskurantov <5574159+mpreyskurantov@users.noreply.github.com> Date: Fri, 10 Oct 2025 09:51:01 +0300 Subject: [PATCH 20/20] re-export imported LoadingAnimationType enum | update-ts-reexports --- packages/devextreme/js/ui/load_panel_types.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/devextreme/js/ui/load_panel_types.d.ts b/packages/devextreme/js/ui/load_panel_types.d.ts index 731e9d75a172..41a9ab2522dd 100644 --- a/packages/devextreme/js/ui/load_panel_types.d.ts +++ b/packages/devextreme/js/ui/load_panel_types.d.ts @@ -1,4 +1,5 @@ export { + LoadingAnimationType, LoadPanelIndicatorProperties, ContentReadyEvent, DisposingEvent,