@bravura/ui 2.5.3 → 2.6.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.
Files changed (23) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/alert/alert-message.component.d.ts +3 -1
  3. package/esm2020/alert/alert-container.component.mjs +2 -2
  4. package/esm2020/alert/alert-message.component.mjs +15 -4
  5. package/esm2020/stepper/stepper.component.mjs +7 -3
  6. package/esm2020/tooltip/tooltip.directive.mjs +7 -1
  7. package/fesm2015/bravura-ui-alert.mjs +15 -4
  8. package/fesm2015/bravura-ui-alert.mjs.map +1 -1
  9. package/fesm2015/bravura-ui-stepper.mjs +6 -2
  10. package/fesm2015/bravura-ui-stepper.mjs.map +1 -1
  11. package/fesm2015/bravura-ui-tooltip.mjs +6 -0
  12. package/fesm2015/bravura-ui-tooltip.mjs.map +1 -1
  13. package/fesm2020/bravura-ui-alert.mjs +15 -4
  14. package/fesm2020/bravura-ui-alert.mjs.map +1 -1
  15. package/fesm2020/bravura-ui-stepper.mjs +6 -2
  16. package/fesm2020/bravura-ui-stepper.mjs.map +1 -1
  17. package/fesm2020/bravura-ui-tooltip.mjs +6 -0
  18. package/fesm2020/bravura-ui-tooltip.mjs.map +1 -1
  19. package/package.json +1 -1
  20. package/stepper/stepper.component.d.ts +2 -0
  21. package/theme/_bui-card.scss +65 -0
  22. package/theme/_ui-theme.scss +4 -0
  23. package/theme/scrollbar.scss +32 -30
package/stepper/stepper.component.d.ts CHANGED
@@ -66,6 +66,8 @@ export declare class StepperComponent extends CdkStepper implements AfterContent
66
66
  _stepIsNavigable(index: number, step: MatStep): boolean;
67
67
  /** @ignore */
68
68
  _widthChanged(w: number): void;
69
+ /** @ignore */
70
+ _startStepTransition(): void;
69
71
  static ɵfac: i0.ɵɵFactoryDeclaration<StepperComponent, [{ optional: true; }, null, null, null, { self: true; }, { optional: true; skipSelf: true; }]>;
70
72
  static ɵcmp: i0.ɵɵComponentDeclaration<StepperComponent, "bui-stepper, [buiStepper]", ["buiStepper", "matStepper", "matVerticalStepper", "matHorizontalStepper"], { "selectedIndex": "selectedIndex"; "disableRipple": "disableRipple"; "color": "color"; "indicatorFormatter": "indicatorFormatter"; "nextStepLabelPrefix": "nextStepLabelPrefix"; }, { "animationDone": "animationDone"; }, ["_steps", "_icons"], never, false>;
71
73
  }
