@elderbyte/ngx-starter 15.5.2 → 15.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.
- package/_index.scss +3 -3
- package/esm2020/lib/components/chips/elder-chip-label.directive.mjs +78 -28
- package/fesm2015/elderbyte-ngx-starter.mjs +79 -27
- package/fesm2015/elderbyte-ngx-starter.mjs.map +1 -1
- package/fesm2020/elderbyte-ngx-starter.mjs +78 -27
- package/fesm2020/elderbyte-ngx-starter.mjs.map +1 -1
- package/lib/components/chips/elder-chip-label.directive.d.ts +24 -7
- package/package.json +1 -1
- package/src/lib/components/chips/_elder-chip-theme.scss +124 -0
- package/theming/_elder-chip-theme.scss +0 -147
|
@@ -1,9 +1,11 @@
|
|
|
1
|
+
import { OnInit } from '@angular/core';
|
|
1
2
|
import { MatChip } from '@angular/material/chips';
|
|
2
3
|
import { ThemePalette } from '@angular/material/core';
|
|
3
4
|
import * as i0 from "@angular/core";
|
|
4
|
-
export declare type ElderStateColor =
|
|
5
|
+
export declare type ElderStateColor = undefined | 'open' | 'inProgress' | 'completed' | 'warn' | 'error' | 'other';
|
|
6
|
+
export declare type ElderLevelColor = undefined | 'low' | 'medium' | 'high' | 'critical';
|
|
5
7
|
export declare type ElderChipAppearance = 'md3' | 'legacy';
|
|
6
|
-
export declare class ElderChipLabelDirective {
|
|
8
|
+
export declare class ElderChipLabelDirective implements OnInit {
|
|
7
9
|
private readonly matChip;
|
|
8
10
|
/***************************************************************************
|
|
9
11
|
* *
|
|
@@ -11,30 +13,45 @@ export declare class ElderChipLabelDirective {
|
|
|
11
13
|
* *
|
|
12
14
|
**************************************************************************/
|
|
13
15
|
private readonly baseClass;
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
16
|
+
private cssClasses;
|
|
17
|
+
private _appearance;
|
|
18
|
+
private _stateColor;
|
|
19
|
+
private _themeColor;
|
|
20
|
+
private _levelColor;
|
|
17
21
|
/***************************************************************************
|
|
18
22
|
* *
|
|
19
23
|
* Constructor *
|
|
20
24
|
* *
|
|
21
25
|
**************************************************************************/
|
|
22
26
|
constructor(matChip: MatChip);
|
|
27
|
+
ngOnInit(): void;
|
|
23
28
|
/***************************************************************************
|
|
24
29
|
* *
|
|
25
30
|
* Host Bindings *
|
|
26
31
|
* *
|
|
27
32
|
**************************************************************************/
|
|
28
33
|
get classes(): string;
|
|
34
|
+
/***************************************************************************
|
|
35
|
+
* *
|
|
36
|
+
* Properties *
|
|
37
|
+
* *
|
|
38
|
+
**************************************************************************/
|
|
39
|
+
set appearance(appearance: ElderChipAppearance);
|
|
40
|
+
set themeColor(themeColor: ThemePalette);
|
|
41
|
+
set stateColor(stateColor: ElderStateColor);
|
|
42
|
+
set levelColor(levelColor: ElderLevelColor);
|
|
29
43
|
/***************************************************************************
|
|
30
44
|
* *
|
|
31
45
|
* Private methods *
|
|
32
46
|
* *
|
|
33
47
|
**************************************************************************/
|
|
48
|
+
private refreshClasses;
|
|
34
49
|
private buildClassesString;
|
|
35
|
-
private
|
|
50
|
+
private buildClasses;
|
|
51
|
+
private resolveColorClass;
|
|
52
|
+
private getLevelColorClass;
|
|
36
53
|
private getStateColorClass;
|
|
37
54
|
private getThemeColorClass;
|
|
38
55
|
static ɵfac: i0.ɵɵFactoryDeclaration<ElderChipLabelDirective, [{ optional: true; host: true; }]>;
|
|
39
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<ElderChipLabelDirective, "[elderChipLabel]", never, { "themeColor": "color"; "stateColor": "stateColor"; "
|
|
56
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ElderChipLabelDirective, "[elderChipLabel]", never, { "appearance": "appearance"; "themeColor": "color"; "stateColor": "stateColor"; "levelColor": "levelColor"; }, {}, never, never, false, never>;
|
|
40
57
|
}
|
package/package.json
CHANGED
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
@use 'sass:map';
|
|
2
|
+
@use '@angular/material' as mat;
|
|
3
|
+
@use '@material/theme/theme-color' as mdc-theme-color;
|
|
4
|
+
|
|
5
|
+
$colorStateNone: rgb(143, 143, 143);
|
|
6
|
+
$colorStateOpen: rgb(199, 199, 199);
|
|
7
|
+
|
|
8
|
+
$colorStateInProgress: rgb(33, 150, 243);
|
|
9
|
+
$colorStateCompleted: rgb(4, 170, 109);
|
|
10
|
+
$colorStateWarn: rgb(255, 145, 0);
|
|
11
|
+
$colorStateError: rgb(255, 0, 0);
|
|
12
|
+
$colorStateOther: rgb(121, 73, 252);
|
|
13
|
+
|
|
14
|
+
$level-low: rgb(4, 170, 109);
|
|
15
|
+
$level-medium: rgb(33, 150, 243);
|
|
16
|
+
$level-high: rgb(255, 145, 0);
|
|
17
|
+
$level-critical: rgb(255, 0, 0);
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
@mixin _outlined-label-chip($color){
|
|
21
|
+
background-color: rgba($color, 0.2);
|
|
22
|
+
border-color: $color;
|
|
23
|
+
.mat-mdc-chip-action-label,
|
|
24
|
+
.mat-mdc-chip-avatar {
|
|
25
|
+
color: $color
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@mixin _theme_color_chip($colorPalette){
|
|
30
|
+
&.legacy {
|
|
31
|
+
background-color: mat.get-color-from-palette($colorPalette, default);
|
|
32
|
+
.mat-mdc-chip-action-label,
|
|
33
|
+
.mat-mdc-chip-avatar {
|
|
34
|
+
color: mat.get-color-from-palette($colorPalette, default-contrast);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
&.md3 { // label chip
|
|
38
|
+
background-color: mat.get-color-from-palette($colorPalette, default, 0.2);
|
|
39
|
+
border-color: mat.get-color-from-palette($colorPalette);
|
|
40
|
+
.mat-mdc-chip-action-label,
|
|
41
|
+
.mat-mdc-chip-avatar {
|
|
42
|
+
color: mat.get-color-from-palette($colorPalette);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
@mixin theme($config-or-theme) {
|
|
48
|
+
|
|
49
|
+
$primary: map-get($config-or-theme, primary);
|
|
50
|
+
$accent: map-get($config-or-theme, accent);
|
|
51
|
+
$warn: map-get($config-or-theme, warn);
|
|
52
|
+
|
|
53
|
+
$color-config: mat.get-color-config($config-or-theme);
|
|
54
|
+
$is-dark-theme: map.get($color-config, is-dark);
|
|
55
|
+
|
|
56
|
+
.mat-mdc-chip.elder-chip-label {
|
|
57
|
+
|
|
58
|
+
&.md3 {
|
|
59
|
+
border-style: solid;
|
|
60
|
+
border-width: 1px;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
&.color-primary {
|
|
64
|
+
@include _theme_color_chip($primary);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
&.color-accent {
|
|
68
|
+
@include _theme_color_chip($accent);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
&.color-warn {
|
|
72
|
+
@include _theme_color_chip($warn);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
&.none {
|
|
76
|
+
background-color: rgba($colorStateNone, 0.2);
|
|
77
|
+
border-color: $colorStateNone;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
&.state-open {
|
|
81
|
+
background-color: rgba($colorStateOpen, 0.2);
|
|
82
|
+
border-color: $colorStateOpen;
|
|
83
|
+
.mat-mdc-chip-avatar {
|
|
84
|
+
color: $colorStateOpen;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
&.state-in-progress {
|
|
89
|
+
@include _outlined-label-chip($colorStateInProgress);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
&.state-completed {
|
|
93
|
+
@include _outlined-label-chip($colorStateCompleted);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
&.state-warn {
|
|
97
|
+
@include _outlined-label-chip($colorStateWarn);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
&.state-error {
|
|
101
|
+
@include _outlined-label-chip($colorStateError);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
&.state-other {
|
|
105
|
+
@include _outlined-label-chip($colorStateOther);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
// ---
|
|
109
|
+
|
|
110
|
+
&.level-low {
|
|
111
|
+
@include _outlined-label-chip($level-low);
|
|
112
|
+
}
|
|
113
|
+
&.level-medium {
|
|
114
|
+
@include _outlined-label-chip($level-medium);
|
|
115
|
+
}
|
|
116
|
+
&.level-high {
|
|
117
|
+
@include _outlined-label-chip($level-high);
|
|
118
|
+
}
|
|
119
|
+
&.level-critical {
|
|
120
|
+
@include _outlined-label-chip($level-critical);
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
}
|
|
@@ -1,147 +0,0 @@
|
|
|
1
|
-
@use 'sass:map';
|
|
2
|
-
@use '@angular/material' as mat;
|
|
3
|
-
@use '@material/theme/theme-color' as mdc-theme-color;
|
|
4
|
-
|
|
5
|
-
$colorStateNone: rgb(143, 143, 143);
|
|
6
|
-
$colorStateOpen: rgb(199, 199, 199);
|
|
7
|
-
$colorStateInProgress: rgb(33, 150, 243);
|
|
8
|
-
$colorStateCompleted: rgb(4, 170, 109);
|
|
9
|
-
$colorStateWarn: rgb(255, 145, 0);
|
|
10
|
-
$colorStateError: rgb(255, 0, 0);
|
|
11
|
-
$colorStateOther: rgb(121, 73, 252);
|
|
12
|
-
|
|
13
|
-
@mixin theme($config-or-theme) {
|
|
14
|
-
|
|
15
|
-
$primary: map-get($config-or-theme, primary);
|
|
16
|
-
$accent: map-get($config-or-theme, accent);
|
|
17
|
-
$warn: map-get($config-or-theme, warn);
|
|
18
|
-
|
|
19
|
-
$color-config: mat.get-color-config($config-or-theme);
|
|
20
|
-
$is-dark-theme: map.get($color-config, is-dark);
|
|
21
|
-
|
|
22
|
-
.mat-mdc-chip.elder-chip-label {
|
|
23
|
-
|
|
24
|
-
&.md3 {
|
|
25
|
-
border-style: solid;
|
|
26
|
-
border-width: 1px;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
&.color-primary {
|
|
30
|
-
&.legacy {
|
|
31
|
-
background-color: mat.get-color-from-palette($primary, default);
|
|
32
|
-
.mat-mdc-chip-action-label,
|
|
33
|
-
.mat-mdc-chip-avatar {
|
|
34
|
-
color: mat.get-color-from-palette($primary, default-contrast);
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
&.md3 {
|
|
38
|
-
background-color: mat.get-color-from-palette($primary, default, 0.2);
|
|
39
|
-
border-color: mat.get-color-from-palette($primary);
|
|
40
|
-
.mat-mdc-chip-action-label,
|
|
41
|
-
.mat-mdc-chip-avatar {
|
|
42
|
-
color: mat.get-color-from-palette($primary);
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
&.color-accent {
|
|
48
|
-
&.legacy {
|
|
49
|
-
background-color: mat.get-color-from-palette($accent, default);
|
|
50
|
-
.mat-mdc-chip-action-label,
|
|
51
|
-
.mat-mdc-chip-avatar {
|
|
52
|
-
color: mat.get-color-from-palette($accent, default-contrast);
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
&.md3 {
|
|
56
|
-
background-color: mat.get-color-from-palette($accent, default, 0.2);
|
|
57
|
-
border-color: mat.get-color-from-palette($accent);
|
|
58
|
-
.mat-mdc-chip-action-label,
|
|
59
|
-
.mat-mdc-chip-avatar {
|
|
60
|
-
color: if(
|
|
61
|
-
$is-dark-theme,
|
|
62
|
-
mat.get-color-from-palette($accent),
|
|
63
|
-
mat.get-color-from-palette($accent, 700) // make color a little darker in case of light-mode
|
|
64
|
-
);
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
&.color-warn {
|
|
71
|
-
&.legacy {
|
|
72
|
-
background-color: mat.get-color-from-palette($warn, default);
|
|
73
|
-
.mat-mdc-chip-action-label,
|
|
74
|
-
.mat-mdc-chip-avatar {
|
|
75
|
-
color: mat.get-color-from-palette($warn, default-contrast);
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
&.md3 {
|
|
79
|
-
background-color: mat.get-color-from-palette($warn, default, 0.2);
|
|
80
|
-
border-color: mat.get-color-from-palette($warn);
|
|
81
|
-
.mat-mdc-chip-action-label,
|
|
82
|
-
.mat-mdc-chip-avatar {
|
|
83
|
-
color: mat.get-color-from-palette($warn);
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
&.state-none {
|
|
89
|
-
background-color: rgba($colorStateNone, 0.2);
|
|
90
|
-
border-color: $colorStateNone;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
&.state-open {
|
|
94
|
-
background-color: rgba($colorStateOpen, 0.2);
|
|
95
|
-
border-color: $colorStateOpen;
|
|
96
|
-
.mat-mdc-chip-avatar {
|
|
97
|
-
color: $colorStateOpen;
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
&.state-in-progress {
|
|
102
|
-
background-color: rgba($colorStateInProgress, 0.2);
|
|
103
|
-
border-color: $colorStateInProgress;
|
|
104
|
-
.mat-mdc-chip-action-label,
|
|
105
|
-
.mat-mdc-chip-avatar {
|
|
106
|
-
color: $colorStateInProgress
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
&.state-completed {
|
|
111
|
-
background-color: rgba($colorStateCompleted, 0.2);
|
|
112
|
-
border-color: $colorStateCompleted;
|
|
113
|
-
.mat-mdc-chip-action-label,
|
|
114
|
-
.mat-mdc-chip-avatar{
|
|
115
|
-
color: $colorStateCompleted;
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
&.state-warn {
|
|
120
|
-
background-color: rgba($colorStateWarn, 0.2);
|
|
121
|
-
border-color: $colorStateWarn;
|
|
122
|
-
.mat-mdc-chip-action-label,
|
|
123
|
-
.mat-mdc-chip-avatar{
|
|
124
|
-
color: $colorStateWarn;
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
&.state-error {
|
|
129
|
-
background-color: rgba($colorStateError, 0.2);
|
|
130
|
-
border-color: $colorStateError;
|
|
131
|
-
.mat-mdc-chip-action-label,
|
|
132
|
-
.mat-mdc-chip-avatar{
|
|
133
|
-
color: $colorStateError;
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
&.state-other {
|
|
138
|
-
background-color: rgba($colorStateOther, 0.2);
|
|
139
|
-
border-color: $colorStateOther;
|
|
140
|
-
.mat-mdc-chip-action-label,
|
|
141
|
-
.mat-mdc-chip-avatar{
|
|
142
|
-
color: $colorStateOther;
|
|
143
|
-
}
|
|
144
|
-
}
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
}
|