@annalib/anna-core 15.1.1 → 15.1.2
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/esm2020/lib/anna-generic-table-lib/components/anna-non-editable-generic-table/anna-non-editable-generic-table.component.mjs +3 -3
- package/fesm2015/annalib-anna-core.mjs +2 -2
- package/fesm2015/annalib-anna-core.mjs.map +1 -1
- package/fesm2020/annalib-anna-core.mjs +2 -2
- package/fesm2020/annalib-anna-core.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/anna-common-scss/_advertiser-listing-common.scss +70 -0
- package/src/lib/anna-common-scss/_easy-filter.scss +148 -52
- package/src/lib/anna-common-scss/_edit-filter-popup.scss +71 -0
- package/src/lib/anna-common-scss/_gt-table.scss +434 -0
- package/src/lib/anna-common-scss/_scrollbar.scss +14 -0
package/package.json
CHANGED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
@use "../anna-common-scss/gt-table" as *;
|
|
2
|
+
|
|
3
|
+
$LightBlue: #EEF6FF;
|
|
4
|
+
$LightOrange: #F9EADD;
|
|
5
|
+
$LightYellow: #F7F2D1;
|
|
6
|
+
$LightGreen: #E1FFED;
|
|
7
|
+
$DeepBlue: #1565C0;
|
|
8
|
+
$DeepOrange: #F97B07;
|
|
9
|
+
$DeepYellow: #F3BD18;
|
|
10
|
+
$DeepGreen: #00C853;
|
|
11
|
+
|
|
12
|
+
@mixin rowStyling($backgroundColor, $buttonColor, $shadow-map) {
|
|
13
|
+
@include table-data((), $shadow-map, $backgroundColor);
|
|
14
|
+
|
|
15
|
+
::ng-deep .status-btn {
|
|
16
|
+
background-color: $buttonColor !important;
|
|
17
|
+
color: white;
|
|
18
|
+
border-radius: 2px !important;
|
|
19
|
+
padding: 2px 6px;
|
|
20
|
+
cursor: default !important;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
@mixin advertiser-listing-table-styling($advertiser-box-shadow-map, $advertiser-no-data-box-shadow-map, $row-height-map){
|
|
25
|
+
:host ::ng-deep anna-core-non-editable-generic-table-lib {
|
|
26
|
+
@include table-container-scroll-bar(0px, 2.625rem);
|
|
27
|
+
@include table-header((), $advertiser-box-shadow-map);
|
|
28
|
+
@include no-data-table(142px, $advertiser-no-data-box-shadow-map, $row-height-map);
|
|
29
|
+
|
|
30
|
+
.loader {
|
|
31
|
+
margin-bottom: 0;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
tbody{
|
|
35
|
+
|
|
36
|
+
tr.AWAITING_BUYER_CONFIRMATION,
|
|
37
|
+
tr.AWAITING_SELLER_CONFIRMATION {
|
|
38
|
+
@include rowStyling($LightBlue, $DeepBlue, $advertiser-box-shadow-map);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
tr.NEED_SELLER_CONFIRMATION,
|
|
42
|
+
tr.NEED_BUYER_CONFIRMATION {
|
|
43
|
+
@include rowStyling($LightOrange, $DeepOrange, $advertiser-box-shadow-map);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
tr.NOTIFY_BUYER {
|
|
47
|
+
@include rowStyling($LightYellow, $DeepYellow, $advertiser-box-shadow-map);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
tr.APPROVED {
|
|
51
|
+
@include rowStyling($LightGreen, $DeepGreen, $advertiser-box-shadow-map);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
td{
|
|
55
|
+
cursor: default !important;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
th,td{
|
|
60
|
+
padding: 0 12px !important;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.no-data{
|
|
64
|
+
margin-top: -63px !important;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
@include table-bottom-border($advertiser-box-shadow-map);
|
|
68
|
+
|
|
69
|
+
}
|
|
70
|
+
}
|
|
@@ -1,62 +1,158 @@
|
|
|
1
|
-
@use "./fonts"
|
|
2
|
-
@
|
|
1
|
+
@use "./fonts" as *;
|
|
2
|
+
@use "./colors" as *;
|
|
3
|
+
@use "sass:map";
|
|
3
4
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
border: 1px solid $primary-color;
|
|
13
|
-
border-radius: 12px;
|
|
14
|
-
background-color: white;
|
|
15
|
-
color: $primary-color;
|
|
16
|
-
@include fonts(Roboto, 0.75rem, normal, 500, normal, normal, 0.6px);
|
|
17
|
-
padding: 5px 8px 5px 8px;
|
|
18
|
-
margin: 15px 8px 0px 0px;
|
|
19
|
-
|
|
20
|
-
&:disabled {
|
|
21
|
-
background-color: $gray74;
|
|
22
|
-
color: $charcoal;
|
|
23
|
-
opacity: 0.5;
|
|
24
|
-
border: 1px solid $gray74;
|
|
25
|
-
cursor: not-allowed;
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
button.easy-filter-active {
|
|
30
|
-
color: white;
|
|
31
|
-
background: $primary-color;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.only-enabled-button {
|
|
35
|
-
cursor: default;
|
|
36
|
-
pointer-events: none;
|
|
37
|
-
}
|
|
38
|
-
}
|
|
5
|
+
$intelli-filter-default-map: (
|
|
6
|
+
"inactive-text-color": $primary-color,
|
|
7
|
+
"inactive-border-color": $primary-color,
|
|
8
|
+
"inactive-bg-color": white,
|
|
9
|
+
"active-bg-color": $primary-color,
|
|
10
|
+
"active-text-color": white,
|
|
11
|
+
"active-border-color": $primary-color
|
|
12
|
+
);
|
|
39
13
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
padding: 5px 8px;
|
|
44
|
-
border: 1px solid #268bff;
|
|
45
|
-
background: white;
|
|
14
|
+
@mixin intelli-filter-default($padding: 5px 8px) {
|
|
15
|
+
button.intelli-filter {
|
|
16
|
+
@include fonts(Roboto, 0.75rem, normal, 500, normal, normal, 0.6px);
|
|
46
17
|
border-radius: 0.75rem;
|
|
47
18
|
height: 1.5rem;
|
|
48
19
|
margin-right: 8px;
|
|
20
|
+
display: inline-flex;
|
|
21
|
+
align-items: center;
|
|
22
|
+
padding: $padding;
|
|
23
|
+
|
|
24
|
+
&:disabled {
|
|
25
|
+
border: 1px solid #bdbdbd !important;
|
|
26
|
+
color: #4a4a4a !important;
|
|
27
|
+
background: #bdbdbd !important;
|
|
28
|
+
opacity: 0.5;
|
|
29
|
+
cursor: not-allowed;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@mixin intelli-filter-custom-styling(
|
|
35
|
+
$intelli-filter-map: $intelli-filter-default-map
|
|
36
|
+
) {
|
|
37
|
+
|
|
38
|
+
$intelli-filter-inactive-text-color: map.get(
|
|
39
|
+
$intelli-filter-map,
|
|
40
|
+
"inactive-text-color"
|
|
41
|
+
);
|
|
42
|
+
$intelli-filter-inactive-border-color: map.get(
|
|
43
|
+
$intelli-filter-map,
|
|
44
|
+
"inactive-border-color"
|
|
45
|
+
);
|
|
46
|
+
$intelli-filter-inactive-bg-color: map.get(
|
|
47
|
+
$intelli-filter-map,
|
|
48
|
+
"inactive-bg-color"
|
|
49
|
+
);
|
|
50
|
+
|
|
51
|
+
$intelli-filter-active-bg-color: map.get(
|
|
52
|
+
$intelli-filter-map,
|
|
53
|
+
"active-bg-color"
|
|
54
|
+
);
|
|
55
|
+
$intelli-filter-active-text-color: map.get(
|
|
56
|
+
$intelli-filter-map,
|
|
57
|
+
"active-text-color"
|
|
58
|
+
);
|
|
59
|
+
$intelli-filter-active-border-color: map.get(
|
|
60
|
+
$intelli-filter-map,
|
|
61
|
+
"active-border-color"
|
|
62
|
+
);
|
|
63
|
+
|
|
64
|
+
color: $intelli-filter-inactive-text-color;
|
|
65
|
+
border: 1px solid $intelli-filter-inactive-border-color;
|
|
66
|
+
background: $intelli-filter-inactive-bg-color;
|
|
67
|
+
|
|
68
|
+
&.active {
|
|
69
|
+
color: $intelli-filter-active-text-color !important;
|
|
70
|
+
background: $intelli-filter-active-bg-color !important;
|
|
71
|
+
border: 1px solid $intelli-filter-active-border-color !important;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
$only-enabled-default-map: ("text-color": white, "bg-color": $primary-color);
|
|
76
|
+
|
|
77
|
+
@mixin only-enabled-filter($enabled-styling: $only-enabled-default-map){
|
|
78
|
+
$color: map.get($enabled-styling, "text-color");
|
|
79
|
+
$bg-color: map.get($enabled-styling, "bg-color");
|
|
80
|
+
|
|
81
|
+
button.only-enabled-button{
|
|
82
|
+
color: $color;
|
|
83
|
+
background: $bg-color;
|
|
84
|
+
cursor: default;
|
|
85
|
+
pointer-events: none;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
$intelli-filter-icon-default-map: (
|
|
90
|
+
"icon-font-size": 14.5px,
|
|
91
|
+
"icon-margin-right": 4px,
|
|
92
|
+
"active-icon-color": white,
|
|
93
|
+
);
|
|
94
|
+
|
|
95
|
+
@mixin intelli-filter-icons-styling(
|
|
96
|
+
$icon-styling: $intelli-filter-icon-default-map
|
|
97
|
+
) {
|
|
98
|
+
$icon-font-size: map.get($icon-styling, "icon-font-size");
|
|
99
|
+
$icon-margin-right: map.get($icon-styling, "icon-margin-right");
|
|
100
|
+
$icon-active-color: map.get($icon-styling, "active-icon-color");
|
|
101
|
+
|
|
102
|
+
button.intelli-filter i {
|
|
103
|
+
font-size: $icon-font-size;
|
|
104
|
+
margin-right: $icon-margin-right;
|
|
105
|
+
display: flex;
|
|
106
|
+
vertical-align: middle;
|
|
107
|
+
|
|
108
|
+
&.mdi-star {
|
|
109
|
+
color: $amber;
|
|
110
|
+
opacity: 0.5;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
&.mdi-alert {
|
|
114
|
+
color: #f97b07;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
&.mdi-bell {
|
|
118
|
+
color: #f3bd18;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
&.mdi-file-remove-outline {
|
|
122
|
+
color: #f44336;
|
|
123
|
+
margin-right: 2px;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
button.intelli-filter.active {
|
|
128
|
+
::ng-deep svg {
|
|
129
|
+
g {
|
|
130
|
+
stroke: $icon-active-color !important;
|
|
131
|
+
fill: $icon-active-color !important;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
i {
|
|
136
|
+
color: $icon-active-color;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
i.mdi-star {
|
|
140
|
+
color: #ffc107;
|
|
141
|
+
opacity: 0.9;
|
|
142
|
+
display: flex;
|
|
143
|
+
}
|
|
144
|
+
}
|
|
49
145
|
}
|
|
50
146
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
147
|
+
.filter-label {
|
|
148
|
+
@include fonts(Roboto, 0.875rem, normal, normal, normal, normal, normal);
|
|
149
|
+
color: $charcoal;
|
|
150
|
+
margin-bottom: 4px;
|
|
54
151
|
}
|
|
55
152
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
cursor: not-allowed;
|
|
153
|
+
.filter-divider {
|
|
154
|
+
width: 1px;
|
|
155
|
+
margin-right: 8px;
|
|
156
|
+
height: 24px;
|
|
157
|
+
background: #111;
|
|
62
158
|
}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
@use "./colors" as c;
|
|
2
|
+
@use "./fonts" as f;
|
|
3
|
+
|
|
4
|
+
$gap-between-headers-col: 1.5625rem !default;
|
|
5
|
+
|
|
6
|
+
.selected-filters-container{
|
|
7
|
+
border-radius: 2px;
|
|
8
|
+
border: 1px solid c.$primary-color;
|
|
9
|
+
padding: 0.625rem 0.5rem 0.625rem 1.5rem;
|
|
10
|
+
display: flex;
|
|
11
|
+
flex-wrap: nowrap;
|
|
12
|
+
justify-content: space-between;
|
|
13
|
+
height: 3.25rem;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.filter-view{
|
|
17
|
+
display: flex;
|
|
18
|
+
gap: $gap-between-headers-col;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.header{
|
|
22
|
+
margin-bottom: 0;
|
|
23
|
+
color: c.$darkCharcoal;
|
|
24
|
+
@include f.fonts(Roboto, 0.75rem, normal, normal, normal, normal, normal);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.selected-value{
|
|
28
|
+
margin-bottom: 0;
|
|
29
|
+
color: c.$grey;
|
|
30
|
+
@include f.fonts(Roboto, 0.875rem, normal, bold, normal, 1.14, normal);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@mixin filter-popup-modal-header(){
|
|
34
|
+
.modal-header{
|
|
35
|
+
padding: 0.5rem 0.5rem 0.25rem 1.5rem;
|
|
36
|
+
|
|
37
|
+
.modal-title{
|
|
38
|
+
color: white;
|
|
39
|
+
margin-top: auto;
|
|
40
|
+
margin-bottom: 0;
|
|
41
|
+
@include f.fonts(Roboto, 1.125rem, normal, normal, normal, normal, normal);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
i{
|
|
45
|
+
color: white;
|
|
46
|
+
font-size: 1.5rem;
|
|
47
|
+
&:hover, &:focus {
|
|
48
|
+
opacity: 1 !important;
|
|
49
|
+
color: white;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
@mixin filter-popup-modal-body(){
|
|
57
|
+
.modal-body{
|
|
58
|
+
padding: 1.5rem;
|
|
59
|
+
|
|
60
|
+
.popup-filter{
|
|
61
|
+
margin-bottom: 1rem;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.btn-group{
|
|
65
|
+
display: flex;
|
|
66
|
+
justify-content: space-between;
|
|
67
|
+
padding-top: 0.5rem;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
}
|
|
71
|
+
}
|