@bravura/ui 6.1.0 → 7.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/CHANGELOG.md +11 -1
- package/README.md +58 -57
- package/alert/index.d.ts +126 -3
- package/alert/testing/index.d.ts +28 -5
- package/behavior/index.d.ts +231 -3
- package/clip-note/index.d.ts +125 -3
- package/common/index.d.ts +24 -3
- package/currency-input/index.d.ts +69 -3
- package/decimal-input/index.d.ts +39 -3
- package/discrete-input/index.d.ts +139 -3
- package/fesm2022/bravura-ui-alert.mjs +18 -21
- package/fesm2022/bravura-ui-alert.mjs.map +1 -1
- package/fesm2022/bravura-ui-behavior.mjs +18 -18
- package/fesm2022/bravura-ui-behavior.mjs.map +1 -1
- package/fesm2022/bravura-ui-clip-note.mjs +10 -10
- package/fesm2022/bravura-ui-clip-note.mjs.map +1 -1
- package/fesm2022/bravura-ui-common.mjs +5 -6
- package/fesm2022/bravura-ui-common.mjs.map +1 -1
- package/fesm2022/bravura-ui-currency-input.mjs +7 -7
- package/fesm2022/bravura-ui-currency-input.mjs.map +1 -1
- package/fesm2022/bravura-ui-decimal-input.mjs +7 -7
- package/fesm2022/bravura-ui-decimal-input.mjs.map +1 -1
- package/fesm2022/bravura-ui-discrete-input.mjs +10 -11
- package/fesm2022/bravura-ui-discrete-input.mjs.map +1 -1
- package/fesm2022/bravura-ui-file-upload.mjs +18 -18
- package/fesm2022/bravura-ui-file-upload.mjs.map +1 -1
- package/fesm2022/bravura-ui-form-field.mjs +10 -10
- package/fesm2022/bravura-ui-form-field.mjs.map +1 -1
- package/fesm2022/bravura-ui-icon-font.mjs +7 -7
- package/fesm2022/bravura-ui-icon-font.mjs.map +1 -1
- package/fesm2022/bravura-ui-panel.mjs +16 -16
- package/fesm2022/bravura-ui-panel.mjs.map +1 -1
- package/fesm2022/bravura-ui-phone-number.mjs +13 -13
- package/fesm2022/bravura-ui-phone-number.mjs.map +1 -1
- package/fesm2022/bravura-ui-radio-panel.mjs +12 -14
- package/fesm2022/bravura-ui-radio-panel.mjs.map +1 -1
- package/fesm2022/bravura-ui-selection-panel.mjs +11 -11
- package/fesm2022/bravura-ui-selection-panel.mjs.map +1 -1
- package/fesm2022/bravura-ui-skeletons.mjs +10 -10
- package/fesm2022/bravura-ui-skeletons.mjs.map +1 -1
- package/fesm2022/bravura-ui-stepper.mjs +18 -18
- package/fesm2022/bravura-ui-stepper.mjs.map +1 -1
- package/fesm2022/bravura-ui-tooltip.mjs +13 -13
- package/fesm2022/bravura-ui-tooltip.mjs.map +1 -1
- package/file-upload/index.d.ts +200 -3
- package/form-field/index.d.ts +49 -3
- package/icon-font/index.d.ts +79 -3
- package/index.d.ts +3 -5
- package/package.json +24 -24
- package/panel/index.d.ts +107 -3
- package/phone-number/index.d.ts +108 -3
- package/radio-panel/index.d.ts +71 -3
- package/radio-panel/testing/index.d.ts +32 -5
- package/selection-panel/index.d.ts +149 -3
- package/skeletons/index.d.ts +79 -3
- package/stepper/index.d.ts +106 -3
- package/tooltip/index.d.ts +83 -3
- package/alert/alert-container.component.d.ts +0 -71
- package/alert/alert-message.component.d.ts +0 -47
- package/alert/alert.module.d.ts +0 -14
- package/alert/public-api.d.ts +0 -1
- package/alert/testing/test-api.d.ts +0 -24
- package/behavior/await.directive.d.ts +0 -71
- package/behavior/behavior.module.d.ts +0 -17
- package/behavior/observe-content-class.directive.d.ts +0 -29
- package/behavior/public-api.d.ts +0 -5
- package/behavior/sizing-monitor.directive.d.ts +0 -23
- package/behavior/sizing.directive.d.ts +0 -98
- package/clip-note/clip-note.component.d.ts +0 -45
- package/clip-note/clip-note.directive.d.ts +0 -69
- package/clip-note/clip-note.module.d.ts +0 -19
- package/clip-note/public-api.d.ts +0 -1
- package/common/common-utils.d.ts +0 -11
- package/common/common.module.d.ts +0 -11
- package/common/public-api.d.ts +0 -2
- package/currency-input/currency-input.directive.d.ts +0 -62
- package/currency-input/currency-input.module.d.ts +0 -10
- package/currency-input/public-api.d.ts +0 -1
- package/decimal-input/decimal-input.directive.d.ts +0 -32
- package/decimal-input/decimal-input.module.d.ts +0 -10
- package/decimal-input/public-api.d.ts +0 -1
- package/discrete-input/discrete-input.component.d.ts +0 -128
- package/discrete-input/discrete-input.module.d.ts +0 -11
- package/discrete-input/public-api.d.ts +0 -2
- package/file-upload/file-upload.component.d.ts +0 -148
- package/file-upload/file-upload.module.d.ts +0 -14
- package/file-upload/file-upload.service.d.ts +0 -42
- package/file-upload/public-api.d.ts +0 -6
- package/form-field/form-field.component.d.ts +0 -39
- package/form-field/form-field.module.d.ts +0 -13
- package/form-field/public-api.d.ts +0 -2
- package/icon-font/icon-font.module.d.ts +0 -12
- package/icon-font/icon.directive.d.ts +0 -46
- package/icon-font/public-api.d.ts +0 -3
- package/icon-font/utilities.d.ts +0 -20
- package/panel/panel-section.component.d.ts +0 -15
- package/panel/panel.component.d.ts +0 -60
- package/panel/panel.module.d.ts +0 -16
- package/panel/public-api.d.ts +0 -1
- package/panel/tinted.directive.d.ts +0 -26
- package/phone-number/phone-number.directive.d.ts +0 -66
- package/phone-number/phone-number.module.d.ts +0 -17
- package/phone-number/phone-number.pipe.d.ts +0 -13
- package/phone-number/phone-number.validator.d.ts +0 -31
- package/phone-number/public-api.d.ts +0 -1
- package/public-api.d.ts +0 -1
- package/radio-panel/public-api.d.ts +0 -3
- package/radio-panel/radio-panel-item.component.d.ts +0 -22
- package/radio-panel/radio-panel.component.d.ts +0 -38
- package/radio-panel/radio-panel.module.d.ts +0 -15
- package/radio-panel/testing/test-api.d.ts +0 -27
- package/selection-panel/public-api.d.ts +0 -3
- package/selection-panel/selection-panel-item.component.d.ts +0 -77
- package/selection-panel/selection-panel.directive.d.ts +0 -67
- package/selection-panel/selection-panel.module.d.ts +0 -13
- package/skeletons/public-api.d.ts +0 -3
- package/skeletons/skeleton-loader-presets.directive.d.ts +0 -23
- package/skeletons/skeleton-loader.component.d.ts +0 -44
- package/skeletons/skeletons.module.d.ts +0 -16
- package/stepper/public-api.d.ts +0 -3
- package/stepper/step-label-top.directive.d.ts +0 -17
- package/stepper/stepper-animation.d.ts +0 -6
- package/stepper/stepper.component.d.ts +0 -75
- package/stepper/stepper.module.d.ts +0 -17
- package/tooltip/public-api.d.ts +0 -3
- package/tooltip/tooltip.component.d.ts +0 -26
- package/tooltip/tooltip.directive.d.ts +0 -48
- package/tooltip/tooltip.module.d.ts +0 -13
package/CHANGELOG.md
CHANGED
|
@@ -1,8 +1,18 @@
|
|
|
1
1
|
# Change history
|
|
2
2
|
|
|
3
|
+
## 7.0.0 (2025-12-30)
|
|
4
|
+
|
|
5
|
+
* fix: published version to angular version ([70668b7](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/70668b7))
|
|
6
|
+
* build: angular upgrade ([475b99e](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/475b99e))
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### BREAKING CHANGE
|
|
10
|
+
|
|
11
|
+
* upgrade angular to 20
|
|
12
|
+
|
|
3
13
|
## 6.1.0 (2025-12-30)
|
|
4
14
|
|
|
5
|
-
|
|
15
|
+
- feat: upgrade angular material to 19 ([b115af0](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/b115af0))
|
|
6
16
|
|
|
7
17
|
## <small>6.0.1 (2025-12-30)</small>
|
|
8
18
|
|
package/README.md
CHANGED
|
@@ -1,57 +1,58 @@
|
|
|
1
|
-
# Bravura UI Components for Angular applications
|
|
2
|
-
|
|
3
|
-
This package contains a set of UI components built on top of [Angular Material library and Component Development Kit](https://material.angular.io/). It supplements Angular Material in implementing Bravura UX Design System, which is an extension of the latest [Material Design Specification](https://material.io/design).
|
|
4
|
-
|
|
5
|
-
[Storybook on Chromatic](https://master--66d58f6d169fef41a850c874.chromatic.com)
|
|
6
|
-
|
|
7
|
-
## Angular version compatibility
|
|
8
|
-
|
|
9
|
-
| BUI versions | Compatible Angular versions |
|
|
10
|
-
| ------------ | --------------------------- |
|
|
11
|
-
| ^
|
|
12
|
-
| ^
|
|
13
|
-
| ^
|
|
14
|
-
| ^
|
|
15
|
-
| ^
|
|
16
|
-
| ^
|
|
17
|
-
| 1
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
@
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
1
|
+
# Bravura UI Components for Angular applications
|
|
2
|
+
|
|
3
|
+
This package contains a set of UI components built on top of [Angular Material library and Component Development Kit](https://material.angular.io/). It supplements Angular Material in implementing Bravura UX Design System, which is an extension of the latest [Material Design Specification](https://material.io/design).
|
|
4
|
+
|
|
5
|
+
[Storybook on Chromatic](https://master--66d58f6d169fef41a850c874.chromatic.com)
|
|
6
|
+
|
|
7
|
+
## Angular version compatibility
|
|
8
|
+
|
|
9
|
+
| BUI versions | Compatible Angular versions |
|
|
10
|
+
| ------------ | --------------------------- |
|
|
11
|
+
| ^7.0.0 | 20 |
|
|
12
|
+
| ^6.0.0 | 19 |
|
|
13
|
+
| ^5.0.0 | 18 |
|
|
14
|
+
| ^4.0.0 | 17 |
|
|
15
|
+
| ^3.0.0 | 15, 16 |
|
|
16
|
+
| ^2.0.0 | 14 |
|
|
17
|
+
| ^1.15.x | 12, 13 |
|
|
18
|
+
| 1 .. 1.14.x | 12 |
|
|
19
|
+
|
|
20
|
+
### MDC-based releases
|
|
21
|
+
|
|
22
|
+
From version 3.0 onward, the package `@bravura/ui` is only compatible with `@angular/components` 15.1 and up, which is based on the Offical Material Design Components for web. Please refer to [this document](https://material.angular.io/guide/mdc-migration) for more information.
|
|
23
|
+
|
|
24
|
+
To continue to use `@bravura/ui` at the latest version in your Angular projects, you must upgrade both Angular and Angular Material packages to version 15 or later. You must also you run the migration tool to switch from the legacy component implementations to the new MDC-based ones. The legacy components from `@angular/components` are no longer supported.
|
|
25
|
+
|
|
26
|
+
## Setup
|
|
27
|
+
|
|
28
|
+
Install the package in your Angular project by using one of the commands below, according to the package manager chosen.
|
|
29
|
+
|
|
30
|
+
NPM:
|
|
31
|
+
|
|
32
|
+
```
|
|
33
|
+
npm install --save @bravura/ui
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
Yarn:
|
|
37
|
+
|
|
38
|
+
```
|
|
39
|
+
yarn add @bravura/ui
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
Import the `NgModule` from one of the sub-packages where the component is provided. For example:
|
|
43
|
+
|
|
44
|
+
```typescript
|
|
45
|
+
@import {RadioPanelModule} from '@bravura/ui/radio-panel'
|
|
46
|
+
@NgModule({
|
|
47
|
+
declarations: [MyComponent],
|
|
48
|
+
imports: [RadioPanelModule]
|
|
49
|
+
})
|
|
50
|
+
export class MyModule {}
|
|
51
|
+
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
## Theming
|
|
55
|
+
|
|
56
|
+
To incorporate components' theming with Angular Material, you need to configure a custom theme, following the [theming guide on the Angular Material document site](https://material.angular.io/guide/theming#custom-themes-with-sass). In the global style SASS partial where the Material theme is configured, add the BUI theme mixin reference to activate theming.
|
|
57
|
+
|
|
58
|
+
You may also need to include the CSS of custom font definitions for [Material Icon Font](https://fonts.google.com/icons) into the global stylesheets.
|
package/alert/index.d.ts
CHANGED
|
@@ -1,5 +1,128 @@
|
|
|
1
|
+
import { AnimationEvent } from '@angular/animations';
|
|
2
|
+
import { ScrollDispatcher } from '@angular/cdk/scrolling';
|
|
3
|
+
import * as i0 from '@angular/core';
|
|
4
|
+
import { OnInit, OnDestroy, NgZone, ChangeDetectorRef, ElementRef, EventEmitter } from '@angular/core';
|
|
5
|
+
import { Subject } from 'rxjs';
|
|
6
|
+
import * as i3 from '@angular/common';
|
|
7
|
+
import * as i4 from '@bravura/ui/icon-font';
|
|
8
|
+
import * as i5 from '@angular/material/button';
|
|
9
|
+
|
|
10
|
+
/**@internal */
|
|
11
|
+
declare class InternalAlertOject {
|
|
12
|
+
readonly type: 'success' | 'info' | 'warn' | 'error';
|
|
13
|
+
readonly message: string;
|
|
14
|
+
id: string;
|
|
15
|
+
deleted: boolean;
|
|
16
|
+
constructor(type: 'success' | 'info' | 'warn' | 'error', message: string);
|
|
17
|
+
}
|
|
1
18
|
/**
|
|
2
|
-
*
|
|
19
|
+
* Use this component in a designated area of a page for displaying notification messages
|
|
20
|
+
*
|
|
3
21
|
*/
|
|
4
|
-
|
|
5
|
-
|
|
22
|
+
declare class AlertContainerComponent implements OnInit, OnDestroy {
|
|
23
|
+
private zone;
|
|
24
|
+
private cdRef;
|
|
25
|
+
private _elementRef;
|
|
26
|
+
private scroll;
|
|
27
|
+
/** The maximum number of messages displayed in the container area. */
|
|
28
|
+
max: number;
|
|
29
|
+
/**
|
|
30
|
+
* This property determines the behavior for displaying the notifications when the container is outside the viewport.
|
|
31
|
+
*
|
|
32
|
+
* `scroll`: The component will try to scroll to reveal the new notifications.
|
|
33
|
+
* `float`: The component will float the alert panel to the center of the screen for a couple of seconds and move it back to the original position.
|
|
34
|
+
*/
|
|
35
|
+
outsideViewportBehavior: 'scroll' | 'float';
|
|
36
|
+
/**
|
|
37
|
+
* The number of milliseconds for which the alert container will be floated when new notification arrives.
|
|
38
|
+
*
|
|
39
|
+
* This will only take effect when `outsideViewportBehavior` is set to `float` and the container is outside the viewport.
|
|
40
|
+
*/
|
|
41
|
+
floatDuration: number;
|
|
42
|
+
/**@internal */
|
|
43
|
+
_alerts: InternalAlertOject[];
|
|
44
|
+
/**@internal */
|
|
45
|
+
_floated: boolean;
|
|
46
|
+
/**@internal */
|
|
47
|
+
_floatPanelHidden: boolean;
|
|
48
|
+
/** @ignore Emits whenever the animation is started. */
|
|
49
|
+
readonly _animationStarted: Subject<AnimationEvent>;
|
|
50
|
+
/** @ignore Emits whenever the animation is done. */
|
|
51
|
+
readonly _animationEnded: Subject<AnimationEvent>;
|
|
52
|
+
private _destroyed$;
|
|
53
|
+
private _endFloatingSub?;
|
|
54
|
+
/** Emits the component instance after initialisation. */
|
|
55
|
+
private init;
|
|
56
|
+
constructor(zone: NgZone, cdRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>, scroll: ScrollDispatcher);
|
|
57
|
+
ngOnInit(): void;
|
|
58
|
+
ngOnDestroy(): void;
|
|
59
|
+
/**@internal */
|
|
60
|
+
get _remaining(): InternalAlertOject[];
|
|
61
|
+
/**@internal */
|
|
62
|
+
get _width(): number;
|
|
63
|
+
/** Add a message to the notification area */
|
|
64
|
+
notify(type: 'success' | 'info' | 'warn' | 'error', message: string): Promise<void>;
|
|
65
|
+
/**@ignore */
|
|
66
|
+
_checkViewport(): Promise<void>;
|
|
67
|
+
/**@ignore */
|
|
68
|
+
_dismiss(a: InternalAlertOject): Promise<void>;
|
|
69
|
+
/** Remove all messages currently displayed. */
|
|
70
|
+
clear(): Promise<void>;
|
|
71
|
+
private _endFloating;
|
|
72
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<AlertContainerComponent, never>;
|
|
73
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<AlertContainerComponent, "bui-alert-container", never, { "max": { "alias": "max"; "required": false; }; "outsideViewportBehavior": { "alias": "outsideViewportBehavior"; "required": false; }; "floatDuration": { "alias": "floatDuration"; "required": false; }; }, { "init": "init"; }, never, never, false, never>;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/**
|
|
77
|
+
* An alert style message usually appears in a global notification area.
|
|
78
|
+
*
|
|
79
|
+
* The base color of the message is determined by the `type` of the message and a list of predefined
|
|
80
|
+
* CSS custom properties.
|
|
81
|
+
*
|
|
82
|
+
* ```scss
|
|
83
|
+
* --bui-color-success: #519602;
|
|
84
|
+
* --bui-color-info: #0dcaf0;
|
|
85
|
+
* --bui-color-warning: #ffc107;
|
|
86
|
+
* --bui-color-error: #dc3545;
|
|
87
|
+
* ```
|
|
88
|
+
*
|
|
89
|
+
*
|
|
90
|
+
*/
|
|
91
|
+
declare class AlertMessageComponent implements OnInit {
|
|
92
|
+
/** @ignore */
|
|
93
|
+
static ngAcceptInputType_dismissible: boolean | string | null | undefined;
|
|
94
|
+
/** @ignore */
|
|
95
|
+
static ngAcceptInputType_blink: boolean | string | null | undefined;
|
|
96
|
+
/** The type of the message, used to derive the icon and base color. */
|
|
97
|
+
type: 'success' | 'info' | 'warn' | 'error';
|
|
98
|
+
/** The message to be displayed, HTML supported. */
|
|
99
|
+
message: string;
|
|
100
|
+
/** Specifies the ARIA live region politeness. */
|
|
101
|
+
politeness: 'off' | 'polite' | 'assertive';
|
|
102
|
+
/** Whether to display the button to fire the `dismissed` event. */
|
|
103
|
+
get dismissible(): any;
|
|
104
|
+
set dismissible(value: any);
|
|
105
|
+
/** To be emitted when the user choose to dismiss the message. The event object is the ID of the element. */
|
|
106
|
+
dismissed: EventEmitter<string>;
|
|
107
|
+
/** To be emitted when the component finishes initialisation. The event object is the ID of the element. */
|
|
108
|
+
initialised: EventEmitter<string>;
|
|
109
|
+
/** @ignore */
|
|
110
|
+
_id: string;
|
|
111
|
+
private _dismissible;
|
|
112
|
+
constructor();
|
|
113
|
+
ngOnInit(): void;
|
|
114
|
+
/** @ignore */
|
|
115
|
+
get iconName(): string;
|
|
116
|
+
/** @ignore */
|
|
117
|
+
_dismiss(): void;
|
|
118
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<AlertMessageComponent, never>;
|
|
119
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<AlertMessageComponent, "bui-alert", never, { "type": { "alias": "type"; "required": false; }; "message": { "alias": "message"; "required": false; }; "politeness": { "alias": "politeness"; "required": false; }; "dismissible": { "alias": "dismissible"; "required": false; }; "_id": { "alias": "id"; "required": false; }; }, { "dismissed": "dismissed"; "initialised": "initialised"; }, never, ["*"], false, never>;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
declare class AlertModule {
|
|
123
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<AlertModule, never>;
|
|
124
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<AlertModule, [typeof AlertMessageComponent, typeof AlertContainerComponent], [typeof i3.CommonModule, typeof i4.IconFontModule, typeof i5.MatButtonModule], [typeof AlertMessageComponent, typeof AlertContainerComponent]>;
|
|
125
|
+
static ɵinj: i0.ɵɵInjectorDeclaration<AlertModule>;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
export { AlertContainerComponent, AlertMessageComponent, AlertModule };
|
package/alert/testing/index.d.ts
CHANGED
|
@@ -1,5 +1,28 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import { BaseHarnessFilters, ComponentHarness, ComponentHarnessConstructor, HarnessPredicate, TextOptions } from '@angular/cdk/testing';
|
|
2
|
+
|
|
3
|
+
interface AlertMessageHarnessFilters extends BaseHarnessFilters {
|
|
4
|
+
/** only select the alert with the content matching this regular expression */
|
|
5
|
+
content?: RegExp;
|
|
6
|
+
}
|
|
7
|
+
declare class AlertMessageHarness extends ComponentHarness {
|
|
8
|
+
static hostSelector: string;
|
|
9
|
+
private _getBackdrop;
|
|
10
|
+
private _getDeleteButton;
|
|
11
|
+
private _getContentDiv;
|
|
12
|
+
static with<T extends AlertMessageHarness>(this: ComponentHarnessConstructor<T>, options?: AlertMessageHarnessFilters): HarnessPredicate<T>;
|
|
13
|
+
getColor(): Promise<string>;
|
|
14
|
+
delete(): Promise<void>;
|
|
15
|
+
getContent(options?: TextOptions): Promise<string>;
|
|
16
|
+
private static filterByContent;
|
|
17
|
+
}
|
|
18
|
+
declare class AlertContainerHarness extends ComponentHarness {
|
|
19
|
+
static hostSelector: string;
|
|
20
|
+
private _items;
|
|
21
|
+
private _floatingFrame;
|
|
22
|
+
getAlertItem(content: RegExp): Promise<AlertMessageHarness | null>;
|
|
23
|
+
countAlertItems(): Promise<number>;
|
|
24
|
+
isFloated(): Promise<boolean>;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
export { AlertContainerHarness, AlertMessageHarness };
|
|
28
|
+
export type { AlertMessageHarnessFilters };
|
package/behavior/index.d.ts
CHANGED
|
@@ -1,5 +1,233 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { ElementRef, OnChanges, OnDestroy, EventEmitter, NgZone, SimpleChanges, AfterViewInit, DoCheck, ViewContainerRef, OnInit } from '@angular/core';
|
|
3
|
+
import * as i6 from '@angular/material/button';
|
|
4
|
+
import { MatButton, MatIconButton, MatIconAnchor, MatFabButton, MatFabAnchor, MatMiniFabButton, MatMiniFabAnchor } from '@angular/material/button';
|
|
5
|
+
import { Subscription } from 'rxjs';
|
|
6
|
+
import * as i8 from '@angular/cdk/observers';
|
|
7
|
+
import { ContentObserver } from '@angular/cdk/observers';
|
|
8
|
+
import * as i5 from '@angular/common';
|
|
9
|
+
import * as i7 from '@angular/material/progress-spinner';
|
|
10
|
+
|
|
1
11
|
/**
|
|
2
|
-
*
|
|
12
|
+
* Use this directive to designate a target HTML element, based on which the child elements'
|
|
13
|
+
* `[buiSizing]` directives will calculate the sizes.
|
|
14
|
+
*
|
|
15
|
+
* ```html
|
|
16
|
+
* <div [buiSizingMonitor]>
|
|
17
|
+
* <div [buiSizing]="...">
|
|
18
|
+
* </div>
|
|
19
|
+
* <div>
|
|
20
|
+
* <div [buiSizing]="...">
|
|
21
|
+
* </div>
|
|
22
|
+
* </div>
|
|
23
|
+
* <div>
|
|
24
|
+
* ```
|
|
3
25
|
*/
|
|
4
|
-
|
|
5
|
-
|
|
26
|
+
declare class SizingMonitorDirective {
|
|
27
|
+
readonly element: ElementRef<HTMLElement>;
|
|
28
|
+
constructor(element: ElementRef<HTMLElement>);
|
|
29
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SizingMonitorDirective, never>;
|
|
30
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<SizingMonitorDirective, "[buiSizingMonitor]", never, {}, {}, never, never, false, never>;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/**
|
|
34
|
+
* This directive monitors the changes in the width of the `sizingBy` target, and apply specified style
|
|
35
|
+
* classes and/or inline styles to the current element dynamically.
|
|
36
|
+
*
|
|
37
|
+
* In order for the layout engine to efficiently calculate and stabilize the dimensions, the effective style property
|
|
38
|
+
* `box-sizing` of the `sizingBy` target element must be set to `border-box`.
|
|
39
|
+
*
|
|
40
|
+
* The directive uses [ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API)
|
|
41
|
+
* to capture the events of element resizing. Please use a polyfill if you want to support older browsers
|
|
42
|
+
* that do not implement ResizeObserver API.
|
|
43
|
+
*
|
|
44
|
+
* Examples:
|
|
45
|
+
*
|
|
46
|
+
* ```html
|
|
47
|
+
* <div #parentElement>
|
|
48
|
+
* <div [buiSizing]="{'400': 'small', '800': 'medium', '~': 'large'}" [buiSizingBy]="parentElement"></div>
|
|
49
|
+
* <div [buiSizing]="['small', 'medium', 'large']" [buiSizingBy]="'root'"></div>
|
|
50
|
+
* <div [buiSizing]="{'650': 'border-color: #28569', '~': 'bg-muted; border-style: dotted'}" [buiSizingBy]="parentElement"></div>
|
|
51
|
+
* </div>
|
|
52
|
+
* ```
|
|
53
|
+
*/
|
|
54
|
+
declare class SizingDirective implements OnChanges, OnDestroy {
|
|
55
|
+
private _doc;
|
|
56
|
+
private _defaultTarget;
|
|
57
|
+
private _zone;
|
|
58
|
+
/**
|
|
59
|
+
* @ignore
|
|
60
|
+
*/
|
|
61
|
+
static defaultSizingBreakpoints: string[];
|
|
62
|
+
/**
|
|
63
|
+
* Specifies the breakpoint widths and the style classes.
|
|
64
|
+
*
|
|
65
|
+
* The sizing spec `{"400": "small", "800": "medium", "~": "large"}` tells the directive to apply
|
|
66
|
+
* a style class `small` when the width of the monitored target is smaller than 400 pixels,
|
|
67
|
+
* `medium` when the width is between 400 and 800 pixels, and `large` when above.
|
|
68
|
+
*
|
|
69
|
+
* @example {'400': 'small', '800': 'medium', '~': 'large'}
|
|
70
|
+
*/
|
|
71
|
+
buiSizing: string | Array<string> | {
|
|
72
|
+
[key: string]: string;
|
|
73
|
+
};
|
|
74
|
+
/**
|
|
75
|
+
* The alias of `buiSizingBy`.
|
|
76
|
+
* @default 'root'
|
|
77
|
+
* @deprecated
|
|
78
|
+
* @ignore
|
|
79
|
+
*/
|
|
80
|
+
sizingBy: 'root' | 'parent' | HTMLElement;
|
|
81
|
+
/**
|
|
82
|
+
* Designate an element to be monitored for recalculating the style classes of the current element.
|
|
83
|
+
*
|
|
84
|
+
* - `root` specifies the document root or the enclosing shadow host. This is the default value.
|
|
85
|
+
* - `parent` specifies the parent element.
|
|
86
|
+
*
|
|
87
|
+
* @default 'root'
|
|
88
|
+
* @alias sizingBy
|
|
89
|
+
*/
|
|
90
|
+
get buiSizingBy(): 'root' | 'parent' | HTMLElement;
|
|
91
|
+
set buiSizingBy(target: 'root' | 'parent' | HTMLElement);
|
|
92
|
+
/**
|
|
93
|
+
* Emits `{width, height}` when the monitor target element resizes.
|
|
94
|
+
*
|
|
95
|
+
* Note that the dimensions emitted are of the [sizingBy] target, but not the current element.
|
|
96
|
+
*/
|
|
97
|
+
buiResized: EventEmitter<{
|
|
98
|
+
width: number;
|
|
99
|
+
height: number;
|
|
100
|
+
}>;
|
|
101
|
+
/**
|
|
102
|
+
* Recalculate the height of this element according to the height of the monitored target.
|
|
103
|
+
*/
|
|
104
|
+
buiFixedHeight: boolean;
|
|
105
|
+
private _monitorTarget;
|
|
106
|
+
private _observer;
|
|
107
|
+
private _sizingSpec;
|
|
108
|
+
private _width;
|
|
109
|
+
private _height;
|
|
110
|
+
private _reflowFrameCount;
|
|
111
|
+
private _element;
|
|
112
|
+
private _frameHandlerId;
|
|
113
|
+
constructor(_doc: Document, _defaultTarget: SizingMonitorDirective, elemRef: ElementRef<HTMLElement>, _zone: NgZone);
|
|
114
|
+
ngOnChanges(_: SimpleChanges): void;
|
|
115
|
+
ngOnDestroy(): void;
|
|
116
|
+
private _initOrReset;
|
|
117
|
+
private _setUpNodeMonitor;
|
|
118
|
+
private _tearDownNodeMonitor;
|
|
119
|
+
private _runWithObserver;
|
|
120
|
+
private _calculateSize;
|
|
121
|
+
private _applyClassesOrStyles;
|
|
122
|
+
private _removeClassesOrStyles;
|
|
123
|
+
private _reflowHeight;
|
|
124
|
+
private _toNumber;
|
|
125
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SizingDirective, [null, { optional: true; }, null, null]>;
|
|
126
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<SizingDirective, "[buiSizing],[buiResized],[buiSizingBy],[buiFixedHeight]", never, { "buiSizing": { "alias": "buiSizing"; "required": false; }; "sizingBy": { "alias": "sizingBy"; "required": false; }; "buiSizingBy": { "alias": "buiSizingBy"; "required": false; }; "buiFixedHeight": { "alias": "buiFixedHeight"; "required": false; }; }, { "buiResized": "buiResized"; }, never, never, false, never>;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
/**
|
|
130
|
+
* Use this directive on a `MatButton` element to provide an alternative view when an async operation is in progress.
|
|
131
|
+
*
|
|
132
|
+
* For example:
|
|
133
|
+
*
|
|
134
|
+
* ```
|
|
135
|
+
* <button (click)="submit();" [buiAwait]="submitSubscription" buiAwaitAriaLabel="submitting">Submit</button>
|
|
136
|
+
* ```
|
|
137
|
+
*
|
|
138
|
+
* Please refer to [Material Design](https://material.io/components/progress-indicators#circular-progress-indicators)
|
|
139
|
+
* for more details of integrating circular spinner component with action buttons.
|
|
140
|
+
*
|
|
141
|
+
* The operation is considered 'in progress' when the bound property `buiAwait` evaluates to
|
|
142
|
+
*
|
|
143
|
+
* - `true`; or
|
|
144
|
+
* - a `number` within 0 - 100; or
|
|
145
|
+
* - an instance of `rxjs/Subscription` and `buiAwait.closed` is falsy
|
|
146
|
+
*
|
|
147
|
+
* When in progress
|
|
148
|
+
*
|
|
149
|
+
* - the button's caption will be hidden;
|
|
150
|
+
* - a `<mat-progress-spinner>` will be displayed in place of the caption;
|
|
151
|
+
* - the button will be disabled by setting the property `disabled` of the `MatButton` instance.
|
|
152
|
+
*/
|
|
153
|
+
declare class AwaitDirective implements AfterViewInit, DoCheck {
|
|
154
|
+
private readonly _eRef;
|
|
155
|
+
readonly _button: MatButton;
|
|
156
|
+
readonly _iconButton: MatIconButton;
|
|
157
|
+
readonly _iconAnchor: MatIconAnchor;
|
|
158
|
+
readonly _fab: MatFabButton;
|
|
159
|
+
readonly _fabAnchor: MatFabAnchor;
|
|
160
|
+
readonly _miniFab: MatMiniFabButton;
|
|
161
|
+
readonly _miniFabAnchor: MatMiniFabAnchor;
|
|
162
|
+
private readonly doc;
|
|
163
|
+
private _viewCont;
|
|
164
|
+
/**
|
|
165
|
+
* Indicates the `in progress` status of an async operation.
|
|
166
|
+
*
|
|
167
|
+
* The operation is considered 'in progress' when the property evaluates to
|
|
168
|
+
*
|
|
169
|
+
* - `true`; or
|
|
170
|
+
* - a `number` within 0 - 100; or
|
|
171
|
+
* - an instance of `rxjs/Subscription` and `buiAwait.closed` is falsy
|
|
172
|
+
*
|
|
173
|
+
* When it is a number, it represets the progress in percentage term.
|
|
174
|
+
*/
|
|
175
|
+
buiAwait: null | undefined | boolean | Subscription | number;
|
|
176
|
+
/** The ARIA label to be put on the spinner. The default value is `"In progress"`. */
|
|
177
|
+
buiAwaitAriaLabel: string;
|
|
178
|
+
/** The diameter of the in-progress spinner. The default value is `20`. */
|
|
179
|
+
buiAwaitDiameter: number;
|
|
180
|
+
private _overlayEl;
|
|
181
|
+
private _processing;
|
|
182
|
+
private _spinnerRef;
|
|
183
|
+
private _captionWrapper;
|
|
184
|
+
private button;
|
|
185
|
+
constructor(_eRef: ElementRef<HTMLElement>, _button: MatButton, _iconButton: MatIconButton, _iconAnchor: MatIconAnchor, _fab: MatFabButton, _fabAnchor: MatFabAnchor, _miniFab: MatMiniFabButton, _miniFabAnchor: MatMiniFabAnchor, doc: Document, _viewCont: ViewContainerRef);
|
|
186
|
+
/** @ignore */
|
|
187
|
+
ngAfterViewInit(): void;
|
|
188
|
+
/** @ignore */
|
|
189
|
+
ngDoCheck(): void;
|
|
190
|
+
/** @ignore */
|
|
191
|
+
private get _isDeterminate();
|
|
192
|
+
private _statusChanged;
|
|
193
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<AwaitDirective, [null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, null, null]>;
|
|
194
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<AwaitDirective, "[buiAwait]", never, { "buiAwait": { "alias": "buiAwait"; "required": false; }; "buiAwaitAriaLabel": { "alias": "buiAwaitAriaLabel"; "required": false; }; "buiAwaitDiameter": { "alias": "buiAwaitDiameter"; "required": false; }; }, {}, never, never, false, never>;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
/**
|
|
198
|
+
* Use `[bui-class.not-empty]` to specify a style class activated only when the host element has DOM children;
|
|
199
|
+
*
|
|
200
|
+
* use `[bui-class.empty]` for a style class activated when it has no DOM children.
|
|
201
|
+
*
|
|
202
|
+
* Use `[bui-class.no-text]` to specify a style class activated only when the host element has text content;
|
|
203
|
+
*
|
|
204
|
+
* use `[bui-class.has-text]` for a style class activated when it has no text content.
|
|
205
|
+
*/
|
|
206
|
+
declare class ObserveContentClassDirective implements OnDestroy, OnInit {
|
|
207
|
+
private readonly subscription;
|
|
208
|
+
private readonly element;
|
|
209
|
+
private classToRemove;
|
|
210
|
+
private classEmpty?;
|
|
211
|
+
private classNotEmpty?;
|
|
212
|
+
private classNoText?;
|
|
213
|
+
private classHasText?;
|
|
214
|
+
constructor(observer: ContentObserver, elementRef: ElementRef<HTMLElement>);
|
|
215
|
+
ngOnInit(): void;
|
|
216
|
+
ngOnDestroy(): void;
|
|
217
|
+
private checkClass;
|
|
218
|
+
private checkClassWith;
|
|
219
|
+
private addClass;
|
|
220
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ObserveContentClassDirective, never>;
|
|
221
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ObserveContentClassDirective, "[bui-class.empty],[bui-class.not-empty],[bui-class.no-text],[bui-class.has-text]", never, { "classEmpty": { "alias": "bui-class.empty"; "required": false; }; "classNotEmpty": { "alias": "bui-class.not-empty"; "required": false; }; "classNoText": { "alias": "bui-class.no-text"; "required": false; }; "classHasText": { "alias": "bui-class.has-text"; "required": false; }; }, {}, never, never, false, never>;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
/**
|
|
225
|
+
* For functionality that cannot be easily achieved via CSS.
|
|
226
|
+
*/
|
|
227
|
+
declare class BehaviorModule {
|
|
228
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<BehaviorModule, never>;
|
|
229
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<BehaviorModule, [typeof SizingDirective, typeof SizingMonitorDirective, typeof AwaitDirective, typeof ObserveContentClassDirective], [typeof i5.CommonModule, typeof i6.MatButtonModule, typeof i7.MatProgressSpinnerModule, typeof i8.ObserversModule], [typeof SizingDirective, typeof SizingMonitorDirective, typeof AwaitDirective, typeof i7.MatProgressSpinnerModule, typeof ObserveContentClassDirective]>;
|
|
230
|
+
static ɵinj: i0.ɵɵInjectorDeclaration<BehaviorModule>;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
export { AwaitDirective, BehaviorModule, ObserveContentClassDirective, SizingDirective, SizingMonitorDirective };
|