package/theme/_bui-card.scss ADDED
@@ -0,0 +1,65 @@
1
+ @use 'sass:map';
2
+
3
+ @mixin bui-card($color-config) {
4
+ $bui-card-header-text-color: var(--bui-card-header-text-color, #19315b);
5
+ $bui-card-header-background-color: var(--bui-card-header-background-color, #fafafa);
6
+
7
+ @if map.get($color-config, 'is-dark') {
8
+ $bui-card-header-text-color: var(--bui-card-header-text-color-dark-theme, white);
9
+ $bui-card-header-background-color: var(--bui-card-header-background-color-dark-theme, inherit);
10
+ }
11
+
12
+ .bui-card-flat.mat-card,
13
+ .bui-card-shaded.mat-card {
14
+ border-radius: 4px;
15
+ display: flex;
16
+ flex-direction: column;
17
+
18
+ .mat-card-header {
19
+ margin: -16px -16px 0 -16px;
20
+ padding: 16px;
21
+
22
+ .mat-card-title {
23
+ font-size: 16px;
24
+ color: $bui-card-header-text-color;
25
+ margin-bottom: 0;
26
+ }
27
+
28
+ .mat-card-title + .mat-card-subtitle {
29
+ margin-top: 0;
30
+ margin-bottom: 0;
31
+ }
32
+
33
+ .mat-card-header-text {
34
+ margin: 0;
35
+ }
36
+ }
37
+
38
+ .mat-card-content {
39
+ flex: 1;
40
+ }
41
+
42
+ .mat-card-avatar + .mat-card-header-text {
43
+ margin: 0 16px;
44
+ }
45
+
46
+ .mat-card-header + .mat-card-content {
47
+ padding-top: 16px;
48
+ }
49
+ }
50
+
51
+ .bui-card-flat.mat-card {
52
+ box-shadow: none;
53
+ border: 1px solid #e0e0e0;
54
+
55
+ .mat-card-header {
56
+ border-bottom: 1px solid #e0e0e0;
57
+ }
58
+ }
59
+
60
+ .bui-card-shaded.mat-card {
61
+ .mat-card-header {
62
+ background: $bui-card-header-background-color;
63
+ }
64
+ }
65
+ }
package/theme/_ui-theme.scss CHANGED
@@ -1,5 +1,7 @@
1
1
  @use 'sass:map';
2
2
  @use '@angular/material' as mat;
3
+ @use './scrollbar.scss' as scrollbar;
4
+ @use './bui-card' as card;
3
5
 
4
6
  $default-border-color-transition: border-color 100ms cubic-bezier(0.55, 0, 0.55, 0.2);
5
7
  $mat-foreground-extract: (
@@ -37,6 +39,7 @@ $mat-background-extract: (
37
39
 
38
40
  $color-config: mat.get-color-config($theme);
39
41
  @if $color-config != null {
42
+ @include card.bui-card($color-config);
40
43
  @each $p in (primary, accent, warn) {
41
44
  $primary-palette: map.get($color-config, $p);
42
45
  $c: mat.get-color-from-palette($primary-palette, text);
@@ -85,6 +88,7 @@ $mat-background-extract: (
85
88
 
86
89
  @mixin theme($theme, $border-color-transition: $default-border-color-transition) {
87
90
  @include apply-colors($theme, $border-color-transition);
91
+ @include scrollbar.bui-scrollbar;
88
92
 
89
93
  .mat-icon {
90
94
  &.fas,
package/theme/scrollbar.scss CHANGED
@@ -1,38 +1,40 @@
1
- $bui-scrollbar-width: var(--bui-scrollbar-width, 8px);
2
- $bui-scrollbar-background: var(--bui-scrollbar-background, rgba(128, 128, 128, 0.02));
3
- $bui-scrollbar-thumb-color: var(--bui-scrollbar-thumb-color, rgba(128, 128, 128, 0.4));
4
- $bui-scrollbar-thumb-hover: var(--bui-scrollbar-thumb-hover, rgba(128, 128, 128, 0.6));
5
- $bui-scrollbar-thumb-active: var(--bui-scrollbar-thumb-active, rgba(128, 128, 128, 0.8));
1
+ @mixin bui-scrollbar {
2
+ $bui-scrollbar-width: var(--bui-scrollbar-width, 8px);
3
+ $bui-scrollbar-background: var(--bui-scrollbar-background, rgba(128, 128, 128, 0.02));
4
+ $bui-scrollbar-thumb-color: var(--bui-scrollbar-thumb-color, rgba(128, 128, 128, 0.4));
5
+ $bui-scrollbar-thumb-hover: var(--bui-scrollbar-thumb-hover, rgba(128, 128, 128, 0.6));
6
+ $bui-scrollbar-thumb-active: var(--bui-scrollbar-thumb-active, rgba(128, 128, 128, 0.8));
6
7
 
7
- .bui-styled-scrollbar {
8
- scrollbar-width: thin;
8
+ .bui-styled-scrollbar {
9
+ scrollbar-width: thin;
9
10
 
10
- &::-webkit-scrollbar-track {
11
- -webkit-box-shadow: inset 0 0 6px rgba(128, 128, 128, 0.2);
12
- background-color: $bui-scrollbar-background;
13
- border-radius: $bui-scrollbar-width;
14
- }
15
-
16
- &::-webkit-scrollbar {
17
- width: $bui-scrollbar-width;
18
- background-color: $bui-scrollbar-background;
19
- }
11
+ &::-webkit-scrollbar-track {
12
+ -webkit-box-shadow: inset 0 0 6px rgba(128, 128, 128, 0.2);
13
+ background-color: $bui-scrollbar-background;
14
+ border-radius: $bui-scrollbar-width;
15
+ }
20
16
 
21
- &::-webkit-scrollbar-thumb {
22
- background-color: $bui-scrollbar-thumb-color;
23
- border-radius: $bui-scrollbar-width;
24
- &:hover {
25
- background-color: $bui-scrollbar-thumb-hover;
17
+ &::-webkit-scrollbar {
18
+ width: $bui-scrollbar-width;
19
+ background-color: $bui-scrollbar-background;
26
20
  }
27
- &:active {
28
- background-color: $bui-scrollbar-thumb-active;
21
+
22
+ &::-webkit-scrollbar-thumb {
23
+ background-color: $bui-scrollbar-thumb-color;
24
+ border-radius: $bui-scrollbar-width;
25
+ &:hover {
26
+ background-color: $bui-scrollbar-thumb-hover;
27
+ }
28
+ &:active {
29
+ background-color: $bui-scrollbar-thumb-active;
30
+ }
29
31
  }
30
- }
31
32
 
32
- &.ng-scrollbar {
33
- --scrollbar-hover-size: #{$bui-scrollbar-width};
34
- --scrollbar-thumb-color: #{$bui-scrollbar-thumb-color};
35
- --scrollbar-thumb-hover-color: #{$bui-scrollbar-thumb-hover};
36
- --scrollbar-border-radius: #{$bui-scrollbar-width};
33
+ &.ng-scrollbar {
34
+ --scrollbar-hover-size: #{$bui-scrollbar-width};
35
+ --scrollbar-thumb-color: #{$bui-scrollbar-thumb-color};
36
+ --scrollbar-thumb-hover-color: #{$bui-scrollbar-thumb-hover};
37
+ --scrollbar-border-radius: #{$bui-scrollbar-width};
38
+ }
37
39
  }
38
40
  }