Skip to content

Commit d1b5d04

Browse files
julearimpreyskurantov
juleari
and
mpreyskurantov
authored
LoadPanel: support sparkle loadIndicator (#31210)
Co-authored-by: Mikhail Preyskurantov <5574159+mpreyskurantov@users.noreply.github.com>
1 parent 5725209 commit d1b5d04

38 files changed

Lines changed: 892 additions & 45 deletions

File tree

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@ import { DxoCardViewGroupOperationDescriptionsModule } from 'devextreme-angular/
9393
import { DxoCardViewHeaderFilterModule } from 'devextreme-angular/ui/card-view/nested';
9494
import { DxoCardViewHeaderPanelModule } from 'devextreme-angular/ui/card-view/nested';
9595
import { DxoCardViewHideModule } from 'devextreme-angular/ui/card-view/nested';
96+
import { DxoCardViewIndicatorOptionsModule } from 'devextreme-angular/ui/card-view/nested';
9697
import { DxiCardViewItemModule } from 'devextreme-angular/ui/card-view/nested';
9798
import { DxoCardViewLabelModule } from 'devextreme-angular/ui/card-view/nested';
9899
import { DxoCardViewLoadPanelModule } from 'devextreme-angular/ui/card-view/nested';
@@ -1416,6 +1417,7 @@ export class DxCardViewComponent<TCardData = any, TKey = any> extends DxComponen
14161417
DxoCardViewHeaderFilterModule,
14171418
DxoCardViewHeaderPanelModule,
14181419
DxoCardViewHideModule,
1420+
DxoCardViewIndicatorOptionsModule,
14191421
DxiCardViewItemModule,
14201422
DxoCardViewLabelModule,
14211423
DxoCardViewLoadPanelModule,
@@ -1497,6 +1499,7 @@ export class DxCardViewComponent<TCardData = any, TKey = any> extends DxComponen
14971499
DxoCardViewHeaderFilterModule,
14981500
DxoCardViewHeaderPanelModule,
14991501
DxoCardViewHideModule,
1502+
DxoCardViewIndicatorOptionsModule,
15001503
DxiCardViewItemModule,
15011504
DxoCardViewLabelModule,
15021505
DxoCardViewLoadPanelModule,

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ export * from './group-operation-descriptions';
4343
export * from './header-filter';
4444
export * from './header-panel';
4545
export * from './hide';
46+
export * from './indicator-options';
4647
export * from './item-dxi';
4748
export * from './label';
4849
export * from './load-panel';

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

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
/* tslint:disable:max-line-length */
2+
3+
4+
import {
5+
Component,
6+
OnInit,
7+
OnDestroy,
8+
NgModule,
9+
Host,
10+
SkipSelf,
11+
Input
12+
} from '@angular/core';
13+
14+
15+
16+
17+
import { LoadingAnimationType } from 'devextreme/ui/load_indicator';
18+
19+
import {
20+
DxIntegrationModule,
21+
NestedOptionHost,
22+
} from 'devextreme-angular/core';
23+
import { NestedOption } from 'devextreme-angular/core';
24+
25+
26+
@Component({
27+
selector: 'dxo-card-view-indicator-options',
28+
standalone: true,
29+
template: '',
30+
styles: [''],
31+
imports: [ DxIntegrationModule ],
32+
providers: [NestedOptionHost]
33+
})
34+
export class DxoCardViewIndicatorOptionsComponent extends NestedOption implements OnDestroy, OnInit {
35+
@Input()
36+
get animationType(): LoadingAnimationType {
37+
return this._getOption('animationType');
38+
}
39+
set animationType(value: LoadingAnimationType) {
40+
this._setOption('animationType', value);
41+
}
42+
43+
@Input()
44+
get height(): number | string | undefined {
45+
return this._getOption('height');
46+
}
47+
set height(value: number | string | undefined) {
48+
this._setOption('height', value);
49+
}
50+
51+
@Input()
52+
get src(): string {
53+
return this._getOption('src');
54+
}
55+
set src(value: string) {
56+
this._setOption('src', value);
57+
}
58+
59+
@Input()
60+
get width(): number | string | undefined {
61+
return this._getOption('width');
62+
}
63+
set width(value: number | string | undefined) {
64+
this._setOption('width', value);
65+
}
66+
67+
68+
protected get _optionPath() {
69+
return 'indicatorOptions';
70+
}
71+
72+
73+
constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
74+
@Host() optionHost: NestedOptionHost) {
75+
super();
76+
parentOptionHost.setNestedOption(this);
77+
optionHost.setHost(this, this._fullOptionPath.bind(this));
78+
}
79+
80+
81+
ngOnInit() {
82+
this._addRecreatedComponent();
83+
}
84+
85+
ngOnDestroy() {
86+
this._addRemovedOption(this._getOptionPath());
87+
}
88+
89+
90+
}
91+
92+
@NgModule({
93+
imports: [
94+
DxoCardViewIndicatorOptionsComponent
95+
],
96+
exports: [
97+
DxoCardViewIndicatorOptionsComponent
98+
],
99+
})
100+
export class DxoCardViewIndicatorOptionsModule { }

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {
1818

1919
import { AnimationConfig, PositionConfig } from 'devextreme/common/core/animation';
2020
import { event } from 'devextreme/events/events.types';
21-
import { ContentReadyEvent, DisposingEvent, HiddenEvent, HidingEvent, InitializedEvent, OptionChangedEvent, ShowingEvent, ShownEvent } from 'devextreme/ui/load_panel';
21+
import { LoadPanelIndicatorProperties, ContentReadyEvent, DisposingEvent, HiddenEvent, HidingEvent, InitializedEvent, OptionChangedEvent, ShowingEvent, ShownEvent } from 'devextreme/ui/load_panel';
2222
import { PositionAlignment } from 'devextreme/common';
2323

2424
import {
@@ -117,6 +117,14 @@ export class DxoCardViewLoadPanelComponent extends NestedOption implements OnDes
117117
this._setOption('hoverStateEnabled', value);
118118
}
119119

120+
@Input()
121+
get indicatorOptions(): LoadPanelIndicatorProperties {
122+
return this._getOption('indicatorOptions');
123+
}
124+
set indicatorOptions(value: LoadPanelIndicatorProperties) {
125+
this._setOption('indicatorOptions', value);
126+
}
127+
120128
@Input()
121129
get indicatorSrc(): string {
122130
return this._getOption('indicatorSrc');

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import { Store } from 'devextreme/data/store';
3636
import { dxFormOptions } from 'devextreme/ui/form';
3737
import { dxPopupOptions } from 'devextreme/ui/popup';
3838
import { dxFilterBuilderOptions } from 'devextreme/ui/filter_builder';
39+
import { LoadPanelIndicatorProperties } from 'devextreme/ui/load_panel';
3940
import { event } from 'devextreme/events/events.types';
4041
import { Format } from 'devextreme/common/core/localization';
4142

@@ -173,6 +174,7 @@ import { DxoDataGridGroupPanelModule } from 'devextreme-angular/ui/data-grid/nes
173174
import { DxoDataGridHeaderFilterModule } from 'devextreme-angular/ui/data-grid/nested';
174175
import { DxoDataGridHideModule } from 'devextreme-angular/ui/data-grid/nested';
175176
import { DxoDataGridIconsModule } from 'devextreme-angular/ui/data-grid/nested';
177+
import { DxoDataGridIndicatorOptionsModule } from 'devextreme-angular/ui/data-grid/nested';
176178
import { DxiDataGridItemModule } from 'devextreme-angular/ui/data-grid/nested';
177179
import { DxoDataGridKeyboardNavigationModule } from 'devextreme-angular/ui/data-grid/nested';
178180
import { DxoDataGridLabelModule } from 'devextreme-angular/ui/data-grid/nested';
@@ -879,10 +881,10 @@ export class DxDataGridComponent<TRowData = any, TKey = any> extends DxComponent
879881
880882
*/
881883
@Input()
882-
get loadPanel(): { enabled?: boolean | Mode, height?: number | string, indicatorSrc?: string, shading?: boolean, shadingColor?: string, showIndicator?: boolean, showPane?: boolean, text?: string, width?: number | string } {
884+
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 } {
883885
return this._getOption('loadPanel');
884886
}
885-
set loadPanel(value: { enabled?: boolean | Mode, height?: number | string, indicatorSrc?: string, shading?: boolean, shadingColor?: string, showIndicator?: boolean, showPane?: boolean, text?: string, width?: number | string }) {
887+
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 }) {
886888
this._setOption('loadPanel', value);
887889
}
888890

@@ -1948,7 +1950,7 @@ export class DxDataGridComponent<TRowData = any, TKey = any> extends DxComponent
19481950
* This member supports the internal infrastructure and is not intended to be used directly from your code.
19491951
19501952
*/
1951-
@Output() loadPanelChange: EventEmitter<{ enabled?: boolean | Mode, height?: number | string, indicatorSrc?: string, shading?: boolean, shadingColor?: string, showIndicator?: boolean, showPane?: boolean, text?: string, width?: number | string }>;
1953+
@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 }>;
19521954

