monkey-style-guide 2.0.39 → 2.0.43

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 (11) hide show
  1. package/assets/scss/partials/components/_buttons.scss +51 -62
  2. package/bundles/monkey-style-guide.umd.js +4 -3
  3. package/bundles/monkey-style-guide.umd.js.map +1 -1
  4. package/esm2015/lib/components/button/button-avatar.component.js +6 -9
  5. package/esm2015/lib/components/input/input.component.js +2 -2
  6. package/fesm2015/monkey-style-guide.js +6 -9
  7. package/fesm2015/monkey-style-guide.js.map +1 -1
  8. package/lib/components/button/button-avatar.component.d.ts +1 -0
  9. package/monkey-style-guide-2.0.43.tgz +0 -0
  10. package/package.json +1 -1
  11. package/monkey-style-guide-2.0.39.tgz +0 -0
package/assets/scss/partials/components/_buttons.scss CHANGED
@@ -69,8 +69,7 @@
69
69
  background-position: center;
70
70
  transition: background 0.8s;
71
71
  background: map-get($mecx-theme, 400)
72
- radial-gradient(circle, transparent 1%, map-get($mecx-theme, 400) 1%)
73
- center/15000%;
72
+ radial-gradient(circle, transparent 1%, map-get($mecx-theme, 400) 1%) center/15000%;
74
73
  }
75
74
 
76
75
  &:active {
@@ -90,8 +89,7 @@
90
89
  background-position: center;
91
90
  transition: background 0.8s;
92
91
  background: map-get($mecx-error, 400)
93
- radial-gradient(circle, transparent 1%, map-get($mecx-error, 400) 1%)
94
- center/15000%;
92
+ radial-gradient(circle, transparent 1%, map-get($mecx-error, 400) 1%) center/15000%;
95
93
  }
96
94
 
97
95
  &:active {
@@ -111,8 +109,7 @@
111
109
  background-position: center;
112
110
  transition: background 0.8s;
113
111
  background: map-get($mecx-warning, 400)
114
- radial-gradient(circle, transparent 1%, map-get($mecx-warning, 400) 1%)
115
- center/15000%;
112
+ radial-gradient(circle, transparent 1%, map-get($mecx-warning, 400) 1%) center/15000%;
116
113
  }
117
114
 
118
115
  &:active {
@@ -132,8 +129,7 @@
132
129
  background-position: center;
133
130
  transition: background 0.8s;
134
131
  background: map-get($mecx-success, 400)
135
- radial-gradient(circle, transparent 1%, map-get($mecx-success, 400) 1%)
136
- center/15000%;
132
+ radial-gradient(circle, transparent 1%, map-get($mecx-success, 400) 1%) center/15000%;
137
133
  }
138
134
 
139
135
  &:active {
@@ -153,8 +149,7 @@
153
149
  background-position: center;
154
150
  transition: background 0.8s;
155
151
  background: map-get($mecx-question, 400)
156
- radial-gradient(circle, transparent 1%, map-get($mecx-question, 400) 1%)
157
- center/15000%;
152
+ radial-gradient(circle, transparent 1%, map-get($mecx-question, 400) 1%) center/15000%;
158
153
  }
159
154
 
160
155
  &:active {
@@ -188,8 +183,7 @@
188
183
  background-position: center;
189
184
  transition: background 0.8s;
190
185
  background: map-get($mecx-theme, 100)
191
- radial-gradient(circle, transparent 1%, map-get($mecx-theme, 100) 1%)
192
- center/15000%;
186
+ radial-gradient(circle, transparent 1%, map-get($mecx-theme, 100) 1%) center/15000%;
193
187
  }
194
188
 
195
189
  &:active {
@@ -211,8 +205,7 @@
211
205
  background-position: center;
212
206
  transition: background 0.8s;
213
207
  background: map-get($mecx-error, 100)
214
- radial-gradient(circle, transparent 1%, map-get($mecx-error, 100) 1%)
215
- center/15000%;
208
+ radial-gradient(circle, transparent 1%, map-get($mecx-error, 100) 1%) center/15000%;
216
209
  }
217
210
 
218
211
  &:active {
@@ -234,8 +227,7 @@
234
227
  background-position: center;
235
228
  transition: background 0.8s;
236
229
  background: map-get($mecx-warning, 100)
237
- radial-gradient(circle, transparent 1%, map-get($mecx-warning, 100) 1%)
238
- center/15000%;
230
+ radial-gradient(circle, transparent 1%, map-get($mecx-warning, 100) 1%) center/15000%;
239
231
  }
240
232
 
