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.
- package/assets/scss/partials/components/_buttons.scss +46 -62
- package/bundles/monkey-style-guide.umd.js +21 -7
- package/bundles/monkey-style-guide.umd.js.map +1 -1
- package/esm2015/lib/components/button/button-avatar.component.js +20 -9
- package/fesm2015/monkey-style-guide.js +19 -9
- package/fesm2015/monkey-style-guide.js.map +1 -1
- package/lib/components/button/button-avatar.component.d.ts +6 -0
- package/monkey-style-guide-2.0.40.tgz +0 -0
- package/package.json +1 -1
- package/monkey-style-guide-2.0.39.tgz +0 -0
|
@@ -4,12 +4,23 @@
|
|
|
4
4
|
* MIT Licence
|
|
5
5
|
**************************/
|
|
6
6
|
import { Component, ViewEncapsulation, Input } from '@angular/core';
|
|
7
|
+
import { DomSanitizer } from '@angular/platform-browser';
|
|
7
8
|
import { MonkeyUtils } from '../../core/utils';
|
|
8
9
|
export class MonkeyButtonAvatarComponent {
|
|
9
|
-
constructor() {
|
|
10
|
+
constructor(domSanitizer) {
|
|
11
|
+
this.domSanitizer = domSanitizer;
|
|
10
12
|
this._id = `mecx-button-avatar-${MonkeyUtils.getRandomString(10)}`;
|
|
11
13
|
this._disabled = false;
|
|
12
14
|
this._handledValue = '';
|
|
15
|
+
this._safeUrl = null;
|
|
16
|
+
this.onHandlePreview();
|
|
17
|
+
}
|
|
18
|
+
onHandlePreview() {
|
|
19
|
+
const { img } = this;
|
|
20
|
+
this._safeUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(img);
|
|
21
|
+
console.log('@@@@@@');
|
|
22
|
+
console.log(this._safeUrl);
|
|
23
|
+
console.log('@@@@@@');
|
|
13
24
|
}
|
|
14
25
|
ngOnInit() {
|
|
15
26
|
const { label } = this;
|
|
@@ -21,22 +32,22 @@ MonkeyButtonAvatarComponent.decorators = [
|
|
|
21
32
|
selector: 'monkey-button-avatar',
|
|
22
33
|
template: `
|
|
23
34
|
<div
|
|
24
|
-
[ngClass]="
|
|
25
|
-
'mecx-button-avatar mecx-button-avatar__' +
|
|
26
|
-
type +
|
|
27
|
-
' mecx-button-avatar__' +
|
|
28
|
-
size
|
|
29
|
-
"
|
|
35
|
+
[ngClass]="'mecx-button-avatar mecx-button-avatar__' + type + ' mecx-button-avatar__' + size"
|
|
30
36
|
>
|
|
37
|
+
<img [src]="img" *ngIf="img" />
|
|
31
38
|
{{ _handledValue }}
|
|
32
39
|
</div>
|
|
33
40
|
`,
|
|
34
41
|
encapsulation: ViewEncapsulation.None
|
|
35
42
|
},] }
|
|
36
43
|
];
|
|
44
|
+
MonkeyButtonAvatarComponent.ctorParameters = () => [
|
|
45
|
+
{ type: DomSanitizer }
|
|
46
|
+
];
|
|
37
47
|
MonkeyButtonAvatarComponent.propDecorators = {
|
|
38
48
|
label: [{ type: Input }],
|
|
39
49
|
type: [{ type: Input }],
|
|
40
|
-
size: [{ type: Input }]
|
|
50
|
+
size: [{ type: Input }],
|
|
51
|
+
img: [{ type: Input }]
|
|
41
52
|
};
|
|
42
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
53
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLWF2YXRhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tb25rZXktc3R5bGUtZ3VpZGUvc3JjL2xpYi9jb21wb25lbnRzL2J1dHRvbi9idXR0b24tYXZhdGFyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs0QkFJNEI7QUFDNUIsT0FBTyxFQUFFLFNBQVMsRUFBRSxpQkFBaUIsRUFBRSxLQUFLLEVBQVUsTUFBTSxlQUFlLENBQUM7QUFDNUUsT0FBTyxFQUFFLFlBQVksRUFBbUIsTUFBTSwyQkFBMkIsQ0FBQztBQUMxRSxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFjL0MsTUFBTSxPQUFPLDJCQUEyQjtJQVd0QyxZQUFvQixZQUEwQjtRQUExQixpQkFBWSxHQUFaLFlBQVksQ0FBYztRQUx2QyxRQUFHLEdBQUcsc0JBQXNCLFdBQVcsQ0FBQyxlQUFlLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQztRQUM5RCxjQUFTLEdBQUcsS0FBSyxDQUFDO1FBQ2xCLGtCQUFhLEdBQUcsRUFBRSxDQUFDO1FBQ25CLGFBQVEsR0FBb0IsSUFBSSxDQUFDO1FBR3RDLElBQUksQ0FBQyxlQUFlLEVBQUUsQ0FBQztJQUN6QixDQUFDO0lBRU8sZUFBZTtRQUNyQixNQUFNLEVBQUUsR0FBRyxFQUFFLEdBQUcsSUFBSSxDQUFDO1FBQ3JCLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQyw4QkFBOEIsQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUN0RSxPQUFPLENBQUMsR0FBRyxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQ3RCLE9BQU8sQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQzNCLE9BQU8sQ0FBQyxHQUFHLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDeEIsQ0FBQztJQUVELFFBQVE7UUFDTixNQUFNLEVBQUUsS0FBSyxFQUFFLEdBQUcsSUFBSSxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxhQUFhLEdBQUcsS0FBSyxhQUFMLEtBQUssdUJBQUwsS0FBSyxDQUFFLE1BQU0sQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUN4QyxDQUFDOzs7WUF0Q0YsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxzQkFBc0I7Z0JBQ2hDLFFBQVEsRUFBRTs7Ozs7OztHQU9UO2dCQUNELGFBQWEsRUFBRSxpQkFBaUIsQ0FBQyxJQUFJO2FBQ3RDOzs7WUFkUSxZQUFZOzs7b0JBZ0JsQixLQUFLO21CQUNMLEtBQUs7bUJBQ0wsS0FBSztrQkFDTCxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiLyoqKioqKioqKioqKioqKioqKioqKioqKioqXHJcbiAqIENvcHlyaWdodCBNb25rZXkgRXhjaGFuZ2UuIEFsbCBSaWdodHMgUmVzZXJ2ZWRcclxuICogVGhpcyBzdHlsZSBndWlkZSB3YXMgZGV2ZWxvcGVkIGJ5IE1vbmtleSBFeGNoYW5nZSBUZWFtXHJcbiAqIE1JVCBMaWNlbmNlXHJcbiAqKioqKioqKioqKioqKioqKioqKioqKioqKi9cclxuaW1wb3J0IHsgQ29tcG9uZW50LCBWaWV3RW5jYXBzdWxhdGlvbiwgSW5wdXQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBEb21TYW5pdGl6ZXIsIFNhZmVSZXNvdXJjZVVybCB9IGZyb20gJ0Bhbmd1bGFyL3BsYXRmb3JtLWJyb3dzZXInO1xyXG5pbXBvcnQgeyBNb25rZXlVdGlscyB9IGZyb20gJy4uLy4uL2NvcmUvdXRpbHMnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdtb25rZXktYnV0dG9uLWF2YXRhcicsXHJcbiAgdGVtcGxhdGU6IGBcclxuICAgIDxkaXZcclxuICAgICAgW25nQ2xhc3NdPVwiJ21lY3gtYnV0dG9uLWF2YXRhciBtZWN4LWJ1dHRvbi1hdmF0YXJfXycgKyB0eXBlICsgJyBtZWN4LWJ1dHRvbi1hdmF0YXJfXycgKyBzaXplXCJcclxuICAgID5cclxuICAgICAgPGltZyBbc3JjXT1cImltZ1wiICpuZ0lmPVwiaW1nXCIgLz5cclxuICAgICAge3sgX2hhbmRsZWRWYWx1ZSB9fVxyXG4gICAgPC9kaXY+XHJcbiAgYCxcclxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgTW9ua2V5QnV0dG9uQXZhdGFyQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuICBASW5wdXQoKSBsYWJlbDogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIHR5cGU6IHN0cmluZztcclxuICBASW5wdXQoKSBzaXplOiBzdHJpbmc7XHJcbiAgQElucHV0KCkgaW1nOiBzdHJpbmc7XHJcblxyXG4gIHB1YmxpYyBfaWQgPSBgbWVjeC1idXR0b24tYXZhdGFyLSR7TW9ua2V5VXRpbHMuZ2V0UmFuZG9tU3RyaW5nKDEwKX1gO1xyXG4gIHB1YmxpYyBfZGlzYWJsZWQgPSBmYWxzZTtcclxuICBwdWJsaWMgX2hhbmRsZWRWYWx1ZSA9ICcnO1xyXG4gIHB1YmxpYyBfc2FmZVVybDogU2FmZVJlc291cmNlVXJsID0gbnVsbDtcclxuXHJcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBkb21TYW5pdGl6ZXI6IERvbVNhbml0aXplcikge1xyXG4gICAgdGhpcy5vbkhhbmRsZVByZXZpZXcoKTtcclxuICB9XHJcblxyXG4gIHByaXZhdGUgb25IYW5kbGVQcmV2aWV3KCkge1xyXG4gICAgY29uc3QgeyBpbWcgfSA9IHRoaXM7XHJcbiAgICB0aGlzLl9zYWZlVXJsID0gdGhpcy5kb21TYW5pdGl6ZXIuYnlwYXNzU2VjdXJpdHlUcnVzdFJlc291cmNlVXJsKGltZyk7XHJcbiAgICBjb25zb2xlLmxvZygnQEBAQEBAJyk7XHJcbiAgICBjb25zb2xlLmxvZyh0aGlzLl9zYWZlVXJsKTtcclxuICAgIGNvbnNvbGUubG9nKCdAQEBAQEAnKTtcclxuICB9XHJcblxyXG4gIG5nT25Jbml0KCkge1xyXG4gICAgY29uc3QgeyBsYWJlbCB9ID0gdGhpcztcclxuICAgIHRoaXMuX2hhbmRsZWRWYWx1ZSA9IGxhYmVsPy5jaGFyQXQoMCk7XHJcbiAgfVxyXG59XHJcbiJdfQ==
|
|
@@ -2,10 +2,10 @@ import { Injectable, Inject, ComponentFactoryResolver, ApplicationRef, Injector,
|
|
|
2
2
|
import { HttpClient, HttpClientModule } from '@angular/common/http';
|
|
3
3
|
import { BehaviorSubject, throwError, Subject } from 'rxjs';
|
|
4
4
|
import { DOCUMENT, Location, CommonModule, CurrencyPipe } from '@angular/common';
|
|
5
|
+
import { DomSanitizer } from '@angular/platform-browser';
|
|
5
6
|
import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
6
7
|
import { takeUntil } from 'rxjs/operators';
|
|
7
8
|
import { NgxMaskModule } from 'ngx-mask';
|
|
8
|
-
import { DomSanitizer } from '@angular/platform-browser';
|
|
9
9
|
|
|
10
10
|
class MonkeyStyleGuideService {
|
|
11
11
|
constructor(http) {
|
|
@@ -815,10 +815,20 @@ MonkeyButtonDropdownComponent.propDecorators = {
|
|
|
815
815
|
* MIT Licence
|
|
816
816
|
**************************/
|
|
817
817
|
class MonkeyButtonAvatarComponent {
|
|
818
|
-
constructor() {
|
|
818
|
+
constructor(domSanitizer) {
|
|
819
|
+
this.domSanitizer = domSanitizer;
|
|
819
820
|
this._id = `mecx-button-avatar-${MonkeyUtils.getRandomString(10)}`;
|
|
820
821
|
this._disabled = false;
|
|
821
822
|
this._handledValue = '';
|
|
823
|
+
this._safeUrl = null;
|
|
824
|
+
this.onHandlePreview();
|
|
825
|
+
}
|
|
826
|
+
onHandlePreview() {
|
|
827
|
+
const { img } = this;
|
|
828
|
+
this._safeUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(img);
|
|
829
|
+
console.log('@@@@@@');
|
|
830
|
+
console.log(this._safeUrl);
|
|
831
|
+
console.log('@@@@@@');
|
|
822
832
|
}
|
|
823
833
|
ngOnInit() {
|
|
824
834
|
const { label } = this;
|
|
@@ -830,23 +840,23 @@ MonkeyButtonAvatarComponent.decorators = [
|
|
|
830
840
|
selector: 'monkey-button-avatar',
|
|
831
841
|
template: `
|
|
832
842
|
<div
|
|
833
|
-
[ngClass]="
|
|
834
|
-
'mecx-button-avatar mecx-button-avatar__' +
|
|
835
|
-
type +
|
|
836
|
-
' mecx-button-avatar__' +
|
|
837
|
-
size
|
|
838
|
-
"
|
|
843
|
+
[ngClass]="'mecx-button-avatar mecx-button-avatar__' + type + ' mecx-button-avatar__' + size"
|
|
839
844
|
>
|
|
845
|
+
<img [src]="img" *ngIf="img" />
|
|
840
846
|
{{ _handledValue }}
|
|
841
847
|
</div>
|
|
842
848
|
`,
|
|
843
849
|
encapsulation: ViewEncapsulation.None
|
|
844
850
|
},] }
|
|
845
851
|
];
|
|
852
|
+
MonkeyButtonAvatarComponent.ctorParameters = () => [
|
|
853
|
+
{ type: DomSanitizer }
|
|
854
|
+
];
|
|
846
855
|
MonkeyButtonAvatarComponent.propDecorators = {
|
|
847
856
|
label: [{ type: Input }],
|
|
848
857
|
type: [{ type: Input }],
|
|
849
|
-
size: [{ type: Input }]
|
|
858
|
+
size: [{ type: Input }],
|
|
859
|
+
img: [{ type: Input }]
|
|
850
860
|
};
|
|
851
861
|
|
|
852
862
|
/**************************
|