@annalib/anna-core 15.0.32 → 15.0.34

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.
@@ -174,6 +174,7 @@ export declare class AnnaNonEditableGenericTableComponent implements OnInit, OnC
174
174
  tooltipContainingTable: tableTooltipType;
175
175
  showEmptySpaceForSlider: boolean;
176
176
  tableBottomBorderClass: string;
177
+ setFilterIconMargin: boolean;
177
178
  constructor(cdRef: ChangeDetectorRef, annaSortService: AnnaSortService, annaDateTimeFormatService: AnnaDateTimeFormatService, annaFilterService: AnnaFilterService);
178
179
  ngAfterViewChecked(): void;
179
180
  ngOnInit(): void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@annalib/anna-core",
3
- "version": "15.0.32",
3
+ "version": "15.0.34",
4
4
  "peerDependencies": {
5
5
  "@angular-slider/ngx-slider": "^2.0.4",
6
6
  "@angular/common": "^15.2.9",
@@ -1,70 +0,0 @@
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,71 +0,0 @@
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
- }
@@ -1,446 +0,0 @@
1
- @use "../anna-common-scss/fonts" as *;
2
- @use "../anna-common-scss/colors" as *;
3
- @use "sass:list";
4
- @use "sass:map";
5
-
6
- @mixin sticky-left($leftOffset, $zIndex) {
7
- position: sticky;
8
- left: $leftOffset;
9
- z-index: $zIndex !important;
10
- }
11
-
12
- @mixin ellipsify(){
13
- text-overflow: ellipsis;
14
- overflow: hidden;
15
- white-space: nowrap;
16
- }
17
-
18
- @mixin table-container-scroll-bar($margin-left: 0, $margin-top: 0){
19
-
20
- .table-container{
21
- &::-webkit-scrollbar {
22
- width: 4px;
23
- height: 4px;
24
- }
25
-
26
- &::-webkit-scrollbar-thumb {
27
- border-radius: 4px;
28
- background-color: rgba(0, 0, 0, 0.4) !important;
29
- border: 1px solid rgba(0, 0, 0, 0.2);
30
- }
31
-
32
- &::-webkit-scrollbar-track {
33
- border: 1px solid rgba(0, 0, 0, 0.1) !important;
34
- margin-top: $margin-top;
35
- margin-left: $margin-left;
36
- }
37
- }
38
- }
39
-
40
- @mixin table-fixed-style($width: 100%){
41
-
42
- table{
43
- margin-bottom: 0;
44
- table-layout: fixed;
45
- width: $width;
46
- }
47
-
48
- }
49
-
50
-
51
-
52
- @mixin table-header($sticky-left-map, $box-shadow-map, $bg-color: #ededed ){
53
-
54
- $last-sticky-col: 0;
55
- @if(list.length(map.keys($sticky-left-map)) > 0){
56
- $last-sticky-col: list.nth(map.keys($sticky-left-map), -1);
57
- }
58
-
59
- .scroll-left-shadow-effect .header-row th:nth-of-type(#{$last-sticky-col}) {
60
- border: none !important;
61
- filter: drop-shadow(2px 0 2px $lightGray-4);
62
- }
63
-
64
- .header-row{
65
-
66
- th{
67
- background: $bg-color;
68
- padding: 2px 8px;
69
- line-height: normal;
70
- position: sticky;
71
- top: 0;
72
- box-shadow: none !important;
73
-
74
- .upper-label {
75
- @include fonts(Roboto, 0.6875rem, normal, 500, normal, normal, 0.3px);
76
- color: $charcoal;
77
- margin-bottom: 0;
78
- }
79
-
80
- .lower-label {
81
- @include fonts(Roboto, 0.6875rem, normal, 500, normal, normal, 0.3px);
82
- color: $darkGray;
83
- margin-bottom: 0;
84
- }
85
-
86
- div.row {
87
- display: flex;
88
- flex-wrap: nowrap;
89
- justify-content: space-between;
90
- align-items: center;
91
- width: max-content;
92
- }
93
-
94
- div.sort-filter-container {
95
- display: flex;
96
- flex-wrap: nowrap;
97
- align-items: center;
98
- margin-left: $fs-4;
99
- margin-right: auto;
100
- }
101
-
102
- span.mdi-filter-variant {
103
- font-size: 13px !important;
104
- top: -1px !important;
105
- position: relative;
106
- }
107
- }
108
-
109
- $box-shadow-start-index: map.get($box-shadow-map, "start-index");
110
- $box-shadow-end-index: map.get($box-shadow-map, "end-index");
111
- $show-right-border-box-shadow: map.get($box-shadow-map, "show-right-border-box-shadow");
112
- $top-bottom-box-shadow-color: map.get($box-shadow-map, "top-bottom-bs-color");
113
- $left-right-box-shadow-color: map.get($box-shadow-map, "left-right-bs-color");
114
-
115
- @for $i from $box-shadow-start-index through $box-shadow-end-index {
116
-
117
- @if($i == $box-shadow-start-index){
118
- th:nth-of-type(#{$i}){
119
- @if ($show-right-border-box-shadow){
120
- box-shadow: inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 1px 0 0 $top-bottom-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
121
- }
122
- @else{
123
- box-shadow: inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 1px 0 0 $top-bottom-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
124
- }
125
- }
126
- }
127
- @else if($i == $box-shadow-end-index){
128
- th:nth-of-type(#{$i}){
129
- @if ($show-right-border-box-shadow){
130
- box-shadow: inset -1px 0 0 0 $left-right-box-shadow-color, inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 1px 0 0 $top-bottom-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
131
- }
132
- @else {
133
- box-shadow: inset -1px 0 0 0 $left-right-box-shadow-color, inset 0 1px 0 0 $top-bottom-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
134
- }
135
- }
136
- }
137
- @else {
138
- th:nth-of-type(#{$i}){
139
- @if ($show-right-border-box-shadow){
140
- box-shadow: inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 1px 0 0 $top-bottom-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
141
- }
142
- @else{
143
- box-shadow: inset 0 1px 0 0 $top-bottom-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
144
- }
145
- }
146
- }
147
-
148
- }
149
-
150
- @each $columnNumber, $sticky-prop in $sticky-left-map {
151
-
152
- $left-offset: map.get($sticky-prop, "left");
153
- $z-index: map.get($sticky-prop, "z-index");
154
-
155
- th:nth-of-type(#{$columnNumber}){
156
- @include sticky-left($left-offset, $z-index);
157
- }
158
- }
159
-
160
- }
161
- }
162
-
163
-
164
- @mixin total-row($sticky-top-left-map, $box-shadow-map, $bg-color: white){
165
-
166
- $sticky-top: map.get($sticky-top-left-map, "top");
167
- $sticky-left-map: map.get($sticky-top-left-map, "sticky-left");
168
- $last-sticky-col: 0;
169
-
170
- @if(list.length(map.keys($sticky-left-map)) > 0){
171
- $last-sticky-col: list.nth(map.keys($sticky-left-map), -1);
172
- }
173
-
174
- .scroll-left-shadow-effect:not(.no-data-table) .total-row td:nth-of-type(#{$last-sticky-col}) {
175
- filter: drop-shadow(2px 0 2px $lightGray-4);
176
- }
177
-
178
-
179
- .total-row{
180
-
181
-
182
- td{
183
- padding: 2px 8px;
184
- background: $bg-color;
185
- position: sticky;
186
- top: $sticky-top !important;
187
-
188
- .upper-label{
189
- @include fonts(Roboto, 0.75rem, normal, 900, normal, normal, 0.3px);
190
- color: $charcoal;
191
- }
192
-
193
- .lower-label{
194
- @include fonts(Roboto, 0.75rem, normal, 900, normal, normal, 0.3px);
195
- color: $darkGray;
196
- }
197
-
198
- br {
199
- display: block;
200
- content: "";
201
- margin-top: -3px;
202
- }
203
-
204
- }
205
-
206
- $box-shadow-start-index: map.get($box-shadow-map, "start-index");
207
- $box-shadow-end-index: map.get($box-shadow-map, "end-index");
208
- $show-right-border-box-shadow: map.get($box-shadow-map, "show-right-border-box-shadow");
209
- $top-box-shadow-color: map.get($box-shadow-map, "top-bs-color");
210
- $left-box-shadow-color: map.get($box-shadow-map, "left-bs-color");
211
- $bottom-box-shadow-color: map.get($box-shadow-map, "bottom-bs-color");
212
- $right-box-shadow-color: map.get($box-shadow-map, "right-bs-color");
213
-
214
- @for $i from $box-shadow-start-index through $box-shadow-end-index {
215
-
216
- @if($i == $box-shadow-start-index){
217
- td:nth-of-type(#{$i}){
218
- @if ($show-right-border-box-shadow){
219
- box-shadow: inset 1px 0 0 0 $top-box-shadow-color,inset 0 1px 0 0 $top-box-shadow-color, inset 0 -1px 0 0 $bottom-box-shadow-color !important;
220
- }
221
- @else{
222
- box-shadow: inset 1px 0 0 0 $top-box-shadow-color, inset 0 1px 0 0 $top-box-shadow-color, inset 0 -1px 0 0 $bottom-box-shadow-color !important;
223
- }
224
- }
225
- }
226
- @else if($i == $box-shadow-end-index){
227
- td:nth-of-type(#{$i}){
228
- @if ($show-right-border-box-shadow){
229
- box-shadow: inset -1px 0 0 0 $top-box-shadow-color, inset 1px 0 0 0 $left-box-shadow-color, inset 0 1px 0 0 $top-box-shadow-color, inset 0 -1px 0 0 $bottom-box-shadow-color !important;
230
- }
231
- @else {
232
- box-shadow: inset -1px 0 0 0 $top-box-shadow-color, inset 0 1px 0 0 $top-box-shadow-color, inset 0 -1px 0 0 $bottom-box-shadow-color !important;
233
- }
234
- }
235
- }
236
- @else {
237
- td:nth-of-type(#{$i}){
238
- @if ($show-right-border-box-shadow){
239
- box-shadow: inset 1px 0 0 0 $left-box-shadow-color, inset 0 1px 0 0 $top-box-shadow-color, inset 0 -1px 0 0 $bottom-box-shadow-color !important;
240
- }
241
- @else{
242
- box-shadow: inset 0 1px 0 0 $top-box-shadow-color, inset 0 -1px 0 0 $bottom-box-shadow-color !important;
243
- }
244
- }
245
- }
246
-
247
- }
248
-
249
-
250
- @each $columnNumber, $sticky-prop in $sticky-left-map {
251
-
252
- $left-offset: map.get($sticky-prop, "left");
253
- $z-index: map.get($sticky-prop, "z-index");
254
-
255
- td:nth-of-type(#{$columnNumber}){
256
- @include sticky-left($left-offset, $z-index);
257
- }
258
- }
259
-
260
-
261
- }
262
- }
263
-
264
-
265
- @mixin table-data($sticky-left-map, $box-shadow-map, $bg-color: white){
266
-
267
- td{
268
- cursor: pointer;
269
- background: $bg-color;
270
- box-shadow: none !important;
271
-
272
- div:nth-child(1) {
273
- color: #000;
274
- @include ellipsify();
275
- @include fonts(Roboto, 0.75rem, normal, normal, normal, normal, 0px);
276
- }
277
-
278
- div:nth-child(2) {
279
- color: #a7a7a7;
280
- @include ellipsify();
281
- @include fonts(Roboto, 0.75rem, normal, 500, normal, normal, 0.3px);
282
- }
283
- }
284
-
285
- $box-shadow-start-index: map.get($box-shadow-map, "start-index");
286
- $box-shadow-end-index: map.get($box-shadow-map, "end-index");
287
- $show-right-border-box-shadow: map.get($box-shadow-map, "show-right-border-box-shadow");
288
- $top-bottom-box-shadow-color: map.get($box-shadow-map, "top-bottom-bs-color");
289
- $left-right-box-shadow-color: map.get($box-shadow-map, "left-right-bs-color");
290
-
291
- @for $i from $box-shadow-start-index through $box-shadow-end-index {
292
-
293
- @if($i == $box-shadow-start-index){
294
- td:nth-of-type(#{$i}){
295
- @if ($show-right-border-box-shadow){
296
- box-shadow: inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
297
- }
298
- @else{
299
- box-shadow: inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
300
- }
301
- }
302
- }
303
- @else if($i == $box-shadow-end-index){
304
- td:nth-of-type(#{$i}){
305
- @if ($show-right-border-box-shadow){
306
- box-shadow: inset 1px 0 0 0 $left-right-box-shadow-color, inset -1px 0 0 0 $left-right-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
307
- }
308
- @else {
309
- box-shadow: inset -1px 0 0 0 $left-right-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
310
- }
311
- }
312
- }
313
- @else {
314
- td:nth-of-type(#{$i}){
315
- @if ($show-right-border-box-shadow){
316
- box-shadow: inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
317
- }
318
- @else{
319
- box-shadow: inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
320
- }
321
- }
322
- }
323
-
324
- }
325
-
326
- @each $columnNumber, $sticky-prop in $sticky-left-map {
327
-
328
- $left-offset: map.get($sticky-prop, "left");
329
- $z-index: map.get($sticky-prop, "z-index");
330
-
331
- td:nth-of-type(#{$columnNumber}){
332
- @include sticky-left($left-offset, $z-index);
333
- }
334
- }
335
-
336
- }
337
-
338
- @mixin table-data-shadow($columnNumber){
339
- .scroll-left-shadow-effect:not(.no-data-table) td:nth-of-type(#{$columnNumber}) {
340
- filter: drop-shadow(2px 0 1px $lightGray-4);
341
- }
342
- }
343
-
344
- @mixin no-data-table($table-container-height, $box-shadow-map, $row-height-map: ()){
345
-
346
- .table-container.no-data-table > div{
347
- height: $table-container-height !important;
348
- }
349
-
350
- $box-shadow-start-index: map.get($box-shadow-map, "box-shadow-start-index");
351
- $box-shadow-end-index: map.get($box-shadow-map, "box-shadow-end-index");
352
- $box-shadow-color: map.get($box-shadow-map, "box-shadow-color");
353
-
354
- tbody{
355
-
356
- @if(map.has-key($row-height-map,"row-height")){
357
- tr.no-border-tr{
358
- height: map.get($row-height-map,"row-height") !important;
359
- }
360
- }
361
-
362
- tr.no-border-tr:first-of-type{
363
- @for $i from $box-shadow-start-index through $box-shadow-end-index {
364
- td:nth-of-type(#{$i}){
365
- @if ($i == $box-shadow-start-index){
366
- box-shadow: inset 1px 0 0 0 $box-shadow-color !important;
367
- }
368
- @else if( $i == $box-shadow-end-index){
369
- box-shadow: inset -1px 0 0 0 $box-shadow-color !important;
370
- }
371
- @else{
372
- box-shadow: none !important;
373
- }
374
- }
375
- }
376
- }
377
-
378
- tr.no-border-tr:last-of-type{
379
- @for $i from $box-shadow-start-index through $box-shadow-end-index {
380
- td:nth-of-type(#{$i}){
381
- @if ($i == $box-shadow-start-index){
382
- box-shadow: inset 1px -1px 0 0 $box-shadow-color !important;
383
- }
384
- @else if( $i == $box-shadow-end-index){
385
- box-shadow: inset -1px -1px 0 0 $box-shadow-color !important;
386
- }
387
- @else{
388
- box-shadow: inset 0 -1px 0 0 $box-shadow-color !important;
389
- }
390
- }
391
- }
392
- }
393
- }
394
- }
395
-
396
- @mixin table-bottom-border($box-shadow-map){
397
-
398
- $box-shadow-start-index: map.get($box-shadow-map, "start-index");
399
- $box-shadow-end-index: map.get($box-shadow-map, "end-index");
400
- $show-right-border-box-shadow: map.get($box-shadow-map, "show-right-border-box-shadow");
401
- $top-bottom-box-shadow-color: map.get($box-shadow-map, "top-bottom-bs-color");
402
- $left-right-box-shadow-color: map.get($box-shadow-map, "left-right-bs-color");
403
-
404
- .bottom-border{
405
- border-bottom: 1px solid $top-bottom-box-shadow-color;
406
- }
407
-
408
- .bottom-border tbody{
409
- tr:last-of-type{
410
- @for $i from $box-shadow-start-index through $box-shadow-end-index {
411
-
412
- @if($i == $box-shadow-start-index){
413
- td:nth-of-type(#{$i}){
414
- @if ($show-right-border-box-shadow){
415
- box-shadow: inset 1px 0 0 0 $left-right-box-shadow-color !important;
416
- }
417
- @else{
418
- box-shadow: inset 1px 0 0 0 $left-right-box-shadow-color !important;
419
- }
420
- }
421
- }
422
- @else if($i == $box-shadow-end-index){
423
- td:nth-of-type(#{$i}){
424
- @if($show-right-border-box-shadow){
425
- box-shadow: inset 1px 0 0 0 $left-right-box-shadow-color, inset -1px 0 0 0 $left-right-box-shadow-color !important;
426
- }
427
- @else{
428
- box-shadow: inset -1px 0 0 0 $left-right-box-shadow-color !important;
429
- }
430
- }
431
- }
432
- @else {
433
- td:nth-of-type(#{$i}){
434
- @if ($show-right-border-box-shadow){
435
- box-shadow: inset 1px 0 0 0 $top-bottom-box-shadow-color !important;
436
- }
437
- @else{
438
- box-shadow: none !important;
439
- }
440
- }
441
- }
442
- }
443
- }
444
- }
445
-
446
- }