241
233
  &:active {
@@ -257,8 +249,7 @@
257
249
  background-position: center;
258
250
  transition: background 0.8s;
259
251
  background: map-get($mecx-success, 100)
260
- radial-gradient(circle, transparent 1%, map-get($mecx-success, 100) 1%)
261
- center/15000%;
252
+ radial-gradient(circle, transparent 1%, map-get($mecx-success, 100) 1%) center/15000%;
262
253
  }
263
254
 
264
255
  &:active {
@@ -280,8 +271,7 @@
280
271
  background-position: center;
281
272
  transition: background 0.8s;
282
273
  background: map-get($mecx-question, 100)
283
- radial-gradient(circle, transparent 1%, map-get($mecx-question, 100) 1%)
284
- center/15000%;
274
+ radial-gradient(circle, transparent 1%, map-get($mecx-question, 100) 1%) center/15000%;
285
275
  }
286
276
 
287
277
  &:active {
@@ -315,8 +305,7 @@
315
305
  background-position: center;
316
306
  transition: background 0.8s;
317
307
  background: map-get($mecx-theme, 100)
318
- radial-gradient(circle, transparent 1%, map-get($mecx-theme, 100) 1%)
319
- center/15000%;
308
+ radial-gradient(circle, transparent 1%, map-get($mecx-theme, 100) 1%) center/15000%;
320
309
  }
321
310
 
322
311
  &:active {
@@ -337,8 +326,7 @@
337
326
  background-position: center;
338
327
  transition: background 0.8s;
339
328
  background: map-get($mecx-error, 100)
340
- radial-gradient(circle, transparent 1%, map-get($mecx-error, 100) 1%)
341
- center/15000%;
329
+ radial-gradient(circle, transparent 1%, map-get($mecx-error, 100) 1%) center/15000%;
342
330
  }
343
331
 
344
332
  &:active {
@@ -359,8 +347,7 @@
359
347
  background-position: center;
360
348
  transition: background 0.8s;
361
349
  background: map-get($mecx-warning, 100)
362
- radial-gradient(circle, transparent 1%, map-get($mecx-warning, 100) 1%)
363
- center/15000%;
350
+ radial-gradient(circle, transparent 1%, map-get($mecx-warning, 100) 1%) center/15000%;
364
351
  }
365
352
 
366
353
  &:active {
@@ -381,8 +368,7 @@
381
368
  background-position: center;
382
369
  transition: background 0.8s;
383
370
  background: map-get($mecx-success, 100)
384
- radial-gradient(circle, transparent 1%, map-get($mecx-success, 100) 1%)
385
- center/15000%;
371
+ radial-gradient(circle, transparent 1%, map-get($mecx-success, 100) 1%) center/15000%;
386
372
  }
387
373
 
388
374
  &:active {
@@ -403,8 +389,7 @@
403
389
  background-position: center;
404
390
  transition: background 0.8s;
405
391
  background: map-get($mecx-question, 100)
406
- radial-gradient(circle, transparent 1%, map-get($mecx-question, 100) 1%)
407
- center/15000%;
392
+ radial-gradient(circle, transparent 1%, map-get($mecx-question, 100) 1%) center/15000%;
408
393
  }
409
394
 
410
395
  &:active {
@@ -438,8 +423,7 @@
438
423
  background-position: center;
439
424
  transition: background 0.8s;
440
425
  background: map-get($mecx-theme, 100)
441
- radial-gradient(circle, transparent 1%, map-get($mecx-theme, 100) 1%)
442
- center/15000%;
426
+ radial-gradient(circle, transparent 1%, map-get($mecx-theme, 100) 1%) center/15000%;
443
427
  }
444
428
 
445
429
  &:active {
@@ -462,8 +446,7 @@
462
446
  background-position: center;
463
447
  transition: background 0.8s;
464
448
  background: map-get($mecx-error, 100)
465
- radial-gradient(circle, transparent 1%, map-get($mecx-error, 100) 1%)
466
- center/15000%;
449
+ radial-gradient(circle, transparent 1%, map-get($mecx-error, 100) 1%) center/15000%;
467
450
  }
468
451
 
469
452
  &:active {
@@ -486,8 +469,7 @@
486
469
  background-position: center;
487
470
  transition: background 0.8s;
488
471
  background: map-get($mecx-warning, 400)
489
- radial-gradient(circle, transparent 1%, map-get($mecx-warning, 400) 1%)
490
- center/15000%;
472
+ radial-gradient(circle, transparent 1%, map-get($mecx-warning, 400) 1%) center/15000%;
491
473
  }
492
474
 
493
475
  &:active {
@@ -510,8 +492,7 @@
510
492
  background-position: center;
511
493
  transition: background 0.8s;
512
494
  background: map-get($mecx-success, 400)
513
- radial-gradient(circle, transparent 1%, map-get($mecx-success, 400) 1%)
514
- center/15000%;
495
+ radial-gradient(circle, transparent 1%, map-get($mecx-success, 400) 1%) center/15000%;
515
496
  }