19531955
/**
19541956
@@ -2477,6 +2479,7 @@ export class DxDataGridComponent<TRowData = any, TKey = any> extends DxComponent
24772479
DxoDataGridHeaderFilterModule,
24782480
DxoDataGridHideModule,
24792481
DxoDataGridIconsModule,
2482+
DxoDataGridIndicatorOptionsModule,
24802483
DxiDataGridItemModule,
24812484
DxoDataGridKeyboardNavigationModule,
24822485
DxoDataGridLabelModule,
@@ -2639,6 +2642,7 @@ export class DxDataGridComponent<TRowData = any, TKey = any> extends DxComponent
26392642
DxoDataGridHeaderFilterModule,
26402643
DxoDataGridHideModule,
26412644
DxoDataGridIconsModule,
2645+
DxoDataGridIndicatorOptionsModule,
26422646
DxiDataGridItemModule,
26432647
DxoDataGridKeyboardNavigationModule,
26442648
DxoDataGridLabelModule,

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ export * from './grouping';
5353
export * from './header-filter';
5454
export * from './hide';
5555
export * from './icons';
56+
export * from './indicator-options';
5657
export * from './item-dxi';
5758
export * from './keyboard-navigation';
5859
export * from './label';

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

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
/* tslint:disable:max-line-length */
2+
3+
4+
import {
5+
Component,
6+
OnInit,
7+
OnDestroy,
8+
NgModule,
9+
Host,
10+
SkipSelf,
11+
Input
12+
} from '@angular/core';
13+
14+
15+
16+
17+
import { LoadingAnimationType } from 'devextreme/ui/load_indicator';
18+
19+
import {
20+
DxIntegrationModule,
21+
NestedOptionHost,
22+
} from 'devextreme-angular/core';
23+
import { NestedOption } from 'devextreme-angular/core';
24+
25+
26+
@Component({
27+
selector: 'dxo-data-grid-indicator-options',
28+
standalone: true,
29+
template: '',
30+
styles: [''],
31+
imports: [ DxIntegrationModule ],
32+
providers: [NestedOptionHost]
33+
})
34+
export class DxoDataGridIndicatorOptionsComponent extends NestedOption implements OnDestroy, OnInit {
35+
@Input()
36+
get animationType(): LoadingAnimationType {
37+
return this._getOption('animationType');
38+
}
39+
set animationType(value: LoadingAnimationType) {
40+
this._setOption('animationType', value);
41+
}
42+
43+
@Input()
44+
get height(): number | string | undefined {
45+
return this._getOption('height');
46+
}
47+
set height(value: number | string | undefined) {
48+
this._setOption('height', value);
49+
}
50+
51+
@Input()
52+
get src(): string {
53+
return this._getOption('src');
54+
}
55+
set src(value: string) {
56+
this._setOption('src', value);
57+
}
58+
59+
@Input()
60+
get width(): number | string | undefined {
61+
return this._getOption('width');
62+
}
63+
set width(value: number | string | undefined) {
64+
this._setOption('width', value);
65+
}
66+
67+
68+
protected get _optionPath() {
69+
return 'indicatorOptions';
70+
}
71+
72+
73+
constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
74+
@Host() optionHost: NestedOptionHost) {
75+
super();
76+
parentOptionHost.setNestedOption(this);
77+
optionHost.setHost(this, this._fullOptionPath.bind(this));
78+
}
79+
80+
81+
ngOnInit() {
82+
this._addRecreatedComponent();
83+
}
84+
85+
ngOnDestroy() {
86+
this._addRemovedOption(this._getOptionPath());
87+
}
88+
89+
90+
}
91+
92+
@NgModule({
93+
imports: [
94+
DxoDataGridIndicatorOptionsComponent
95+
],
96+
exports: [
97+
DxoDataGridIndicatorOptionsComponent
98+
],
99+
})
100+
export class DxoDataGridIndicatorOptionsModule { }

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515

1616

1717
import { Mode } from 'devextreme/common';
18+
import { LoadPanelIndicatorProperties } from 'devextreme/ui/load_panel';
1819

1920
import {
2021
DxIntegrationModule,
@@ -48,6 +49,14 @@ export class DxoDataGridLoadPanelComponent extends NestedOption implements OnDes
4849
this._setOption('height', value);
4950
}
5051

52+
@Input()
53+
get indicatorOptions(): LoadPanelIndicatorProperties {
54+
return this._getOption('indicatorOptions');
55+
}
56+
set indicatorOptions(value: LoadPanelIndicatorProperties) {
57+
this._setOption('indicatorOptions', value);
58+
}
59+
5160
@Input()
5261
get indicatorSrc(): string {
5362
return this._getOption('indicatorSrc');

0 commit comments

Comments
 (0)