@bravura/ui 5.2.0 → 5.2.1
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 +7 -3
- package/_index.scss +5 -0
- package/m3-theme.scss +155 -0
- package/package.json +19 -19
- package/radio-panel/_radio-panel-theme.scss +11 -0
- package/selection-panel/_selection-panel-theme.scss +33 -0
- package/stepper/_stepper-theme.scss +16 -0
- package/theme/_ui-theme.scss +27 -23
package/CHANGELOG.md
CHANGED
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
# Change history
|
|
2
2
|
|
|
3
|
+
## <small>5.2.1 (2024-10-15)</small>
|
|
4
|
+
|
|
5
|
+
* fix: export sass files and material version check ([eefb2f0](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/eefb2f0))
|
|
6
|
+
|
|
3
7
|
## 5.2.0 (2024-10-14)
|
|
4
8
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
9
|
+
- fix: try node 22 for pipeline build ([50e0335](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/50e0335))
|
|
10
|
+
- fix: update jenkins file ([643a9d0](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/643a9d0))
|
|
11
|
+
- feat: add support for material 3 themes ([6149619](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/6149619))
|
|
8
12
|
|
|
9
13
|
## <small>5.1.1 (2024-09-09)</small>
|
|
10
14
|
|
package/_index.scss
ADDED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
@forward './theme/ui-theme' show theme, all-component-colors;
|
|
2
|
+
@forward './stepper/stepper-theme' as stepper-* show stepper-color, stepper-theme;
|
|
3
|
+
@forward './radio-panel/radio-panel-theme' as radio-panel-* show radio-panel-color, radio-panel-theme;
|
|
4
|
+
@forward './selection-panel/selection-panel-theme' as selection-panel-* show selection-panel-color,
|
|
5
|
+
selection-panel-theme;
|
package/m3-theme.scss
ADDED
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
// This file was generated by running 'ng generate @angular/material:m3-theme'.
|
|
2
|
+
// Proceed with caution if making changes to this file.
|
|
3
|
+
|
|
4
|
+
@use 'sass:map';
|
|
5
|
+
@use '@angular/material' as mat;
|
|
6
|
+
|
|
7
|
+
// Note: Color palettes are generated from primary: #135ac5, secondary: #29bcb0
|
|
8
|
+
$_palettes: (
|
|
9
|
+
primary: (
|
|
10
|
+
0: #000000,
|
|
11
|
+
10: #001944,
|
|
12
|
+
20: #002d6d,
|
|
13
|
+
25: #003783,
|
|
14
|
+
30: #00429a,
|
|
15
|
+
35: #004db1,
|
|
16
|
+
40: #1159c4,
|
|
17
|
+
50: #3973df,
|
|
18
|
+
60: #588dfb,
|
|
19
|
+
70: #84aaff,
|
|
20
|
+
80: #afc6ff,
|
|
21
|
+
90: #d9e2ff,
|
|
22
|
+
95: #edf0ff,
|
|
23
|
+
98: #faf8ff,
|
|
24
|
+
99: #fefbff,
|
|
25
|
+
100: #ffffff
|
|
26
|
+
),
|
|
27
|
+
secondary: (
|
|
28
|
+
0: #000000,
|
|
29
|
+
10: #00201d,
|
|
30
|
+
20: #003733,
|
|
31
|
+
25: #00433e,
|
|
32
|
+
30: #00504a,
|
|
33
|
+
35: #005d56,
|
|
34
|
+
40: #006a63,
|
|
35
|
+
50: #00867c,
|
|
36
|
+
60: #00a297,
|
|
37
|
+
70: #2dbeb2,
|
|
38
|
+
80: #54dace,
|
|
39
|
+
90: #75f7ea,
|
|
40
|
+
95: #b2fff5,
|
|
41
|
+
98: #e4fffa,
|
|
42
|
+
99: #f2fffc,
|
|
43
|
+
100: #ffffff
|
|
44
|
+
),
|
|
45
|
+
tertiary: (
|
|
46
|
+
0: #000000,
|
|
47
|
+
10: #330044,
|
|
48
|
+
20: #54006d,
|
|
49
|
+
25: #620f7c,
|
|
50
|
+
30: #6f2089,
|
|
51
|
+
35: #7c2f96,
|
|
52
|
+
40: #8a3ca3,
|
|
53
|
+
50: #a556be,
|
|
54
|
+
60: #c270da,
|
|
55
|
+
70: #df8bf7,
|
|
56
|
+
80: #f0b0ff,
|
|
57
|
+
90: #fbd7ff,
|
|
58
|
+
95: #ffebff,
|
|
59
|
+
98: #fff7fb,
|
|
60
|
+
99: #fffbff,
|
|
61
|
+
100: #ffffff
|
|
62
|
+
),
|
|
63
|
+
neutral: (
|
|
64
|
+
0: #000000,
|
|
65
|
+
10: #191b22,
|
|
66
|
+
20: #2e3037,
|
|
67
|
+
25: #393b43,
|
|
68
|
+
30: #44464e,
|
|
69
|
+
35: #50525a,
|
|
70
|
+
40: #5c5e66,
|
|
71
|
+
50: #75777f,
|
|
72
|
+
60: #8f9099,
|
|
73
|
+
70: #aaabb4,
|
|
74
|
+
80: #c5c6cf,
|
|
75
|
+
90: #e1e2eb,
|
|
76
|
+
95: #f0f0fa,
|
|
77
|
+
98: #faf8ff,
|
|
78
|
+
99: #fefbff,
|
|
79
|
+
100: #ffffff,
|
|
80
|
+
4: #0c0e14,
|
|
81
|
+
6: #11131a,
|
|
82
|
+
12: #1d1f26,
|
|
83
|
+
17: #282a31,
|
|
84
|
+
22: #32353c,
|
|
85
|
+
24: #373940,
|
|
86
|
+
87: #d9d9e3,
|
|
87
|
+
92: #e7e7f1,
|
|
88
|
+
94: #ededf7,
|
|
89
|
+
96: #f3f3fc
|
|
90
|
+
),
|
|
91
|
+
neutral-variant: (
|
|
92
|
+
0: #000000,
|
|
93
|
+
10: #171b26,
|
|
94
|
+
20: #2c303c,
|
|
95
|
+
25: #373b47,
|
|
96
|
+
30: #424653,
|
|
97
|
+
35: #4e525f,
|
|
98
|
+
40: #5a5e6b,
|
|
99
|
+
50: #737784,
|
|
100
|
+
60: #8c909f,
|
|
101
|
+
70: #a7abba,
|
|
102
|
+
80: #c2c6d5,
|
|
103
|
+
90: #dfe2f2,
|
|
104
|
+
95: #edf0ff,
|
|
105
|
+
98: #faf8ff,
|
|
106
|
+
99: #fefbff,
|
|
107
|
+
100: #ffffff
|
|
108
|
+
),
|
|
109
|
+
error: (
|
|
110
|
+
0: #000000,
|
|
111
|
+
10: #410002,
|
|
112
|
+
20: #690005,
|
|
113
|
+
25: #7e0007,
|
|
114
|
+
30: #93000a,
|
|
115
|
+
35: #a80710,
|
|
116
|
+
40: #ba1a1a,
|
|
117
|
+
50: #de3730,
|
|
118
|
+
60: #ff5449,
|
|
119
|
+
70: #ff897d,
|
|
120
|
+
80: #ffb4ab,
|
|
121
|
+
90: #ffdad6,
|
|
122
|
+
95: #ffedea,
|
|
123
|
+
98: #fff8f7,
|
|
124
|
+
99: #fffbff,
|
|
125
|
+
100: #ffffff
|
|
126
|
+
)
|
|
127
|
+
);
|
|
128
|
+
|
|
129
|
+
$_rest: (
|
|
130
|
+
secondary: map.get($_palettes, secondary),
|
|
131
|
+
neutral: map.get($_palettes, neutral),
|
|
132
|
+
neutral-variant: map.get($_palettes, neutral-variant),
|
|
133
|
+
error: map.get($_palettes, error)
|
|
134
|
+
);
|
|
135
|
+
$_primary: map.merge(map.get($_palettes, primary), $_rest);
|
|
136
|
+
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
|
|
137
|
+
|
|
138
|
+
$light-theme: mat.define-theme(
|
|
139
|
+
(
|
|
140
|
+
color: (
|
|
141
|
+
theme-type: light,
|
|
142
|
+
primary: $_primary,
|
|
143
|
+
tertiary: $_tertiary
|
|
144
|
+
)
|
|
145
|
+
)
|
|
146
|
+
);
|
|
147
|
+
$dark-theme: mat.define-theme(
|
|
148
|
+
(
|
|
149
|
+
color: (
|
|
150
|
+
theme-type: dark,
|
|
151
|
+
primary: $_primary,
|
|
152
|
+
tertiary: $_tertiary
|
|
153
|
+
)
|
|
154
|
+
)
|
|
155
|
+
);
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bravura/ui",
|
|
3
3
|
"description": "Bravura UI Components for Angular applications",
|
|
4
|
-
"version": "5.2.
|
|
4
|
+
"version": "5.2.1",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Angular",
|
|
7
7
|
"Angular Material",
|
|
@@ -45,18 +45,18 @@
|
|
|
45
45
|
"esm": "./esm2022/behavior/bravura-ui-behavior.mjs",
|
|
46
46
|
"default": "./fesm2022/bravura-ui-behavior.mjs"
|
|
47
47
|
},
|
|
48
|
-
"./common": {
|
|
49
|
-
"types": "./common/index.d.ts",
|
|
50
|
-
"esm2022": "./esm2022/common/bravura-ui-common.mjs",
|
|
51
|
-
"esm": "./esm2022/common/bravura-ui-common.mjs",
|
|
52
|
-
"default": "./fesm2022/bravura-ui-common.mjs"
|
|
53
|
-
},
|
|
54
48
|
"./clip-note": {
|
|
55
49
|
"types": "./clip-note/index.d.ts",
|
|
56
50
|
"esm2022": "./esm2022/clip-note/bravura-ui-clip-note.mjs",
|
|
57
51
|
"esm": "./esm2022/clip-note/bravura-ui-clip-note.mjs",
|
|
58
52
|
"default": "./fesm2022/bravura-ui-clip-note.mjs"
|
|
59
53
|
},
|
|
54
|
+
"./common": {
|
|
55
|
+
"types": "./common/index.d.ts",
|
|
56
|
+
"esm2022": "./esm2022/common/bravura-ui-common.mjs",
|
|
57
|
+
"esm": "./esm2022/common/bravura-ui-common.mjs",
|
|
58
|
+
"default": "./fesm2022/bravura-ui-common.mjs"
|
|
59
|
+
},
|
|
60
60
|
"./currency-input": {
|
|
61
61
|
"types": "./currency-input/index.d.ts",
|
|
62
62
|
"esm2022": "./esm2022/currency-input/bravura-ui-currency-input.mjs",
|
|
@@ -75,18 +75,18 @@
|
|
|
75
75
|
"esm": "./esm2022/discrete-input/bravura-ui-discrete-input.mjs",
|
|
76
76
|
"default": "./fesm2022/bravura-ui-discrete-input.mjs"
|
|
77
77
|
},
|
|
78
|
-
"./form-field": {
|
|
79
|
-
"types": "./form-field/index.d.ts",
|
|
80
|
-
"esm2022": "./esm2022/form-field/bravura-ui-form-field.mjs",
|
|
81
|
-
"esm": "./esm2022/form-field/bravura-ui-form-field.mjs",
|
|
82
|
-
"default": "./fesm2022/bravura-ui-form-field.mjs"
|
|
83
|
-
},
|
|
84
78
|
"./file-upload": {
|
|
85
79
|
"types": "./file-upload/index.d.ts",
|
|
86
80
|
"esm2022": "./esm2022/file-upload/bravura-ui-file-upload.mjs",
|
|
87
81
|
"esm": "./esm2022/file-upload/bravura-ui-file-upload.mjs",
|
|
88
82
|
"default": "./fesm2022/bravura-ui-file-upload.mjs"
|
|
89
83
|
},
|
|
84
|
+
"./form-field": {
|
|
85
|
+
"types": "./form-field/index.d.ts",
|
|
86
|
+
"esm2022": "./esm2022/form-field/bravura-ui-form-field.mjs",
|
|
87
|
+
"esm": "./esm2022/form-field/bravura-ui-form-field.mjs",
|
|
88
|
+
"default": "./fesm2022/bravura-ui-form-field.mjs"
|
|
89
|
+
},
|
|
90
90
|
"./icon-font": {
|
|
91
91
|
"types": "./icon-font/index.d.ts",
|
|
92
92
|
"esm2022": "./esm2022/icon-font/bravura-ui-icon-font.mjs",
|
|
@@ -105,6 +105,12 @@
|
|
|
105
105
|
"esm": "./esm2022/phone-number/bravura-ui-phone-number.mjs",
|
|
106
106
|
"default": "./fesm2022/bravura-ui-phone-number.mjs"
|
|
107
107
|
},
|
|
108
|
+
"./selection-panel": {
|
|
109
|
+
"types": "./selection-panel/index.d.ts",
|
|
110
|
+
"esm2022": "./esm2022/selection-panel/bravura-ui-selection-panel.mjs",
|
|
111
|
+
"esm": "./esm2022/selection-panel/bravura-ui-selection-panel.mjs",
|
|
112
|
+
"default": "./fesm2022/bravura-ui-selection-panel.mjs"
|
|
113
|
+
},
|
|
108
114
|
"./radio-panel": {
|
|
109
115
|
"types": "./radio-panel/index.d.ts",
|
|
110
116
|
"esm2022": "./esm2022/radio-panel/bravura-ui-radio-panel.mjs",
|
|
@@ -117,12 +123,6 @@
|
|
|
117
123
|
"esm": "./esm2022/skeletons/bravura-ui-skeletons.mjs",
|
|
118
124
|
"default": "./fesm2022/bravura-ui-skeletons.mjs"
|
|
119
125
|
},
|
|
120
|
-
"./selection-panel": {
|
|
121
|
-
"types": "./selection-panel/index.d.ts",
|
|
122
|
-
"esm2022": "./esm2022/selection-panel/bravura-ui-selection-panel.mjs",
|
|
123
|
-
"esm": "./esm2022/selection-panel/bravura-ui-selection-panel.mjs",
|
|
124
|
-
"default": "./fesm2022/bravura-ui-selection-panel.mjs"
|
|
125
|
-
},
|
|
126
126
|
"./stepper": {
|
|
127
127
|
"types": "./stepper/index.d.ts",
|
|
128
128
|
"esm2022": "./esm2022/stepper/bravura-ui-stepper.mjs",
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
@use '@angular/material' as mat;
|
|
2
|
+
@use 'sass:map';
|
|
3
|
+
@use 'sass:meta';
|
|
4
|
+
|
|
5
|
+
@mixin color($theme, $options...) {
|
|
6
|
+
bui-selection-panel-item {
|
|
7
|
+
$option-map: meta.keywords($options);
|
|
8
|
+
$color-variant: map.get($option-map, color-variant);
|
|
9
|
+
|
|
10
|
+
border-color: mat.get-theme-color($theme, outline-variant);
|
|
11
|
+
|
|
12
|
+
.bui-selection-checkbox {
|
|
13
|
+
@if $color-variant {
|
|
14
|
+
@include mat.checkbox-color($theme, $color-variant: $color-variant);
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
&.bui-selection-checked,
|
|
19
|
+
&.bui-selection-checked:not(.bui-disabled:hover, .bui-unselectable) {
|
|
20
|
+
border-color: mat.get-theme-color($theme, $color-variant or primary);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&:not(.bui-disabled, .bui-unselectable) {
|
|
24
|
+
&:hover {
|
|
25
|
+
border-color: mat.get-theme-color($theme, outline);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
@mixin theme($theme, $options...) {
|
|
32
|
+
@include color($theme, $options...);
|
|
33
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
@use '@angular/material' as mat;
|
|
2
|
+
|
|
3
|
+
@mixin color($theme) {
|
|
4
|
+
.bui-step-progress-label {
|
|
5
|
+
color: mat.get-theme-color($theme, on-surface-variant);
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.bui-stepper-content-container {
|
|
9
|
+
border-color: mat.get-theme-color($theme, outline-variant);
|
|
10
|
+
background-color: mat.get-theme-color($theme, surface);
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
@mixin theme($theme) {
|
|
15
|
+
@include color($theme);
|
|
16
|
+
}
|
package/theme/_ui-theme.scss
CHANGED
|
@@ -22,33 +22,37 @@ $mat-background-extract: (
|
|
|
22
22
|
);
|
|
23
23
|
|
|
24
24
|
@mixin all-component-colors($theme, $border-color-transition: $default-border-color-transition) {
|
|
25
|
-
@
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
@if (mat.get-theme-version($theme) == 1) {
|
|
26
|
+
@include stepper.color($theme);
|
|
27
|
+
@include radio.color($theme);
|
|
28
|
+
@include selection.color($theme);
|
|
28
29
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
// @include card.bui-card($color-config);
|
|
35
|
-
@each $p in (primary, tertiary, secondary, error) {
|
|
36
|
-
$c: mat.get-theme-color($theme, $p);
|
|
37
|
-
@include apply-color($p, $c, $border-color-transition);
|
|
38
|
-
}
|
|
30
|
+
.bui-border-emphasis:hover {
|
|
31
|
+
border-color: currentColor !important;
|
|
32
|
+
transition: $border-color-transition;
|
|
33
|
+
}
|
|
39
34
|
|
|
40
|
-
|
|
35
|
+
// @include card.bui-card($color-config);
|
|
41
36
|
@each $p in (primary, tertiary, secondary, error) {
|
|
42
37
|
$c: mat.get-theme-color($theme, $p);
|
|
43
|
-
|
|
38
|
+
@include apply-color($p, $c, $border-color-transition);
|
|
44
39
|
}
|
|
45
40
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
41
|
+
.bui-host {
|
|
42
|
+
@each $p in (primary, tertiary, secondary, error) {
|
|
43
|
+
$c: mat.get-theme-color($theme, $p);
|
|
44
|
+
--bui-color-#{$p}: #{$c};
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
@if mat.get-theme-type($theme) != dark {
|
|
48
|
+
--bui-color-success: #519602;
|
|
49
|
+
--bui-color-info: #0dcaf0;
|
|
50
|
+
--bui-color-warning: #ffc107;
|
|
51
|
+
--bui-color-error: #dc3545;
|
|
52
|
+
}
|
|
51
53
|
}
|
|
54
|
+
} @else {
|
|
55
|
+
@include legacy.apply-colors($theme);
|
|
52
56
|
}
|
|
53
57
|
}
|
|
54
58
|
|
|
@@ -73,9 +77,7 @@ $mat-background-extract: (
|
|
|
73
77
|
}
|
|
74
78
|
|
|
75
79
|
@mixin theme($theme, $border-color-transition: $default-border-color-transition) {
|
|
76
|
-
@if (mat.get-theme-version($theme)
|
|
77
|
-
@include legacy.theme($theme);
|
|
78
|
-
} @else {
|
|
80
|
+
@if (mat.get-theme-version($theme) == 1) {
|
|
79
81
|
@include apply-colors($theme, $border-color-transition);
|
|
80
82
|
@include stepper.theme($theme);
|
|
81
83
|
@include radio.theme($theme);
|
|
@@ -93,5 +95,7 @@ $mat-background-extract: (
|
|
|
93
95
|
font-size: 20px;
|
|
94
96
|
}
|
|
95
97
|
}
|
|
98
|
+
} @else {
|
|
99
|
+
@include legacy.theme($theme);
|
|
96
100
|
}
|
|
97
101
|
}
|