516
497
 
517
498
  &:active {
@@ -534,8 +515,7 @@
534
515
  background-position: center;
535
516
  transition: background 0.8s;
536
517
  background: map-get($mecx-question, 400)
537
- radial-gradient(circle, transparent 1%, map-get($mecx-question, 400) 1%)
538
- center/15000%;
518
+ radial-gradient(circle, transparent 1%, map-get($mecx-question, 400) 1%) center/15000%;
539
519
  }
540
520
 
541
521
  &:active {
@@ -570,8 +550,7 @@
570
550
  color: #4b4a53;
571
551
  background-position: center;
572
552
  transition: background 0.8s;
573
- background: #f3f3f3 radial-gradient(circle, transparent 1%, #f3f3f3 1%)
574
- center/15000%;
553
+ background: #f3f3f3 radial-gradient(circle, transparent 1%, #f3f3f3 1%) center/15000%;
575
554
  }
576
555
 
577
556
  &:active {
@@ -602,8 +581,7 @@
602
581
  color: #4b4a53;
603
582
  background-position: center;
604
583
  transition: background 0.8s;
605
- background: #f3f3f3 radial-gradient(circle, transparent 1%, #f3f3f3 1%)
606
- center/15000%;
584
+ background: #f3f3f3 radial-gradient(circle, transparent 1%, #f3f3f3 1%) center/15000%;
607
585
  }
608
586
 
609
587
  &:active {
@@ -629,8 +607,7 @@
629
607
  color: #4b4a53;
630
608
  background-position: center;
631
609
  transition: background 0.8s;
632
- background: #f3f3f3 radial-gradient(circle, transparent 1%, #f3f3f3 1%)
633
- center/15000%;
610
+ background: #f3f3f3 radial-gradient(circle, transparent 1%, #f3f3f3 1%) center/15000%;
634
611
  }
635
612
 
636
613
  &:active {
@@ -656,8 +633,7 @@
656
633
  color: map-get($mecx-theme, main);
657
634
  background-position: center;
658
635
  transition: background 0.8s;
659
- background: #f3f3f3 radial-gradient(circle, transparent 1%, #f3f3f3 1%)
660
- center/15000%;
636
+ background: #f3f3f3 radial-gradient(circle, transparent 1%, #f3f3f3 1%) center/15000%;
661
637
  }
662
638
 
663
639
  &:active {
@@ -689,8 +665,7 @@
689
665
  color: #4b4a53;
690
666
  background-position: center;
691
667
  transition: background 0.8s;
692
- background: #f5f5f5 radial-gradient(circle, transparent 1%, #f5f5f5 1%)
693
- center/15000%;
668
+ background: #f5f5f5 radial-gradient(circle, transparent 1%, #f5f5f5 1%) center/15000%;
694
669
  }
695
670
 
696
671
  &:active {
@@ -709,8 +684,7 @@
709
684
  color: #4b4a53;
710
685
  background-position: center;
711
686
  transition: background 0.8s;
712
- background: #f5f5f5 radial-gradient(circle, transparent 1%, #f5f5f5 1%)
713
- center/15000%;
687
+ background: #f5f5f5 radial-gradient(circle, transparent 1%, #f5f5f5 1%) center/15000%;
714
688
  }
715
689
 
716
690
  &:active {
@@ -730,8 +704,7 @@
730
704
  color: #4b4a53;
731
705
  background-position: center;
732
706
  transition: background 0.8s;
733
- background: #f5f5f5 radial-gradient(circle, transparent 1%, #f5f5f5 1%)
734
- center/15000%;
707
+ background: #f5f5f5 radial-gradient(circle, transparent 1%, #f5f5f5 1%) center/15000%;
735
708
  }
736
709
 
737
710
  &:active {
@@ -762,8 +735,7 @@
762
735
  color: #4b4a53;
763
736
  background-position: center;
764
737
  transition: background 0.8s;
765
- background: #ebebeb radial-gradient(circle, transparent 1%, #ebebeb 1%)
766
- center/15000%;
738
+ background: #ebebeb radial-gradient(circle, transparent 1%, #ebebeb 1%) center/15000%;
767
739
  }
768
740
 
769
741
  &:active {
@@ -782,8 +754,7 @@
782
754
  color: #4b4a53;
783
755
  background-position: center;
784
756
  transition: background 0.8s;
785
- background: #ebebeb radial-gradient(circle, transparent 1%, #ebebeb 1%)
786
- center/15000%;
757
+ background: #ebebeb radial-gradient(circle, transparent 1%, #ebebeb 1%) center/15000%;
787
758
  }
788
759
 
