monkey-style-guide 2.0.39 → 2.0.40

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 (10) hide show
  1. package/assets/scss/partials/components/_buttons.scss +46 -62
  2. package/bundles/monkey-style-guide.umd.js +21 -7
  3. package/bundles/monkey-style-guide.umd.js.map +1 -1
  4. package/esm2015/lib/components/button/button-avatar.component.js +20 -9
  5. package/fesm2015/monkey-style-guide.js +19 -9
  6. package/fesm2015/monkey-style-guide.js.map +1 -1
  7. package/lib/components/button/button-avatar.component.d.ts +6 -0
  8. package/monkey-style-guide-2.0.40.tgz +0 -0
  9. package/package.json +1 -1
  10. 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 {
@@ -950,6 +919,11 @@ monkey-button-avatar {
950
919
  font-size: 18px;
951
920
  font-weight: 500;
952
921
  line-height: 21px;
922
+
923
+ img {
924
+ width: 16px;
925
+ height: 16px;
926
+ }
953
927
  }
954
928
 
955
929
  &__md {
@@ -957,6 +931,11 @@ monkey-button-avatar {
957
931
  font-size: 22px;
958
932
  font-weight: 500;
959
933
  line-height: 21px;
934
+
935
+ img {
936
+ width: 24px;
937
+ height: 24px;
938
+ }
960
939
  }
961
940
 
962
941
  &__lg {
@@ -964,6 +943,11 @@ monkey-button-avatar {
964
943
  font-size: 30px;
965
944
  font-weight: 500;
966
945
  line-height: 21px;
946
+
947
+ img {
948
+ width: 32px;
949
+ height: 32px;
950
+ }
967
951
  }
968
952
  }
969
953
  }
package/bundles/monkey-style-guide.umd.js CHANGED
@@ -1,8 +1,8 @@
1
1
  (function (global, factory) {
2
- typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common/http'), require('rxjs'), require('@angular/common'), require('@angular/forms'), require('rxjs/operators'), require('ngx-mask'), require('@angular/platform-browser')) :
3
- typeof define === 'function' && define.amd ? define('monkey-style-guide', ['exports', '@angular/core', '@angular/common/http', 'rxjs', '@angular/common', '@angular/forms', 'rxjs/operators', 'ngx-mask', '@angular/platform-browser'], factory) :
4
- (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['monkey-style-guide'] = {}, global.ng.core, global.ng.common.http, global.rxjs, global.ng.common, global.ng.forms, global.rxjs.operators, global['ngx-mask'], global.ng.platformBrowser));
5
- }(this, (function (exports, core, http, rxjs, common, forms, operators, ngxMask, platformBrowser) { 'use strict';
2
+ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common/http'), require('rxjs'), require('@angular/common'), require('@angular/platform-browser'), require('@angular/forms'), require('rxjs/operators'), require('ngx-mask')) :
3
+ typeof define === 'function' && define.amd ? define('monkey-style-guide', ['exports', '@angular/core', '@angular/common/http', 'rxjs', '@angular/common', '@angular/platform-browser', '@angular/forms', 'rxjs/operators', 'ngx-mask'], factory) :
4
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['monkey-style-guide'] = {}, global.ng.core, global.ng.common.http, global.rxjs, global.ng.common, global.ng.platformBrowser, global.ng.forms, global.rxjs.operators, global['ngx-mask']));
5
+ }(this, (function (exports, core, http, rxjs, common, platformBrowser, forms, operators, ngxMask) { 'use strict';
6
6
 
7
7
  var MonkeyStyleGuideService = /** @class */ (function () {
8
8
  function MonkeyStyleGuideService(http) {
@@ -1079,11 +1079,21 @@
1079
1079
  * MIT Licence
1080
1080
  **************************/
1081
1081
  var MonkeyButtonAvatarComponent = /** @class */ (function () {
1082
- function MonkeyButtonAvatarComponent() {
1082
+ function MonkeyButtonAvatarComponent(domSanitizer) {
1083
+ this.domSanitizer = domSanitizer;
1083
1084
  this._id = "mecx-button-avatar-" + MonkeyUtils.getRandomString(10);
1084
1085
  this._disabled = false;
1085
1086
  this._handledValue = '';
1087
+ this._safeUrl = null;
1088
+ this.onHandlePreview();
1086
1089
  }
1090
+ MonkeyButtonAvatarComponent.prototype.onHandlePreview = function () {
1091
+ var img = this.img;
1092
+ this._safeUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(img);
1093
+ console.log('@@@@@@');
1094
+ console.log(this._safeUrl);
1095
+ console.log('@@@@@@');
1096
+ };
1087
1097
  MonkeyButtonAvatarComponent.prototype.ngOnInit = function () {
1088
1098
  var label = this.label;
1089
1099
  this._handledValue = label === null || label === void 0 ? void 0 : label.charAt(0);
@@ -1093,14 +1103,18 @@
1093
1103
  MonkeyButtonAvatarComponent.decorators = [
1094
1104
  { type: core.Component, args: [{
1095
1105
  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 ",
1106
+ template: "\n <div\n [ngClass]=\"'mecx-button-avatar mecx-button-avatar__' + type + ' mecx-button-avatar__' + size\"\n >\n <img [src]=\"img\" *ngIf=\"img\" />\n {{ _handledValue }}\n </div>\n ",
1097
1107
  encapsulation: core.ViewEncapsulation.None
1098
1108
  },] }
1099
1109
  ];
1110
+ MonkeyButtonAvatarComponent.ctorParameters = function () { return [
1111
+ { type: platformBrowser.DomSanitizer }
1112
+ ]; };
1100
1113
  MonkeyButtonAvatarComponent.propDecorators = {
1101
1114
  label: [{ type: core.Input }],
1102
1115
  type: [{ type: core.Input }],
1103
- size: [{ type: core.Input }]
1116
+ size: [{ type: core.Input }],
1117
+ img: [{ type: core.Input }]
1104
1118
  };
1105
1119
 
1106
1120
  /**************************