@onecx/angular-accelerator 6.0.0-rc.8 → 6.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/i18n/primeng/de.json +1 -1
- package/assets/i18n/primeng/en.json +1 -1
- package/fesm2022/onecx-angular-accelerator-testing.mjs +71 -6
- package/fesm2022/onecx-angular-accelerator-testing.mjs.map +1 -1
- package/fesm2022/onecx-angular-accelerator.mjs +1184 -802
- package/fesm2022/onecx-angular-accelerator.mjs.map +1 -1
- package/index.d.ts +13 -10
- package/lib/angular-accelerator-primeng.module.d.ts +1 -1
- package/lib/angular-accelerator.module.d.ts +27 -20
- package/lib/components/data-list-grid/data-list-grid.component.d.ts +2 -19
- package/lib/components/data-table/data-table.component.d.ts +9 -38
- package/lib/components/data-view/data-view.component.d.ts +2 -72
- package/lib/components/dialog/dialog-content/dialog-content.component.d.ts +29 -0
- package/lib/components/dialog/dialog-footer/dialog-footer.component.d.ts +39 -0
- package/lib/components/dialog/dialog-inline/dialog-inline.component.d.ts +11 -0
- package/lib/components/dialog/dialog-message-content/dialog-message-content.component.d.ts +8 -0
- package/lib/components/error-component/global-error.component.d.ts +12 -0
- package/lib/components/filter-view/filter-view.component.d.ts +1 -3
- package/lib/components/group-by-count-diagram/group-by-count-diagram.component.d.ts +1 -6
- package/lib/components/interactive-data-view/interactive-data-view.component.d.ts +27 -49
- package/lib/components/loading-indicator/loading-indicator.component.d.ts +5 -0
- package/lib/components/page-header/page-header.component.d.ts +0 -4
- package/lib/components/search-header/search-header.component.d.ts +1 -6
- package/lib/directives/basic.directive.d.ts +11 -0
- package/lib/directives/if-permission.directive.d.ts +1 -1
- package/lib/directives/loading-indicator.directive.d.ts +16 -0
- package/lib/model/breadcrumb-menu-item.model.d.ts +0 -4
- package/lib/model/button-dialog.d.ts +47 -0
- package/lib/model/column-type.model.d.ts +1 -8
- package/lib/pipes/relative-date.pipe.d.ts +10 -0
- package/lib/services/export-data.service.d.ts +18 -0
- package/lib/services/portal-dialog.service.d.ts +427 -0
- package/lib/utils/dateutils.d.ts +0 -4
- package/lib/utils/image-logo-url.utils.d.ts +3 -0
- package/migrations.json +9 -1
- package/package.json +9 -8
- package/testing/column-group-selection.harness.d.ts +1 -1
- package/testing/custom-group-column-selector.harness.d.ts +6 -6
- package/testing/data-layout-selection.harness.d.ts +3 -3
- package/testing/data-list-grid.harness.d.ts +3 -3
- package/testing/data-table.harness.d.ts +3 -3
- package/testing/data-view.harness.d.ts +2 -2
- package/testing/default-grid-item.harness.d.ts +1 -1
- package/testing/default-list-item.harness.d.ts +4 -4
- package/testing/diagram.harness.d.ts +1 -1
- package/testing/dialog-content.harness.d.ts +6 -0
- package/testing/dialog-footer.harness.d.ts +14 -0
- package/testing/dialog-inline.harness.d.ts +8 -0
- package/testing/dialog-message-content.harness.d.ts +8 -0
- package/testing/filter-view.harness.d.ts +6 -6
- package/testing/group-by-count-diagram.harness.d.ts +1 -1
- package/testing/index.d.ts +4 -0
- package/testing/interactive-data-view.harness.d.ts +8 -8
- package/testing/lifecycle.harness.d.ts +2 -2
- package/testing/page-header.harness.d.ts +6 -6
- package/testing/search-header.harness.d.ts +5 -5
- package/lib/components/data-loading-error/data-loading-error.component.d.ts +0 -8
- package/lib/injection-tokens/has-permission-checker.d.ts +0 -13
- package/lib/services/translation-cache.service.d.ts +0 -19
- package/lib/services/translation-connection.service.d.ts +0 -10
- package/lib/utils/async-translate-loader.utils.d.ts +0 -12
- package/lib/utils/caching-translate-loader.utils.d.ts +0 -16
- package/lib/utils/create-remote-component-and-mfe-translate-loader.utils.d.ts +0 -6
- package/lib/utils/create-remote-component-translate-loader.utils.d.ts +0 -5
- package/lib/utils/create-translate-loader.utils.d.ts +0 -8
- package/lib/utils/provide-connection-service.d.ts +0 -6
- package/lib/utils/translate.combined.loader.d.ts +0 -12
|
@@ -0,0 +1,427 @@
|
|
|
1
|
+
import { EventEmitter, OnDestroy, Type } from '@angular/core';
|
|
2
|
+
import { DialogService } from 'primeng/dynamicdialog';
|
|
3
|
+
import { Observable } from 'rxjs';
|
|
4
|
+
import { ButtonDialogButtonDetails, ButtonDialogCustomButtonDetails } from '../model/button-dialog';
|
|
5
|
+
import { PrimeIcon } from '../utils/primeicon.utils';
|
|
6
|
+
import * as i0 from "@angular/core";
|
|
7
|
+
/**
|
|
8
|
+
* Object containing key for translation with parameters object for translation
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ## Assume such translation is in the translation file
|
|
12
|
+
* ```typescript
|
|
13
|
+
* const translations = {
|
|
14
|
+
* MY_KEY = 'text with parameter value = {{value}}',
|
|
15
|
+
* }
|
|
16
|
+
* ```
|
|
17
|
+
*
|
|
18
|
+
* ## TranslationKeyWithParameters declaration
|
|
19
|
+
* ```
|
|
20
|
+
* // will be translated into
|
|
21
|
+
* // text with parameter value = hello
|
|
22
|
+
* const myKey: TranslationKeyWithParameters = {
|
|
23
|
+
* key: 'MY_KEY',
|
|
24
|
+
* parameters: {
|
|
25
|
+
* value: 'hello',
|
|
26
|
+
* },
|
|
27
|
+
* }
|
|
28
|
+
* ```
|
|
29
|
+
*/
|
|
30
|
+
type TranslationKeyWithParameters = {
|
|
31
|
+
key: string;
|
|
32
|
+
parameters: Record<string, unknown>;
|
|
33
|
+
};
|
|
34
|
+
/**
|
|
35
|
+
* String with key to translation or {@link TranslationKeyWithParameters} object. If provided string cannot be translated it will be displayed as is.
|
|
36
|
+
*/
|
|
37
|
+
type TranslationKey = string | TranslationKeyWithParameters;
|
|
38
|
+
/**
|
|
39
|
+
* Object containing message of type {@link TranslationKey} and icon to be displayed along the message.
|
|
40
|
+
*
|
|
41
|
+
* @example
|
|
42
|
+
* DialogMessage with TranslationKey will display 'text with parameter value = hello' and question mark icon
|
|
43
|
+
*
|
|
44
|
+
* ## Assume such translation is in the translation file
|
|
45
|
+
* ```
|
|
46
|
+
* const translations = {
|
|
47
|
+
* MY_KEY = 'text with parameter value = {{value}}',
|
|
48
|
+
* }
|
|
49
|
+
* ```
|
|
50
|
+
*
|
|
51
|
+
* ## DialogMessage declaration
|
|
52
|
+
* ```
|
|
53
|
+
* const myDialogMessage: DialogMessage = {
|
|
54
|
+
* message: {
|
|
55
|
+
* key: 'MY_KEY',
|
|
56
|
+
* parameters: {
|
|
57
|
+
* value = 'hello',
|
|
58
|
+
* },
|
|
59
|
+
* },
|
|
60
|
+
* icon: PrimeIcons.QUESTION
|
|
61
|
+
* }
|
|
62
|
+
* ```
|
|
63
|
+
*/
|
|
64
|
+
type DialogMessage = {
|
|
65
|
+
message: TranslationKey;
|
|
66
|
+
icon: PrimeIcon;
|
|
67
|
+
};
|
|
68
|
+
/**
|
|
69
|
+
* Implement via component class to be displayed by {@link PortalDialogService.openDialog}
|
|
70
|
+
*
|
|
71
|
+
* Use if you want {@link PortalDialogService.openDialog} to return state of displayed component's current dialogResult value alongside the clicked button.
|
|
72
|
+
*
|
|
73
|
+
* @example
|
|
74
|
+
* Display component implementing DialogResult<string> and react on the returned value
|
|
75
|
+
*
|
|
76
|
+
* ## Component declaration
|
|
77
|
+
* ```
|
|
78
|
+
* @Component({template: `<div>
|
|
79
|
+
* <input (change)="onInputChange($event)">
|
|
80
|
+
* </div>`})
|
|
81
|
+
* export class MyInputComponent implements DialogResult<string> {
|
|
82
|
+
* dialogResult: string = ''
|
|
83
|
+
*
|
|
84
|
+
* onInputChange(event: any) {
|
|
85
|
+
* this.dialogResult = event.target.value
|
|
86
|
+
* }
|
|
87
|
+
* }
|
|
88
|
+
* ```
|
|
89
|
+
*
|
|
90
|
+
* ## PortalDialogService call
|
|
91
|
+
* ```
|
|
92
|
+
* portalDialogService.openDialog(title, { type: MyInputComponent }, primaryButton, ...).subscribe((result: DialogState<string>) => {
|
|
93
|
+
* // result.value === MyInputComponent.dialogResult (during button click)
|
|
94
|
+
* // behavior when dialog closes
|
|
95
|
+
* })
|
|
96
|
+
* ```
|
|
97
|
+
*
|
|
98
|
+
*/
|
|
99
|
+
export interface DialogResult<T> {
|
|
100
|
+
dialogResult: T;
|
|
101
|
+
}
|
|
102
|
+
/**
|
|
103
|
+
* Implement via component class to be displayed by {@link PortalDialogService.openDialog}
|
|
104
|
+
*
|
|
105
|
+
* Use to control the state of the primary button (disabled or enabled). Whenever your component wants to disable/enable primary button it should emit boolean equal to whether primary button should be enabled.
|
|
106
|
+
*
|
|
107
|
+
* If you implement this interface then primary button will be disabled until the emitter emits true
|
|
108
|
+
*/
|
|
109
|
+
export interface DialogPrimaryButtonDisabled {
|
|
110
|
+
primaryButtonEnabled: EventEmitter<boolean>;
|
|
111
|
+
}
|
|
112
|
+
/**
|
|
113
|
+
* Implement via component class to be displayed by {@link PortalDialogService.openDialog}
|
|
114
|
+
*
|
|
115
|
+
* Use to control the state of the secondary button (disabled or enabled). Whenever your component wants to disable/enable secondary button it should emit boolean equal to whether secondary button should be enabled.
|
|
116
|
+
*
|
|
117
|
+
* If you implement this interface then secondary button will be disabled until the emitter emits true
|
|
118
|
+
*/
|
|
119
|
+
export interface DialogSecondaryButtonDisabled {
|
|
120
|
+
secondaryButtonEnabled: EventEmitter<boolean>;
|
|
121
|
+
}
|
|
122
|
+
/**
|
|
123
|
+
* Implement via component class to be displayed by {@link PortalDialogService.openDialog}
|
|
124
|
+
*
|
|
125
|
+
* Use to control the state of custom buttons (disabled or enabled). Whenever your component wants to disable/enable any custom button it should emit an object indicating which button should be disabled/enabled. This object should contain id property (string) related to previously defined button and enabled property (boolean) equal to whether custom button should be enabled.
|
|
126
|
+
*
|
|
127
|
+
* If you implement this interface then all custom buttons will be disabled until the emitter emits true
|
|
128
|
+
*/
|
|
129
|
+
export interface DialogCustomButtonsDisabled {
|
|
130
|
+
customButtonEnabled: EventEmitter<{
|
|
131
|
+
id: string;
|
|
132
|
+
enabled: boolean;
|
|
133
|
+
}>;
|
|
134
|
+
}
|
|
135
|
+
/**
|
|
136
|
+
* Implement via component class to be displayed by {@link PortalDialogService.openDialog}
|
|
137
|
+
*
|
|
138
|
+
* Use to add behavior on button clicks. {@link DialogButtonClicked.ocxDialogButtonClicked} method will be called everytime any button is clicked and should return boolean value (or Observable<boolean> or Promise<boolean>) equal to whether dialog should be closed or not.
|
|
139
|
+
*
|
|
140
|
+
* {@link DialogButtonClicked.ocxDialogButtonClicked} will recieve object containing component's state captured on button click. It will have button property with value 'primary' or 'secondary' which determines which button was clicked.
|
|
141
|
+
*
|
|
142
|
+
* It will also have result property which by default will be undefined, however if you want to add any properties to the state please combine this interface with {@link DialogResult}. That way result will be equal to component's dialogResult property captured on button click.
|
|
143
|
+
*
|
|
144
|
+
* @example
|
|
145
|
+
* Display component implementing DialogResult<string> and DialogButtonClicked which should not close dialog on clear click but should close when send clicked and api call was sucessful
|
|
146
|
+
*
|
|
147
|
+
* ## Component declaration
|
|
148
|
+
* ```
|
|
149
|
+
* @Component({template: `<div>
|
|
150
|
+
* <input (change)="onInputChange($event)">
|
|
151
|
+
* </div>`})
|
|
152
|
+
* export class MyInputComponent implements DialogResult<string>, DialogButtonClicked {
|
|
153
|
+
* dialogResult: string = ''
|
|
154
|
+
*
|
|
155
|
+
* onInputChange(event: any) {
|
|
156
|
+
* this.dialogResult = event.target.value
|
|
157
|
+
* }
|
|
158
|
+
*
|
|
159
|
+
* ocxDialogButtonClicked(state: DialogState<string>) {
|
|
160
|
+
* // here you can do any operations you desire
|
|
161
|
+
* // such as form validation
|
|
162
|
+
* // api calls and so on
|
|
163
|
+
* if (state.button === 'primary') {
|
|
164
|
+
* // send form data to server
|
|
165
|
+
* this.apiService.postInput(state.result, ...).pipe(
|
|
166
|
+
* // map response to boolean meaning if call was successfull
|
|
167
|
+
* )
|
|
168
|
+
* return true // if dialog should be closed return true
|
|
169
|
+
* } else {
|
|
170
|
+
* // clear input
|
|
171
|
+
* return false // don't want to close the dialog, only to clear it
|
|
172
|
+
* }
|
|
173
|
+
* }
|
|
174
|
+
* }
|
|
175
|
+
* ```
|
|
176
|
+
*
|
|
177
|
+
* ## PortalDialogService call
|
|
178
|
+
* ```
|
|
179
|
+
* portalDialogService.openDialog(title, { type: MyInputComponent }, "Send", "Clear").subscribe((result: DialogState<string>) => {
|
|
180
|
+
* // behavior to be fired when dialog closes
|
|
181
|
+
* })
|
|
182
|
+
* ```
|
|
183
|
+
*/
|
|
184
|
+
export interface DialogButtonClicked<T = unknown> {
|
|
185
|
+
ocxDialogButtonClicked(state: DialogState<T>): Observable<boolean> | Promise<boolean> | boolean | undefined | void;
|
|
186
|
+
}
|
|
187
|
+
/**
|
|
188
|
+
* Object containing component type to be displayed and inputs to populate the component.
|
|
189
|
+
*
|
|
190
|
+
* @example
|
|
191
|
+
*
|
|
192
|
+
* ```
|
|
193
|
+
* @Component({template: `<h1>{{content}}</h1>`})
|
|
194
|
+
* export class MyComponent {
|
|
195
|
+
* @Input() content: string = ''
|
|
196
|
+
* }
|
|
197
|
+
* const myComponent = {
|
|
198
|
+
* type: MyComponent,
|
|
199
|
+
* inputs: {
|
|
200
|
+
* content: 'My header content',
|
|
201
|
+
* },
|
|
202
|
+
* }
|
|
203
|
+
* ```
|
|
204
|
+
*/
|
|
205
|
+
type Component<T extends unknown> = unknown extends T ? {
|
|
206
|
+
type: Type<any>;
|
|
207
|
+
inputs?: Record<string, unknown>;
|
|
208
|
+
} : {
|
|
209
|
+
type: Type<DialogResult<T>>;
|
|
210
|
+
inputs?: Record<string, unknown>;
|
|
211
|
+
};
|
|
212
|
+
export type DialogButton = 'primary' | 'secondary' | 'custom';
|
|
213
|
+
export type DialogStateButtonClicked = 'primary' | 'secondary' | 'custom';
|
|
214
|
+
/**
|
|
215
|
+
* Object containing information about clicked button ('primary' or 'secondary') and displayed component state captured on button click (only if component implements {@link DialogResult} interface)
|
|
216
|
+
*/
|
|
217
|
+
export type DialogState<T> = {
|
|
218
|
+
button: DialogStateButtonClicked;
|
|
219
|
+
result: T | undefined;
|
|
220
|
+
id?: string;
|
|
221
|
+
};
|
|
222
|
+
export type PortalDialogConfig = {
|
|
223
|
+
showXButton?: boolean;
|
|
224
|
+
customButtons?: ButtonDialogCustomButtonDetails[];
|
|
225
|
+
autoFocusButton?: DialogButton;
|
|
226
|
+
autoFocusButtonCustomId?: string;
|
|
227
|
+
ariaLabelledBy?: string;
|
|
228
|
+
width?: string;
|
|
229
|
+
height?: string;
|
|
230
|
+
closeOnEscape?: boolean;
|
|
231
|
+
focusOnShow?: boolean;
|
|
232
|
+
focusTrap?: boolean;
|
|
233
|
+
baseZIndex?: number;
|
|
234
|
+
autoZIndex?: boolean;
|
|
235
|
+
dismissableMask?: boolean;
|
|
236
|
+
showHeader?: boolean;
|
|
237
|
+
modal?: boolean;
|
|
238
|
+
resizable?: boolean;
|
|
239
|
+
draggable?: boolean;
|
|
240
|
+
keepInViewport?: boolean;
|
|
241
|
+
minX?: number;
|
|
242
|
+
minY?: number;
|
|
243
|
+
maximizable?: boolean;
|
|
244
|
+
maximizeIcon?: string;
|
|
245
|
+
minimizeIcon?: string;
|
|
246
|
+
position?: string;
|
|
247
|
+
closeAriaLabel?: string;
|
|
248
|
+
};
|
|
249
|
+
export interface PortalDialogServiceData {
|
|
250
|
+
primaryButtonEnabled$: EventEmitter<boolean>;
|
|
251
|
+
secondaryButtonEnabled$: EventEmitter<boolean>;
|
|
252
|
+
customButtonEnabled$: EventEmitter<{
|
|
253
|
+
id: string;
|
|
254
|
+
enabled: boolean;
|
|
255
|
+
}>;
|
|
256
|
+
buttonClicked$: EventEmitter<DialogState<unknown>>;
|
|
257
|
+
}
|
|
258
|
+
export declare class PortalDialogService implements OnDestroy {
|
|
259
|
+
private dialogService;
|
|
260
|
+
private translateService;
|
|
261
|
+
private router;
|
|
262
|
+
private eventsTopic;
|
|
263
|
+
private skipStyleScoping;
|
|
264
|
+
private remoteComponentConfig;
|
|
265
|
+
private appStateService;
|
|
266
|
+
private capabilityService;
|
|
267
|
+
constructor();
|
|
268
|
+
ngOnDestroy(): void;
|
|
269
|
+
/**
|
|
270
|
+
* Opens dialog with a component or message to display and one or two buttons. This method allows you to customize the dialog using parameters and by implementic specific interfaces via component to be displayed. The dialog is only shown if if you subscribe to this function.
|
|
271
|
+
*
|
|
272
|
+
* Displaying component inisde the dialog can be achieved by providing the component class with optional inputs. By default the component will be shown without any interaction with the dialog, however you can implement the following interfaces by your component class to allow for some interactions:
|
|
273
|
+
* - {@link DialogResult} - dialog state will contain dialogResult property
|
|
274
|
+
*
|
|
275
|
+
* - {@link DialogButtonClicked} - on button click ocxDialogButtonClicked function will be called with dialog state as a parameter. You should return true if you want dialog to be close or false if not and add any operations on your component.
|
|
276
|
+
*
|
|
277
|
+
* - {@link DialogPrimaryButtonDisabled} - dialog will use the EventEmitter to determine if the primary button should be disabled
|
|
278
|
+
*
|
|
279
|
+
* - {@link DialogSecondaryButtonDisabled} - dialog will use the EventEmitter to determine if the secondary button should be disabled
|
|
280
|
+
*
|
|
281
|
+
* - {@link DialogCustomButtonsDisabled} - dialog will use the EventEmitter to determine if the custom buttons should be disabled
|
|
282
|
+
*
|
|
283
|
+
* @param title Translation key for dialog title
|
|
284
|
+
* @param componentOrMessage Either a component or a translation key of a message with optional parameters and icon to be displayed next to the message
|
|
285
|
+
* @param primaryButtonTranslationKeyOrDetails Translation key with optional parameters and icon to be displayed next to the text of the button
|
|
286
|
+
* @param secondaryButtonTranslationKeyOrDetails Translation key with optional parameters and icon to be displayed next to the text of the button
|
|
287
|
+
* @param extras Configuration object allowing for customization of the dialog behavior and visual aspects
|
|
288
|
+
* @returns Observable containing dialog state on close
|
|
289
|
+
*
|
|
290
|
+
*
|
|
291
|
+
* @example
|
|
292
|
+
* Display dialog with message and two buttons using translation keys
|
|
293
|
+
*
|
|
294
|
+
* ```
|
|
295
|
+
* // assume 'TITLE_KEY', 'WELCOME_MESSAGE', 'OK_BUTTON' and 'REFRESH_BUTTON' are translation keys
|
|
296
|
+
* this.portalDialogService.openDialog('TITLE_KEY', 'WELCOME_MESSAGE', 'OK_BUTTON', 'REFRESH_BUTTON').subscribe((stateOnClose) => {
|
|
297
|
+
* // operations when dialog has been closed
|
|
298
|
+
* })
|
|
299
|
+
* ```
|
|
300
|
+
*
|
|
301
|
+
* @example
|
|
302
|
+
* Display dialog message with icon and single button
|
|
303
|
+
*
|
|
304
|
+
* ```
|
|
305
|
+
* // Welcome message with question mark icon
|
|
306
|
+
* const dialogMessage = {
|
|
307
|
+
* key: 'WELCOME_MESSAGE',
|
|
308
|
+
* icon: PrimeIcons.QUESTION
|
|
309
|
+
* }
|
|
310
|
+
* this.portalDialogService.openDialog('TITLE_KEY', dialogMessage, 'OK_BUTTON').subscribe((stateOnClose) => {
|
|
311
|
+
* // operations when dialog has been closed
|
|
312
|
+
* })
|
|
313
|
+
* ```
|
|
314
|
+
*
|
|
315
|
+
* @example
|
|
316
|
+
* Display dialog message with two customized buttons
|
|
317
|
+
*
|
|
318
|
+
* ```
|
|
319
|
+
* // Ok button with check icon
|
|
320
|
+
* const primaryButton = {
|
|
321
|
+
* key: 'OK_BUTTON',
|
|
322
|
+
* icon: PrimeIcons.CHECK
|
|
323
|
+
* tooltipKey: 'OK_TOOLTIP',
|
|
324
|
+
* tooltipPosition: 'bottom'
|
|
325
|
+
* }
|
|
326
|
+
*
|
|
327
|
+
* // Refresh button with refresh icon
|
|
328
|
+
* const secondaryButton = {
|
|
329
|
+
* key: 'REFRESH_BUTTON',
|
|
330
|
+
* icon: PrimeIcons.REFRESH
|
|
331
|
+
* tooltipKey: 'REFRESH_TOOLTIP',
|
|
332
|
+
* tooltipPosition: 'right'
|
|
333
|
+
* }
|
|
334
|
+
*
|
|
335
|
+
* this.portalDialogService.openDialog('TITLE_KEY', 'WELCOME_MESSAGE', primaryButton, secondaryButton).subscribe((stateOnClose) => {
|
|
336
|
+
* // operations when dialog has been closed
|
|
337
|
+
* })
|
|
338
|
+
* ```
|
|
339
|
+
*
|
|
340
|
+
* @example
|
|
341
|
+
* Display dialog message without X button in top right corner
|
|
342
|
+
*
|
|
343
|
+
* ```
|
|
344
|
+
* this.portalDialogService.openDialog('TITLE_KEY', 'WELCOME_MESSAGE', 'OK_BUTTON', 'REFRESH_BUTTON', false).subscribe((stateOnClose) => {
|
|
345
|
+
* // operations when dialog has been closed
|
|
346
|
+
* })
|
|
347
|
+
* ```
|
|
348
|
+
*
|
|
349
|
+
* @example
|
|
350
|
+
* React on dialog closing
|
|
351
|
+
*
|
|
352
|
+
* ```
|
|
353
|
+
* this.portalDialogService.openDialog('TITLE_KEY', 'WELCOME_MESSAGE', 'OK_BUTTON', 'REFRESH_BUTTON').subscribe((stateOnClose) => {
|
|
354
|
+
* // operations when dialog has been closed
|
|
355
|
+
* })
|
|
356
|
+
* ```
|
|
357
|
+
*
|
|
358
|
+
* @example
|
|
359
|
+
* Display dialog with component
|
|
360
|
+
*
|
|
361
|
+
* ## Component declaration
|
|
362
|
+
* ```
|
|
363
|
+
* @Component({template: `<div>
|
|
364
|
+
* <h1>{{header | translate}}</h1>
|
|
365
|
+
* <input (change)="onInputChange($event)">
|
|
366
|
+
* </div>`})
|
|
367
|
+
* export class MyInputComponent implements DialogResult<string>, DialogButtonClicked, DialogPrimaryButtonDisabled, DialogSecondaryButtonDisabled {
|
|
368
|
+
* @Input() header: string = ''
|
|
369
|
+
* // change value to manipulate component state visible by dialog
|
|
370
|
+
* dialogResult: string = ''
|
|
371
|
+
* // emit true/false to disable primary button
|
|
372
|
+
* @Output() primaryButtonEnabled: EventEmitter<boolean> = new EventEmitter()
|
|
373
|
+
* // emit true/false to disable secondary button
|
|
374
|
+
* @Output() secondaryButtonEnabled: EventEmitter<boolean> = new EventEmitter()
|
|
375
|
+
*
|
|
376
|
+
* // implement operations to be done on button clicks and return if the dialog should be closed
|
|
377
|
+
* ocxDialogButtonClicked(state: DialogState<string>) {
|
|
378
|
+
* return true
|
|
379
|
+
* }
|
|
380
|
+
*
|
|
381
|
+
* onInputChange(event: any) {
|
|
382
|
+
* this.dialogResult = event.target.value
|
|
383
|
+
* }
|
|
384
|
+
* }
|
|
385
|
+
* ```
|
|
386
|
+
*
|
|
387
|
+
* ## PortalDialogService call
|
|
388
|
+
* ```
|
|
389
|
+
* const myComponent = {
|
|
390
|
+
* type: MyInputComponent,
|
|
391
|
+
* inputs: {
|
|
392
|
+
* header: 'DIALOG_HEADER'
|
|
393
|
+
* }
|
|
394
|
+
* }
|
|
395
|
+
* this.portalDialogService.openDialog('TITLE_KEY', myComponent, 'OK_BUTTON', 'REFRESH_BUTTON').subscribe((stateOnClose) => {
|
|
396
|
+
* // operations when dialog has been closed
|
|
397
|
+
* })
|
|
398
|
+
* ```
|
|
399
|
+
*
|
|
400
|
+
* @example
|
|
401
|
+
* Display dialog with component without passing inputs
|
|
402
|
+
*
|
|
403
|
+
* ## PortalDialogService call
|
|
404
|
+
* ```
|
|
405
|
+
* this.portalDialogService.openDialog('TITLE_KEY', MyInputComponent, 'OK_BUTTON', 'REFRESH_BUTTON').subscribe((stateOnClose) => {
|
|
406
|
+
* // operations when dialog has been closed
|
|
407
|
+
* })
|
|
408
|
+
* ```
|
|
409
|
+
*/
|
|
410
|
+
openDialog<T>(title: TranslationKey | null, componentOrMessage: Type<any> | Type<DialogResult<T>> | Component<T> | TranslationKey | DialogMessage, primaryButtonTranslationKeyOrDetails: TranslationKey | ButtonDialogButtonDetails, secondaryButtonTranslationKeyOrDetails?: TranslationKey | ButtonDialogButtonDetails, extras?: PortalDialogConfig): Observable<DialogState<T>>;
|
|
411
|
+
private cleanupAndCloseDialog;
|
|
412
|
+
private removeDialogFromHtml;
|
|
413
|
+
private setScopeIdentifier;
|
|
414
|
+
private findDialogComponentBodyChild;
|
|
415
|
+
private findBodyChild;
|
|
416
|
+
private prepareTitleForTranslation;
|
|
417
|
+
private buttonDetailsOrTranslationKey;
|
|
418
|
+
private getComponentToRender;
|
|
419
|
+
private isTranslationKey;
|
|
420
|
+
private isString;
|
|
421
|
+
private isDialogMessage;
|
|
422
|
+
private isType;
|
|
423
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<PortalDialogService, never>;
|
|
424
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<PortalDialogService>;
|
|
425
|
+
}
|
|
426
|
+
export declare function providePortalDialogService(): (typeof PortalDialogService | typeof DialogService)[];
|
|
427
|
+
export {};
|
package/lib/utils/dateutils.d.ts
CHANGED
|
@@ -6,7 +6,3 @@ export declare class DateUtils {
|
|
|
6
6
|
static ɵfac: i0.ɵɵFactoryDeclaration<DateUtils, never>;
|
|
7
7
|
static ɵprov: i0.ɵɵInjectableDeclaration<DateUtils>;
|
|
8
8
|
}
|
|
9
|
-
/**
|
|
10
|
-
* @deprecated Will be removed. Please use isValidDate() from @onecx/accelerator
|
|
11
|
-
*/
|
|
12
|
-
export declare function isValidDate(value: any): value is Date;
|
package/migrations.json
CHANGED
|
@@ -18,9 +18,17 @@
|
|
|
18
18
|
"@nx/angular": {
|
|
19
19
|
"version": "~20.3.0",
|
|
20
20
|
"alwaysAddToPackageJson": false
|
|
21
|
+
},
|
|
22
|
+
"@ngx-translate/core": {
|
|
23
|
+
"version": "~16.0.4",
|
|
24
|
+
"alwaysAddToPackageJson": false
|
|
25
|
+
},
|
|
26
|
+
"primeng": {
|
|
27
|
+
"version": "~19.0.0",
|
|
28
|
+
"alwaysAddToPackageJson": false
|
|
21
29
|
}
|
|
22
30
|
}
|
|
23
31
|
},
|
|
24
32
|
"version": "null"
|
|
25
33
|
}
|
|
26
|
-
}
|
|
34
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@onecx/angular-accelerator",
|
|
3
|
-
"version": "6.0.0
|
|
3
|
+
"version": "6.0.0",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"peerDependencies": {
|
|
6
6
|
"@angular/common": "^19.0.0",
|
|
@@ -12,18 +12,19 @@
|
|
|
12
12
|
"@ngx-translate/core": "^16.0.0",
|
|
13
13
|
"@ngx-translate/http-loader": "^8.0.0",
|
|
14
14
|
"@ngneat/until-destroy": "^10.0.0",
|
|
15
|
-
"@onecx/integration-interface": "^6.0.0
|
|
16
|
-
"@onecx/
|
|
17
|
-
"@onecx/angular-
|
|
18
|
-
"@onecx/angular-
|
|
19
|
-
"@onecx/
|
|
20
|
-
"@onecx/angular-utils": "^6.0.0
|
|
15
|
+
"@onecx/integration-interface": "^6.0.0",
|
|
16
|
+
"@onecx/accelerator": "^6.0.0",
|
|
17
|
+
"@onecx/angular-integration-interface": "^6.0.0",
|
|
18
|
+
"@onecx/angular-remote-components": "^6.0.0",
|
|
19
|
+
"@onecx/angular-testing": "^6.0.0",
|
|
20
|
+
"@onecx/angular-utils": "^6.0.0",
|
|
21
21
|
"chart.js": "^4.4.3",
|
|
22
22
|
"d3-scale-chromatic": "^3.1.0",
|
|
23
23
|
"rxjs": "~7.8.1",
|
|
24
24
|
"primeng": "^19.0.0",
|
|
25
25
|
"@storybook/angular": "^8.3.2",
|
|
26
|
-
"@nx/devkit": "^20.3.0"
|
|
26
|
+
"@nx/devkit": "^20.3.0",
|
|
27
|
+
"@onecx/nx-migration-utils": "^6.0.0"
|
|
27
28
|
},
|
|
28
29
|
"dependencies": {
|
|
29
30
|
"tslib": "^2.3.0"
|
|
@@ -2,5 +2,5 @@ import { ComponentHarness } from '@angular/cdk/testing';
|
|
|
2
2
|
import { PSelectHarness } from '@onecx/angular-testing';
|
|
3
3
|
export declare class ColumnGroupSelectionHarness extends ComponentHarness {
|
|
4
4
|
static hostSelector: string;
|
|
5
|
-
getPSelect:
|
|
5
|
+
getPSelect: () => Promise<PSelectHarness>;
|
|
6
6
|
}
|
|
@@ -2,12 +2,12 @@ import { ContentContainerComponentHarness } from '@angular/cdk/testing';
|
|
|
2
2
|
import { PDialogHarness, PPicklistHarness, PButtonHarness } from '@onecx/angular-testing';
|
|
3
3
|
export declare class CustomGroupColumnSelectorHarness extends ContentContainerComponentHarness {
|
|
4
4
|
static hostSelector: string;
|
|
5
|
-
getCustomGroupColumnSelectorButton:
|
|
6
|
-
getDialog:
|
|
7
|
-
getCancelButton:
|
|
8
|
-
getSaveButton:
|
|
9
|
-
getPicklist:
|
|
10
|
-
getSelectButtons:
|
|
5
|
+
getCustomGroupColumnSelectorButton: () => Promise<PButtonHarness>;
|
|
6
|
+
getDialog: () => Promise<PDialogHarness>;
|
|
7
|
+
getCancelButton: () => Promise<PButtonHarness>;
|
|
8
|
+
getSaveButton: () => Promise<PButtonHarness>;
|
|
9
|
+
getPicklist: () => Promise<PPicklistHarness>;
|
|
10
|
+
getSelectButtons: () => Promise<import("@onecx/angular-testing").TestElement | null>;
|
|
11
11
|
getFrozenActionColumnSelectButton(): Promise<import("@onecx/angular-testing").TestElement[]>;
|
|
12
12
|
getActionColumnPositionSelectButtons(): Promise<import("@onecx/angular-testing").TestElement[]>;
|
|
13
13
|
openCustomGroupColumnSelectorDialog(): Promise<void>;
|
|
@@ -2,9 +2,9 @@ import { ContentContainerComponentHarness } from '@angular/cdk/testing';
|
|
|
2
2
|
import { PToggleButtonHarness } from '@onecx/angular-testing';
|
|
3
3
|
export declare class DataLayoutSelectionHarness extends ContentContainerComponentHarness {
|
|
4
4
|
static hostSelector: string;
|
|
5
|
-
getListLayoutSelectionToggleButton:
|
|
6
|
-
getGridLayoutSelectionToggleButton:
|
|
7
|
-
getTableLayoutSelectionToggleButton:
|
|
5
|
+
getListLayoutSelectionToggleButton: () => Promise<PToggleButtonHarness>;
|
|
6
|
+
getGridLayoutSelectionToggleButton: () => Promise<PToggleButtonHarness>;
|
|
7
|
+
getTableLayoutSelectionToggleButton: () => Promise<PToggleButtonHarness>;
|
|
8
8
|
getCurrentLayout(): Promise<string | null>;
|
|
9
9
|
selectListLayout(): Promise<void>;
|
|
10
10
|
selectGridLayout(): Promise<void>;
|
|
@@ -4,9 +4,9 @@ import { DefaultGridItemHarness } from './default-grid-item.harness';
|
|
|
4
4
|
import { DefaultListItemHarness } from './default-list-item.harness';
|
|
5
5
|
export declare class DataListGridHarness extends ContentContainerComponentHarness {
|
|
6
6
|
static hostSelector: string;
|
|
7
|
-
getDefaultGridItems:
|
|
8
|
-
getPaginator:
|
|
9
|
-
getMenuButton:
|
|
7
|
+
getDefaultGridItems: () => Promise<DefaultGridItemHarness[]>;
|
|
8
|
+
getPaginator: () => Promise<PPaginatorHarness>;
|
|
9
|
+
getMenuButton: () => Promise<TestElement>;
|
|
10
10
|
getDefaultListItems(): Promise<DefaultListItemHarness[]>;
|
|
11
11
|
getActionButtons(actionButtonType: 'list' | 'grid' | 'grid-hidden'): Promise<TestElement[]>;
|
|
12
12
|
actionButtonIsDisabled(actionButton: TestElement, viewType: 'list' | 'grid'): Promise<boolean>;
|
|
@@ -6,9 +6,9 @@ export interface DataTableHarnessFilters extends BaseHarnessFilters {
|
|
|
6
6
|
export declare class DataTableHarness extends ContentContainerComponentHarness {
|
|
7
7
|
static hostSelector: string;
|
|
8
8
|
static with(options: DataTableHarnessFilters): HarnessPredicate<DataTableHarness>;
|
|
9
|
-
getHeaderColumns:
|
|
10
|
-
getRows:
|
|
11
|
-
getPaginator:
|
|
9
|
+
getHeaderColumns: () => Promise<TableHeaderColumnHarness[]>;
|
|
10
|
+
getRows: () => Promise<TableRowHarness[]>;
|
|
11
|
+
getPaginator: () => Promise<PPaginatorHarness>;
|
|
12
12
|
getId(): Promise<string | null>;
|
|
13
13
|
rowSelectionIsEnabled(): Promise<boolean>;
|
|
14
14
|
getHarnessesForCheckboxes(type: 'all' | 'checked' | 'unchecked'): Promise<PTableCheckboxHarness[]>;
|
|
@@ -3,6 +3,6 @@ import { DataListGridHarness } from './data-list-grid.harness';
|
|
|
3
3
|
import { DataTableHarness } from './data-table.harness';
|
|
4
4
|
export declare class DataViewHarness extends ContentContainerComponentHarness {
|
|
5
5
|
static hostSelector: string;
|
|
6
|
-
getDataTable:
|
|
7
|
-
getDataListGrid:
|
|
6
|
+
getDataTable: () => Promise<DataTableHarness | null>;
|
|
7
|
+
getDataListGrid: () => Promise<DataListGridHarness | null>;
|
|
8
8
|
}
|
|
@@ -3,7 +3,7 @@ import { DivHarness } from '@onecx/angular-testing';
|
|
|
3
3
|
import { MoreActionsMenuButtonHarness } from './more-actions-menu-button.harness';
|
|
4
4
|
export declare class DefaultGridItemHarness extends ComponentHarness {
|
|
5
5
|
static hostSelector: string;
|
|
6
|
-
getMoreActionsButton:
|
|
6
|
+
getMoreActionsButton: () => Promise<MoreActionsMenuButtonHarness>;
|
|
7
7
|
private getAllDivs;
|
|
8
8
|
private getGridImg;
|
|
9
9
|
getData(): Promise<(string | null)[]>;
|
|
@@ -2,10 +2,10 @@ import { ComponentHarness } from '@angular/cdk/testing';
|
|
|
2
2
|
import { ButtonHarness, DivHarness } from '@onecx/angular-testing';
|
|
3
3
|
export declare class DefaultListItemHarness extends ComponentHarness {
|
|
4
4
|
static hostSelector: string;
|
|
5
|
-
getAllActionButtons:
|
|
6
|
-
getViewButton:
|
|
7
|
-
getEditButton:
|
|
8
|
-
getDeleteButton:
|
|
5
|
+
getAllActionButtons: () => Promise<import("@onecx/angular-testing").TestElement[]>;
|
|
6
|
+
getViewButton: () => Promise<ButtonHarness | null>;
|
|
7
|
+
getEditButton: () => Promise<ButtonHarness | null>;
|
|
8
|
+
getDeleteButton: () => Promise<ButtonHarness | null>;
|
|
9
9
|
private getAllDivs;
|
|
10
10
|
getData(): Promise<string[]>;
|
|
11
11
|
checkDivsHasClasses(value: DivHarness): Promise<boolean>;
|
|
@@ -2,7 +2,7 @@ import { ComponentHarness } from '@angular/cdk/testing';
|
|
|
2
2
|
import { PChartHarness } from '@onecx/angular-testing';
|
|
3
3
|
export declare class DiagramHarness extends ComponentHarness {
|
|
4
4
|
static hostSelector: string;
|
|
5
|
-
getChart:
|
|
5
|
+
getChart: () => Promise<PChartHarness>;
|
|
6
6
|
getTotalNumberOfResults(): Promise<number | undefined>;
|
|
7
7
|
getSumLabel(): Promise<string | undefined>;
|
|
8
8
|
getDiagramTypeSelectButton(): Promise<import("@onecx/angular-testing").TestElement | null>;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { ContentContainerComponentHarness } from '@onecx/angular-testing';
|
|
2
|
+
import { DialogMessageContentHarness } from './dialog-message-content.harness';
|
|
3
|
+
export declare class DialogContentHarness extends ContentContainerComponentHarness {
|
|
4
|
+
static hostSelector: string;
|
|
5
|
+
getDialogMessageContent: () => Promise<DialogMessageContentHarness | null>;
|
|
6
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ContentContainerComponentHarness, PButtonDirectiveHarness } from '@onecx/angular-testing';
|
|
2
|
+
export declare class DialogFooterHarness extends ContentContainerComponentHarness {
|
|
3
|
+
static hostSelector: string;
|
|
4
|
+
getPrimaryButton: () => Promise<PButtonDirectiveHarness>;
|
|
5
|
+
getSecondaryButton: () => Promise<PButtonDirectiveHarness | null>;
|
|
6
|
+
clickPrimaryButton(): Promise<void>;
|
|
7
|
+
clickSecondaryButton(): Promise<void>;
|
|
8
|
+
getPrimaryButtonLabel(): Promise<string | null>;
|
|
9
|
+
getPrimaryButtonIcon(): Promise<string | null>;
|
|
10
|
+
getSecondaryButtonLabel(): Promise<string | null | undefined>;
|
|
11
|
+
getSecondaryButtonIcon(): Promise<string | null | undefined>;
|
|
12
|
+
getPrimaryButtonDisabled(): Promise<boolean>;
|
|
13
|
+
getSecondaryButtonDisabled(): Promise<boolean | undefined>;
|
|
14
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ContentContainerComponentHarness } from '@onecx/angular-testing';
|
|
2
|
+
import { DialogContentHarness } from './dialog-content.harness';
|
|
3
|
+
import { DialogFooterHarness } from './dialog-footer.harness';
|
|
4
|
+
export declare class DialogInlineHarness extends ContentContainerComponentHarness {
|
|
5
|
+
static hostSelector: string;
|
|
6
|
+
getDialogContent: () => Promise<DialogContentHarness>;
|
|
7
|
+
getDialogFooter: () => Promise<DialogFooterHarness>;
|
|
8
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ComponentHarness } from '@angular/cdk/testing';
|
|
2
|
+
export declare class DialogMessageContentHarness extends ComponentHarness {
|
|
3
|
+
static hostSelector: string;
|
|
4
|
+
private getMessageSpan;
|
|
5
|
+
private getIcon;
|
|
6
|
+
getMessageContent(): Promise<string>;
|
|
7
|
+
getIconValue(): Promise<string | null | undefined>;
|
|
8
|
+
}
|