789
760
  &:active {
@@ -803,8 +774,7 @@
803
774
  color: #4b4a53;
804
775
  background-position: center;
805
776
  transition: background 0.8s;
806
- background: #ebebeb radial-gradient(circle, transparent 1%, #ebebeb 1%)
807
- center/15000%;
777
+ background: #ebebeb radial-gradient(circle, transparent 1%, #ebebeb 1%) center/15000%;
808
778
  }
809
779
 
810
780
  &:active {
@@ -834,8 +804,7 @@
834
804
  color: map-get($mecx-theme, main);
835
805
  background-position: center;
836
806
  transition: background 0.8s;
837
- background: #f5f5f5 radial-gradient(circle, transparent 1%, #f5f5f5 1%)
838
- center/15000%;
807
+ background: #f5f5f5 radial-gradient(circle, transparent 1%, #f5f5f5 1%) center/15000%;
839
808
  }
840
809
 
841
810
  &:active {
@@ -940,6 +909,11 @@ monkey-button-avatar {
940
909
  background: map-get($mecx-theme, 100);
941
910
  }
942
911
 
912
+ &__theme-300 {
913
+ color: map-get(map-get($mecx-theme, contrast), 300);
914
+ background: map-get($mecx-theme, 300);
915
+ }
916
+
943
917
  &__none {
944
918
  background-color: #ebebeb;
945
919
  color: map-get($mecx-theme, main);
@@ -950,6 +924,11 @@ monkey-button-avatar {
950
924
  font-size: 18px;
951
925
  font-weight: 500;
952
926
  line-height: 21px;
927
+
928
+ img {
929
+ width: 16px;
930
+ height: 16px;
931
+ }
953
932
  }
954
933
 
955
934
  &__md {
@@ -957,6 +936,11 @@ monkey-button-avatar {
957
936
  font-size: 22px;
958
937
  font-weight: 500;
959
938
  line-height: 21px;
939
+
940
+ img {
941
+ width: 24px;
942
+ height: 24px;
943
+ }
960
944
  }
961
945
 
962
946
  &__lg {
@@ -964,6 +948,11 @@ monkey-button-avatar {
964
948
  font-size: 30px;
965
949
  font-weight: 500;
966
950
  line-height: 21px;
951
+
952
+ img {
953
+ width: 32px;
954
+ height: 32px;
955
+ }
967
956
  }
968
957
  }
969
958
  }
package/bundles/monkey-style-guide.umd.js CHANGED
@@ -1093,14 +1093,15 @@
1093
1093
  MonkeyButtonAvatarComponent.decorators = [
1094
1094
  { type: core.Component, args: [{
1095
1095
  selector: 'monkey-button-avatar',
1096
- template: "\n <div\n [ngClass]=\"\n 'mecx-button-avatar mecx-button-avatar__' +\n type +\n ' mecx-button-avatar__' +\n size\n \"\n >\n {{ _handledValue }}\n </div>\n ",
1096
+ template: "\n <div\n [ngClass]=\"'mecx-button-avatar mecx-button-avatar__' + type + ' mecx-button-avatar__' + size\"\n >\n <img [src]=\"img\" *ngIf=\"img\" />\n <span *ngIf=\"!img && _handledValue\">{{ _handledValue }}</span>\n </div>\n ",
1097
1097
  encapsulation: core.ViewEncapsulation.None
1098
1098
  },] }
1099
1099
  ];
1100
1100
  MonkeyButtonAvatarComponent.propDecorators = {
1101
1101
  label: [{ type: core.Input }],
1102
1102
  type: [{ type: core.Input }],
1103
- size: [{ type: core.Input }]
1103
+ size: [{ type: core.Input }],
1104
+ img: [{ type: core.Input }]
1104
1105
  };
1105
1106
 
1106
1107
  /**************************
@@ -2249,7 +2250,7 @@
2249
2250
  if (this.currency) {
2250
2251
  if (!value)
2251
2252
  value = 0;
2252
- return this.currencyPipe.transform("" + value, ((_a = settings === null || settings === void 0 ? void 0 : settings.currency) === null || _a === void 0 ? void 0 : _a.code) || 'BRL', 'symbol', '', ((_b = settings === null || settings === void 0 ? void 0 : settings.currency) === null || _b === void 0 ? void 0 : _b.locale) || 'pt-BR');
2253
+ return this.currencyPipe.transform(value, ((_a = settings === null || settings === void 0 ? void 0 : settings.currency) === null || _a === void 0 ? void 0 : _a.code) || 'BRL', 'symbol', '1.2-2', ((_b = settings === null || settings === void 0 ? void 0 : settings.currency) === null || _b === void 0 ? void 0 : _b.locale) || 'pt-BR');
2253
2254
  }
2254
2255
  else if (this.percent) {
2255
2256
  return value + " %";