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..9aadeb1eb724 --- /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 src(): string { + return this._getOption('src'); + } + set src(value: string) { + this._setOption('src', value); + } + + @Input() + get width(): number | string | undefined { + return this._getOption('width'); + } + set width(value: number | string | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'indicatorOptions'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + imports: [ + DxoCardViewIndicatorOptionsComponent + ], + exports: [ + DxoCardViewIndicatorOptionsComponent + ], +}) +export class DxoCardViewIndicatorOptionsModule { } 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..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 { ContentReadyEvent, DisposingEvent, HiddenEvent, HidingEvent, InitializedEvent, OptionChangedEvent, ShowingEvent, ShownEvent } from 'devextreme/ui/load_panel'; +import { LoadPanelIndicatorProperties, ContentReadyEvent, DisposingEvent, HiddenEvent, HidingEvent, InitializedEvent, OptionChangedEvent, ShowingEvent, ShownEvent } from 'devextreme/ui/load_panel'; import { PositionAlignment } from 'devextreme/common'; import { @@ -117,6 +117,14 @@ export class DxoCardViewLoadPanelComponent extends NestedOption implements OnDes this._setOption('hoverStateEnabled', value); } + @Input() + get indicatorOptions(): LoadPanelIndicatorProperties { + return this._getOption('indicatorOptions'); + } + set indicatorOptions(value: LoadPanelIndicatorProperties) { + this._setOption('indicatorOptions', value); + } + @Input() get indicatorSrc(): string { return this._getOption('indicatorSrc'); diff --git a/packages/devextreme-angular/src/ui/data-grid/index.ts b/packages/devextreme-angular/src/ui/data-grid/index.ts index be878d331c67..ed5bc1346c1d 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 { LoadPanelIndicatorProperties } from 'devextreme/ui/load_panel'; import { event } from 'devextreme/events/events.types'; import { Format } from 'devextreme/common/core/localization'; @@ -172,6 +173,7 @@ import { DxoDataGridGroupPanelModule } from 'devextreme-angular/ui/data-grid/nes import { DxoDataGridHeaderFilterModule } from 'devextreme-angular/ui/data-grid/nested'; import { DxoDataGridHideModule } from 'devextreme-angular/ui/data-grid/nested'; import { DxoDataGridIconsModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridIndicatorOptionsModule } from 'devextreme-angular/ui/data-grid/nested'; import { DxiDataGridItemModule } from 'devextreme-angular/ui/data-grid/nested'; import { DxoDataGridKeyboardNavigationModule } from 'devextreme-angular/ui/data-grid/nested'; import { DxoDataGridLabelModule } from 'devextreme-angular/ui/data-grid/nested'; @@ -815,10 +817,10 @@ export class DxDataGridComponent extends DxComponent */ @Input() - get loadPanel(): { enabled?: boolean | Mode, height?: number | string, indicatorSrc?: string, shading?: boolean, shadingColor?: string, showIndicator?: boolean, showPane?: boolean, text?: string, width?: number | string } { + get loadPanel(): { enabled?: boolean | Mode, height?: number | string, indicatorOptions?: LoadPanelIndicatorProperties, indicatorSrc?: string, shading?: boolean, shadingColor?: string, showIndicator?: boolean, showPane?: boolean, text?: string, width?: number | string } { return this._getOption('loadPanel'); } - set loadPanel(value: { enabled?: boolean | Mode, height?: number | string, indicatorSrc?: string, shading?: boolean, shadingColor?: string, showIndicator?: boolean, showPane?: boolean, text?: string, width?: number | string }) { + set loadPanel(value: { enabled?: boolean | Mode, height?: number | string, indicatorOptions?: LoadPanelIndicatorProperties, indicatorSrc?: string, shading?: boolean, shadingColor?: string, showIndicator?: boolean, showPane?: boolean, text?: string, width?: number | string }) { this._setOption('loadPanel', value); } @@ -1884,7 +1886,7 @@ export class DxDataGridComponent extends DxComponent * This member supports the internal infrastructure and is not intended to be used directly from your code. */ - @Output() loadPanelChange: EventEmitter<{ enabled?: boolean | Mode, height?: number | string, indicatorSrc?: string, shading?: boolean, shadingColor?: string, showIndicator?: boolean, showPane?: boolean, text?: string, width?: number | string }>; + @Output() loadPanelChange: EventEmitter<{ enabled?: boolean | Mode, height?: number | string, indicatorOptions?: LoadPanelIndicatorProperties, indicatorSrc?: string, shading?: boolean, shadingColor?: string, showIndicator?: boolean, showPane?: boolean, text?: string, width?: number | string }>; /** @@ -2449,6 +2451,7 @@ export class DxDataGridComponent extends DxComponent DxoDataGridHeaderFilterModule, DxoDataGridHideModule, DxoDataGridIconsModule, + DxoDataGridIndicatorOptionsModule, DxiDataGridItemModule, DxoDataGridKeyboardNavigationModule, DxoDataGridLabelModule, @@ -2611,6 +2614,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..b2893f643656 --- /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 src(): string { + return this._getOption('src'); + } + set src(value: string) { + this._setOption('src', value); + } + + @Input() + get width(): number | string | undefined { + return this._getOption('width'); + } + set width(value: number | string | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'indicatorOptions'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + imports: [ + DxoDataGridIndicatorOptionsComponent + ], + exports: [ + DxoDataGridIndicatorOptionsComponent + ], +}) +export class DxoDataGridIndicatorOptionsModule { } 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..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,6 +15,7 @@ import { import { Mode } from 'devextreme/common'; +import { LoadPanelIndicatorProperties } from 'devextreme/ui/load_panel'; import { DxIntegrationModule, @@ -48,6 +49,14 @@ export class DxoDataGridLoadPanelComponent extends NestedOption implements OnDes this._setOption('height', value); } + @Input() + get indicatorOptions(): LoadPanelIndicatorProperties { + return this._getOption('indicatorOptions'); + } + set indicatorOptions(value: LoadPanelIndicatorProperties) { + this._setOption('indicatorOptions', value); + } + @Input() get indicatorSrc(): string { return this._getOption('indicatorSrc'); diff --git a/packages/devextreme-angular/src/ui/load-panel/index.ts b/packages/devextreme-angular/src/ui/load-panel/index.ts index a9ffc49b0b1d..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 { 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'; @@ -52,6 +52,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 +211,21 @@ export class DxLoadPanelComponent extends DxComponent implements OnDestroy { } + + @Input() + get indicatorOptions(): LoadPanelIndicatorProperties { + return this._getOption('indicatorOptions'); + } + set indicatorOptions(value: LoadPanelIndicatorProperties) { + this._setOption('indicatorOptions', value); + } + + /** * [descr:dxLoadPanelOptions.indicatorSrc] + * @deprecated [depNote:dxLoadPanelOptions.indicatorSrc] + */ @Input() get indicatorSrc(): string { @@ -538,6 +551,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 +697,7 @@ export class DxLoadPanelComponent extends DxComponent implements OnDestroy { { emit: 'hideOnParentScrollChange' }, { emit: 'hintChange' }, { emit: 'hoverStateEnabledChange' }, + { emit: 'indicatorOptionsChange' }, { emit: 'indicatorSrcChange' }, { emit: 'maxHeightChange' }, { emit: 'maxWidthChange' }, @@ -728,6 +749,7 @@ export class DxLoadPanelComponent extends DxComponent implements OnDestroy { DxoLoadPanelCollisionModule, DxoLoadPanelFromModule, DxoLoadPanelHideModule, + DxoLoadPanelIndicatorOptionsModule, DxoLoadPanelMyModule, DxoLoadPanelOffsetModule, DxoLoadPanelPositionModule, @@ -755,6 +777,7 @@ export class DxLoadPanelComponent extends DxComponent implements OnDestroy { 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..0faf6d0fa427 --- /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 src(): string { + return this._getOption('src'); + } + set src(value: string) { + this._setOption('src', value); + } + + @Input() + get width(): number | string | undefined { + return this._getOption('width'); + } + set width(value: number | string | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'indicatorOptions'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + imports: [ + DxoLoadPanelIndicatorOptionsComponent + ], + exports: [ + DxoLoadPanelIndicatorOptionsComponent + ], +}) +export class DxoLoadPanelIndicatorOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/index.ts b/packages/devextreme-angular/src/ui/tree-list/index.ts index c77de990bd0f..1d7d4d8482bb 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 { LoadPanelIndicatorProperties } from 'devextreme/ui/load_panel'; import { event } from 'devextreme/events/events.types'; import DxTreeList from 'devextreme/ui/tree_list'; @@ -152,6 +153,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 +832,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?: LoadPanelIndicatorProperties, indicatorSrc?: string, shading?: boolean, shadingColor?: string, showIndicator?: boolean, showPane?: boolean, text?: string, width?: number | string } { return this._getOption('loadPanel'); } - set loadPanel(value: { enabled?: boolean | Mode, height?: number | string, indicatorSrc?: string, shading?: boolean, shadingColor?: string, showIndicator?: boolean, showPane?: boolean, text?: string, width?: number | string }) { + set loadPanel(value: { enabled?: boolean | Mode, height?: number | string, indicatorOptions?: LoadPanelIndicatorProperties, indicatorSrc?: string, shading?: boolean, shadingColor?: string, showIndicator?: boolean, showPane?: boolean, text?: string, width?: number | string }) { this._setOption('loadPanel', value); } @@ -1879,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, 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 }>; /** @@ -2384,6 +2386,7 @@ export class DxTreeListComponent extends DxComponent DxoTreeListHeaderFilterModule, DxoTreeListHideModule, DxoTreeListIconsModule, + DxoTreeListIndicatorOptionsModule, DxiTreeListItemModule, DxoTreeListKeyboardNavigationModule, DxoTreeListLabelModule, @@ -2525,6 +2528,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..a21a457a09b8 --- /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 src(): string { + return this._getOption('src'); + } + set src(value: string) { + this._setOption('src', value); + } + + @Input() + get width(): number | string | undefined { + return this._getOption('width'); + } + set width(value: number | string | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'indicatorOptions'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + imports: [ + 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..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,6 +15,7 @@ import { import { Mode } from 'devextreme/common'; +import { LoadPanelIndicatorProperties } from 'devextreme/ui/load_panel'; import { DxIntegrationModule, @@ -48,6 +49,14 @@ export class DxoTreeListLoadPanelComponent extends NestedOption implements OnDes this._setOption('height', value); } + @Input() + get indicatorOptions(): LoadPanelIndicatorProperties { + return this._getOption('indicatorOptions'); + } + set indicatorOptions(value: LoadPanelIndicatorProperties) { + this._setOption('indicatorOptions', value); + } + @Input() get indicatorSrc(): string { return this._getOption('indicatorSrc'); diff --git a/packages/devextreme-metadata/make-angular-metadata.ts b/packages/devextreme-metadata/make-angular-metadata.ts index 795cd293875a..f78239d1789c 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_panel:dxLoadPanelOptions.indicatorOptions/), + removeMembers(/\/grids:LoadPanel.indicatorOptions/), removeMembers(/\/scheduler:Toolbar/), removeMembers(/\/scheduler:dxSchedulerOptions\.editing\.form/), removeMembers(/\/stepper:/), diff --git a/packages/devextreme-react/src/card-view.ts b/packages/devextreme-react/src/card-view.ts index 3d2dc5260d58..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, 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"; @@ -24,6 +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 } from "devextreme/ui/load_indicator"; import type { event } from "devextreme/events/events.types"; import type dxForm from "devextreme/ui/form"; @@ -1661,6 +1662,27 @@ const Hide = Object.assign(_componen componentType: "option", }); +// owners: +// LoadPanel +type IIndicatorOptionsProps = React.PropsWithChildren<{ + animationType?: LoadingAnimationType; + height?: number | string | undefined; + src?: string; + width?: number | string | undefined; +}> +const _componentIndicatorOptions = (props: IIndicatorOptionsProps) => { + return React.createElement(NestedOption, { + ...props, + elementDescriptor: { + OptionName: "indicatorOptions", + }, + }); +}; + +const IndicatorOptions = Object.assign(_componentIndicatorOptions, { + componentType: "option", +}); + // owners: // CardHeader // TabPanelOptions @@ -1842,6 +1864,7 @@ type ILoadPanelProps = React.PropsWithChildren<{ hideOnParentScroll?: boolean; hint?: string | undefined; hoverStateEnabled?: boolean; + indicatorOptions?: LoadPanelIndicatorProperties; indicatorSrc?: string; maxHeight?: number | string; maxWidth?: number | string; @@ -1881,6 +1904,7 @@ const _componentLoadPanel = (props: ILoadPanelProps) => { }, ExpectedChildren: { animation: { optionName: "animation", isCollectionItem: false }, + indicatorOptions: { optionName: "indicatorOptions", isCollectionItem: false }, position: { optionName: "position", isCollectionItem: false } }, }, @@ -2911,6 +2935,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..6e4ecdf6db89 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 { LoadPanelIndicatorProperties } from "devextreme/ui/load_panel"; 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; + src?: 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?: LoadPanelIndicatorProperties; 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..444e6795a97e 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; + src?: 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..bdf714b60aef 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 { LoadPanelIndicatorProperties } from "devextreme/ui/load_panel"; 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; + src?: 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?: LoadPanelIndicatorProperties; 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..8dc65f65c8b8 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, + LoadPanelIndicatorProperties, ContentReadyEvent as LoadPanelContentReadyEvent, DisposingEvent as LoadPanelDisposingEvent, HiddenEvent, @@ -181,6 +182,9 @@ import { import { AIIntegration, } from "devextreme/common/ai-integration"; +import { + LoadingAnimationType, +} from "devextreme/ui/load_indicator"; import { dxTabPanelOptions, dxTabPanelItem, @@ -2079,6 +2083,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:src": null, + "update:width": null, + }, + props: { + animationType: String as PropType, + height: [Number, String], + src: String, + width: [Number, String] + } +}; + +prepareConfigurationComponentConfig(DxIndicatorOptionsConfig); + +const DxIndicatorOptions = defineComponent(DxIndicatorOptionsConfig); + +(DxIndicatorOptions as any).$_optionName = "indicatorOptions"; + const DxItemConfig = { emits: { "update:isActive": null, @@ -2232,6 +2259,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 +2295,7 @@ const DxLoadPanelConfig = { hideOnParentScroll: Boolean, hint: String, hoverStateEnabled: Boolean, + indicatorOptions: Object as PropType>, indicatorSrc: String, maxHeight: [Number, String], maxWidth: [Number, String], @@ -2300,6 +2329,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 +3321,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..c3459b601dd0 100644 --- a/packages/devextreme-vue/src/data-grid.ts +++ b/packages/devextreme-vue/src/data-grid.ts @@ -238,10 +238,16 @@ import { import { Component, } from "devextreme/core/component"; +import { + LoadingAnimationType, +} from "devextreme/ui/load_indicator"; import { LocateInMenuMode, ShowTextMode, } from "devextreme/ui/toolbar"; +import { + LoadPanelIndicatorProperties, +} from "devextreme/ui/load_panel"; import * as CommonTypes from "devextreme/common"; import { prepareConfigurationComponentConfig } from "./core/index"; @@ -2720,6 +2726,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:src": null, + "update:width": null, + }, + props: { + animationType: String as PropType, + height: [Number, String], + src: String, + width: [Number, String] + } +}; + +prepareConfigurationComponentConfig(DxIndicatorOptionsConfig); + +const DxIndicatorOptions = defineComponent(DxIndicatorOptionsConfig); + +(DxIndicatorOptions as any).$_optionName = "indicatorOptions"; + const DxItemConfig = { emits: { "update:isActive": null, @@ -2818,6 +2847,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 +2859,7 @@ const DxLoadPanelConfig = { props: { enabled: [Boolean, String] as PropType, height: [Number, String], + indicatorOptions: Object as PropType>, indicatorSrc: String, shading: Boolean, shadingColor: String, @@ -2844,6 +2875,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 +4146,7 @@ export { DxHeaderFilter, DxHide, DxIcons, + DxIndicatorOptions, DxItem, DxKeyboardNavigation, DxLabel, diff --git a/packages/devextreme-vue/src/load-panel.ts b/packages/devextreme-vue/src/load-panel.ts index 7c9d96fbf3c9..2101bbced3e2 100644 --- a/packages/devextreme-vue/src/load-panel.ts +++ b/packages/devextreme-vue/src/load-panel.ts @@ -6,6 +6,7 @@ import { event, } from "devextreme/events/events.types"; import { + LoadPanelIndicatorProperties, ContentReadyEvent, DisposingEvent, HiddenEvent, @@ -29,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>, indicatorSrc: String, maxHeight: [Number, String], maxWidth: [Number, String], @@ -120,6 +126,7 @@ const componentConfig = { "update:hideOnParentScroll": null, "update:hint": null, "update:hoverStateEnabled": null, + "update:indicatorOptions": null, "update:indicatorSrc": null, "update:maxHeight": null, "update:maxWidth": null, @@ -154,6 +161,7 @@ const componentConfig = { (this as any).$_hasAsyncTemplate = true; (this as any).$_expectedChildren = { animation: { isCollectionItem: false, optionName: "animation" }, + indicatorOptions: { isCollectionItem: false, optionName: "indicatorOptions" }, position: { isCollectionItem: false, optionName: "position" } }; } @@ -311,6 +319,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:src": null, + "update:width": null, + }, + props: { + animationType: String as PropType, + height: [Number, String], + src: String, + width: [Number, String] + } +}; + +prepareConfigurationComponentConfig(DxIndicatorOptionsConfig); + +const DxIndicatorOptions = defineComponent(DxIndicatorOptionsConfig); + +(DxIndicatorOptions as any).$_optionName = "indicatorOptions"; + const DxMyConfig = { emits: { "update:isActive": null, @@ -461,6 +492,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..94e6780b9524 100644 --- a/packages/devextreme-vue/src/tree-list.ts +++ b/packages/devextreme-vue/src/tree-list.ts @@ -232,10 +232,16 @@ import { import { Component, } from "devextreme/core/component"; +import { + LoadingAnimationType, +} from "devextreme/ui/load_indicator"; import { LocateInMenuMode, ShowTextMode, } from "devextreme/ui/toolbar"; +import { + LoadPanelIndicatorProperties, +} from "devextreme/ui/load_panel"; import * as CommonTypes from "devextreme/common"; import { prepareConfigurationComponentConfig } from "./core/index"; @@ -2424,6 +2430,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:src": null, + "update:width": null, + }, + props: { + animationType: String as PropType, + height: [Number, String], + src: String, + width: [Number, String] + } +}; + +prepareConfigurationComponentConfig(DxIndicatorOptionsConfig); + +const DxIndicatorOptions = defineComponent(DxIndicatorOptionsConfig); + +(DxIndicatorOptions as any).$_optionName = "indicatorOptions"; + const DxItemConfig = { emits: { "update:isActive": null, @@ -2522,6 +2551,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 +2563,7 @@ const DxLoadPanelConfig = { props: { enabled: [Boolean, String] as PropType, height: [Number, String], + indicatorOptions: Object as PropType>, indicatorSrc: String, shading: Boolean, shadingColor: String, @@ -2548,6 +2579,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 +3721,7 @@ export { DxHeaderFilter, DxHide, DxIcons, + DxIndicatorOptions, DxItem, DxKeyboardNavigation, DxLabel, 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 0a72d6c76b9f..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: { @@ -282,6 +281,15 @@ class PivotGrid extends Widget { }); } + _setDeprecatedOptions(): void { + super._setDeprecatedOptions(); + this._deprecatedOptions = { + ...this._deprecatedOptions, + // @ts-expect-error ts-error + 'loadPanel.indicatorSrc': { since: '25.2', alias: 'loadPanel.indicatorOptions.src' }, + }; + } + _updateCalculatedOptions(fields) { const that = this; each(fields, (_, field) => { 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_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 21eee9bfb1f1..f901a389a872 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', alias: 'indicatorOptions.src' }, + }; + } + _updateWrapperAria(): void { this.$wrapper() .removeAttr('aria-label') @@ -211,9 +220,13 @@ class LoadPanel extends Overlay { .appendTo(this._$loadPanelContentWrapper); } + const { indicatorOptions = {}, indicatorSrc } = this.option(); + const { src, ...restIndicatorOptions } = indicatorOptions; + this._createComponent(this._$indicator, LoadIndicator, { elementAttr: this._getAriaAttributes(), - indicatorSrc: this.option('indicatorSrc'), + indicatorSrc: src ?? indicatorSrc, + ...restIndicatorOptions, }); } @@ -243,6 +256,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..a5ec0374aa21 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 { LoadPanelIndicatorProperties } from '../ui/load_panel'; + import { Properties as PopupProperties, } from '../ui/popup'; @@ -2592,8 +2594,13 @@ export type LoadPanel = { /** * @docid GridBaseOptions.loadPanel.indicatorSrc * @default "" + * @deprecated GridBaseOptions.loadPanel.indicatorOptions */ indicatorSrc?: string; + /** + * @docid GridBaseOptions.loadPanel.indicatorOptions + */ + 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 d6ef042f215a..898bfb05bca9 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 { LoadPanelIndicatorProperties } from '../ui/load_panel'; + /** * @docid * @type object @@ -32,8 +34,13 @@ export interface ExportLoadPanel { /** * @docid * @default "" + * @deprecated ExportLoadPanel.indicatorOptions */ indicatorSrc?: string; + /** + * @docid + */ + indicatorOptions?: LoadPanelIndicatorProperties; /** * @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..884e68cab8aa 100644 --- a/packages/devextreme/js/ui/load_indicator.d.ts +++ b/packages/devextreme/js/ui/load_indicator.d.ts @@ -62,6 +62,7 @@ export interface dxLoadIndicatorOptions extends WidgetOptions { */ indicatorSrc?: string; } + /** * @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..73d32fcf3a34 100644 --- a/packages/devextreme/js/ui/load_panel.d.ts +++ b/packages/devextreme/js/ui/load_panel.d.ts @@ -23,6 +23,41 @@ import { PositionAlignment, } from '../common'; +import { LoadingAnimationType } from './load_indicator'; + +export { LoadingAnimationType }; + +/** + * @docid + * @public + */ +export type LoadPanelIndicatorProperties = { + /** + * @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 * @public @@ -130,8 +165,14 @@ export interface dxLoadPanelOptions extends dxOverlayOptions { * @docid * @default "" * @public + * @deprecated dxLoadPanelOptions.indicatorOptions */ indicatorSrc?: string; + /** + * @docid + * @public + */ + 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 3221cf74c4b4..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,6 @@ export { + LoadingAnimationType, + LoadPanelIndicatorProperties, ContentReadyEvent, DisposingEvent, HidingEvent, 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; } 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..5a3723b36594 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 from 25.2)', function(assert) { const url = '../../testing/content/customLoadIndicator.png'; const instance = this.element .dxLoadPanel({ @@ -474,32 +474,54 @@ QUnit.module('options changed callbacks', { assert.equal(instance.option('indicatorSrc'), loadIndicatorInstance.option('indicatorSrc'), 'custom indicator option changed successfully'); }); - QUnit.test('indicatorSrc option change', function(assert) { + QUnit.test('LoadPanel with custom indicator', function(assert) { const url = '../../testing/content/customLoadIndicator.png'; + const customSize = 120; + const indicatorOptions = { + src: url, + animationType: 'sparkle', + height: customSize, + width: customSize, + }; + const updatedOptions = { + src: '', + animationType: 'circle', + height: undefined, + width: undefined, + }; + const optionNames = { + src: 'indicatorSrc', + animationType: 'animationType', + height: 'height', + width: 'width' + }; const instance = this.element .dxLoadPanel({ - showIndicator: true + showIndicator: true, + indicatorOptions, }) .dxLoadPanel('instance'); instance.show(); - instance.option('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'); + Object.entries(indicatorOptions).forEach(([optionName, value]) => { + 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(optionNames[optionName]), value, `custom ${optionName} option changed successfully`); + }); }); - QUnit.test('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('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 be6ade9e2d2c..81858ed1d090 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.dxLoadPanel.LoadPanelIndicatorProperties; /** * [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.dxLoadPanel.LoadPanelIndicatorProperties; /** * [descr:GridBaseOptions.loadPanel.shading] */ @@ -22300,6 +22310,27 @@ declare module DevExpress.ui { */ export type InitializedEvent = DevExpress.common.core.events.InitializedEventInfo; + /** + * [descr:LoadPanelIndicatorProperties] + */ + export type LoadPanelIndicatorProperties = { + /** + * [descr:LoadPanelIndicatorProperties.animationType] + */ + animationType?: DevExpress.ui.dxLoadIndicator.LoadingAnimationType; + /** + * [descr:LoadPanelIndicatorProperties.src] + */ + src?: string; + /** + * [descr:LoadPanelIndicatorProperties.height] + */ + height?: number | string | undefined; + /** + * [descr:LoadPanelIndicatorProperties.width] + */ + width?: number | string | undefined; + }; /** * [descr:_ui_load_panel_OptionChangedEvent] */ @@ -22360,8 +22391,13 @@ declare module DevExpress.ui { height?: number | string; /** * [descr:dxLoadPanelOptions.indicatorSrc] + * @deprecated [depNote:dxLoadPanelOptions.indicatorSrc] */ indicatorSrc?: string; + /** + * [descr:dxLoadPanelOptions.indicatorOptions] + */ + indicatorOptions?: DevExpress.ui.dxLoadPanel.LoadPanelIndicatorProperties; /** * [descr:dxLoadPanelOptions.maxHeight] */