@wizishop/angular-components 0.0.109 → 0.0.112
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/bundles/wizishop-angular-components.umd.js +52 -29
- package/bundles/wizishop-angular-components.umd.js.map +1 -1
- package/bundles/wizishop-angular-components.umd.min.js +1 -1
- package/bundles/wizishop-angular-components.umd.min.js.map +1 -1
- package/esm2015/lib/components/button/button.component.js +50 -30
- package/fesm2015/wizishop-angular-components.js +49 -31
- package/fesm2015/wizishop-angular-components.js.map +1 -1
- package/lib/components/button/button.component.d.ts +5 -2
- package/package.json +1 -1
- package/wizishop-angular-components-0.0.112.tgz +0 -0
- package/wizishop-angular-components.metadata.json +1 -1
- package/wizishop-angular-components-0.0.109.tgz +0 -0
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
|
|
2
|
+
import { interval } from 'rxjs';
|
|
3
|
+
import { takeWhile } from 'rxjs/operators';
|
|
2
4
|
export class ButtonComponent {
|
|
3
5
|
constructor() {
|
|
4
6
|
this.extraClasses = 'is-info';
|
|
@@ -18,7 +20,8 @@ export class ButtonComponent {
|
|
|
18
20
|
this.confirmDeleteText = '';
|
|
19
21
|
this.confirmDeletePosition = 'right';
|
|
20
22
|
this.click = new EventEmitter();
|
|
21
|
-
this.
|
|
23
|
+
this.isLoadingChange = new EventEmitter();
|
|
24
|
+
this._isLoading = false;
|
|
22
25
|
this.interval = null;
|
|
23
26
|
this.waitForConfirmDelete = false;
|
|
24
27
|
this.buttonMaxWidth = '0px';
|
|
@@ -27,29 +30,40 @@ export class ButtonComponent {
|
|
|
27
30
|
this.buttonWidthDelete = '0px';
|
|
28
31
|
this.currentLoading = 0;
|
|
29
32
|
}
|
|
33
|
+
set isLoading(isLoading) {
|
|
34
|
+
this._isLoading = isLoading;
|
|
35
|
+
this.isLoadingChange.next(isLoading);
|
|
36
|
+
this.toggleLoading();
|
|
37
|
+
}
|
|
38
|
+
get isLoading() {
|
|
39
|
+
return this._isLoading;
|
|
40
|
+
}
|
|
30
41
|
ngOnInit() {
|
|
31
42
|
if (this.confirmDelete) {
|
|
32
43
|
this.waitForConfirmDelete = true;
|
|
33
44
|
}
|
|
34
45
|
}
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
}
|
|
39
|
-
this.isLoading = true;
|
|
40
|
-
this.currentLoading = 10;
|
|
41
|
-
this.interval = setInterval(() => {
|
|
46
|
+
toggleLoading() {
|
|
47
|
+
this.currentLoading = this.isLoading ? 10 : 100;
|
|
48
|
+
interval(200).pipe(takeWhile(time => this.isLoading)).subscribe(() => {
|
|
42
49
|
if (this.currentLoading < 85) {
|
|
43
50
|
this.currentLoading += Math.floor(Math.random() * 15);
|
|
44
51
|
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
52
|
+
});
|
|
53
|
+
/* this.interval = setInterval(() => {
|
|
54
|
+
|
|
55
|
+
if (this.currentLoading < 85) {
|
|
56
|
+
this.currentLoading += Math.floor(Math.random() * 15);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
if (!this.isLoading) {
|
|
60
|
+
this.currentLoading = 100;
|
|
61
|
+
|
|
62
|
+
setTimeout(() => {
|
|
63
|
+
clearInterval(this.interval);
|
|
64
|
+
}, 100);
|
|
65
|
+
}
|
|
66
|
+
}, 200); */
|
|
53
67
|
}
|
|
54
68
|
addMaxWidth() {
|
|
55
69
|
this.buttonMaxWidth = this.buttonWidth + 'px';
|
|
@@ -66,20 +80,24 @@ export class ButtonComponent {
|
|
|
66
80
|
}
|
|
67
81
|
onButtonClick(event) {
|
|
68
82
|
event.stopPropagation();
|
|
69
|
-
if (
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
83
|
+
if (this.disabled) {
|
|
84
|
+
return;
|
|
85
|
+
}
|
|
86
|
+
if (this.hasLoader) {
|
|
87
|
+
this.isLoading = false;
|
|
88
|
+
setTimeout(() => {
|
|
89
|
+
this.isLoading = true;
|
|
90
|
+
}, 0);
|
|
91
|
+
}
|
|
92
|
+
if (!this.waitForConfirmDelete) {
|
|
93
|
+
this.click.emit(event);
|
|
94
|
+
if (this.confirmDelete) {
|
|
95
|
+
this.resetMaxWidthDelete();
|
|
81
96
|
}
|
|
82
97
|
}
|
|
98
|
+
else {
|
|
99
|
+
this.waitForConfirmDelete = false;
|
|
100
|
+
}
|
|
83
101
|
}
|
|
84
102
|
ngAfterViewInit() {
|
|
85
103
|
setTimeout(() => {
|
|
@@ -95,7 +113,7 @@ export class ButtonComponent {
|
|
|
95
113
|
ButtonComponent.decorators = [
|
|
96
114
|
{ type: Component, args: [{
|
|
97
115
|
selector: 'wac-button',
|
|
98
|
-
template: "<a\n [class]=\"'wac-button ' + extraClasses\"\n (click)=\"confirmDelete && waitForConfirmDelete ? addMaxWidthDelete() : '';onButtonClick($event);\"\n (mouseleave)=\"animation ? resetMaxWidth() : '';\"\n (mouseenter)=\"animation ? addMaxWidth() : '';\"\n wzAutoHide (clickOutside)=\"confirmDelete && !waitForConfirmDelete ? resetMaxWidthDelete() : ''\"\n [ngClass]=\"[\n label === '' ? 'alone' : '',\n animationRight ? 'animation-right' : '',\n animation ? 'animationText' : '',\n isLoading ? 'is-loading' : '',\n opacity ? 'opacity' : '',\n disabled ? 'disabled' : '',\n widthAuto ? 'width-auto' : '',\n whiteSpaceNowrap ? 'white-space-no-wrap' : '',\n !waitForConfirmDelete && confirmDelete ? 'step-delete' : '',\n confirmDelete ? 'deletePosition-' + confirmDeletePosition : ''\n ]\"\n [ngStyle]=\"{\n 'text-align': contentHorizontalPosition\n }\"\n>\n <span class=\"wac-button__wrapper\">\n <i *ngIf=\"icon !== ''\" [ngClass]=\"icon\" [style.font-size.px]=\"iconFontSize\"></i>\n {{ label }}\n <i *ngIf=\"iconNext !== ''\" [ngClass]=\"iconNext\" [style.font-size.px]=\"iconFontSize\"></i>\n </span>\n <span class=\"wac-button__animation\" [style.maxWidth]=\"buttonMaxWidth\" [style.width]=\"buttonWidth + 'px'\">\n <span #calculWidth class=\"wac-button__animation__text\" [innerHTML]=\"animationText\"></span>\n </span>\n <span class=\"wac-button__confirmDelete\" [style.maxWidth]=\"buttonMaxWidthDelete\" [style.width]=\"buttonWidthDelete + 'px'\">\n <span #calculWidthDelete class=\"wac-button__confirmDelete__text\" [innerHTML]=\"confirmDeleteText\"></span>\n </span>\n <span\n class=\"wac-button__loader\"\n [ngClass]=\"extraClasses.includes('is-outlined') ? 'outlined' : ''\"\n *ngIf=\"isLoading
|
|
116
|
+
template: "<a\n [class]=\"'wac-button ' + extraClasses\"\n (click)=\"confirmDelete && waitForConfirmDelete ? addMaxWidthDelete() : '';onButtonClick($event);\"\n (mouseleave)=\"animation ? resetMaxWidth() : '';\"\n (mouseenter)=\"animation ? addMaxWidth() : '';\"\n wzAutoHide (clickOutside)=\"confirmDelete && !waitForConfirmDelete ? resetMaxWidthDelete() : ''\"\n [ngClass]=\"[\n label === '' ? 'alone' : '',\n animationRight ? 'animation-right' : '',\n animation ? 'animationText' : '',\n isLoading ? 'is-loading' : '',\n opacity ? 'opacity' : '',\n disabled ? 'disabled' : '',\n widthAuto ? 'width-auto' : '',\n whiteSpaceNowrap ? 'white-space-no-wrap' : '',\n !waitForConfirmDelete && confirmDelete ? 'step-delete' : '',\n confirmDelete ? 'deletePosition-' + confirmDeletePosition : ''\n ]\"\n [ngStyle]=\"{\n 'text-align': contentHorizontalPosition\n }\"\n>\n <span class=\"wac-button__wrapper\">\n <i *ngIf=\"icon !== ''\" [ngClass]=\"icon\" [style.font-size.px]=\"iconFontSize\"></i>\n {{ label }}\n <i *ngIf=\"iconNext !== ''\" [ngClass]=\"iconNext\" [style.font-size.px]=\"iconFontSize\"></i>\n </span>\n <span class=\"wac-button__animation\" [style.maxWidth]=\"buttonMaxWidth\" [style.width]=\"buttonWidth + 'px'\">\n <span #calculWidth class=\"wac-button__animation__text\" [innerHTML]=\"animationText\"></span>\n </span>\n <span class=\"wac-button__confirmDelete\" [style.maxWidth]=\"buttonMaxWidthDelete\" [style.width]=\"buttonWidthDelete + 'px'\">\n <span #calculWidthDelete class=\"wac-button__confirmDelete__text\" [innerHTML]=\"confirmDeleteText\"></span>\n </span>\n <span\n class=\"wac-button__loader\"\n [ngClass]=\"extraClasses.includes('is-outlined') ? 'outlined' : ''\"\n *ngIf=\"isLoading\"\n [style.width]=\"currentLoading + '%'\"\n >\n <span *ngIf=\"extraClasses.includes('is-outlined')\">\n <i *ngIf=\"icon !== ''\" [ngClass]=\"icon\" [style.font-size.px]=\"iconFontSize\"></i>\n {{ label }}\n <i *ngIf=\"iconNext !== ''\" [ngClass]=\"iconNext\" [style.font-size.px]=\"iconFontSize\"></i>\n </span>\n\n </span>\n</a>\n"
|
|
99
117
|
},] }
|
|
100
118
|
];
|
|
101
119
|
ButtonComponent.ctorParameters = () => [];
|
|
@@ -118,7 +136,9 @@ ButtonComponent.propDecorators = {
|
|
|
118
136
|
confirmDeleteText: [{ type: Input }],
|
|
119
137
|
confirmDeletePosition: [{ type: Input }],
|
|
120
138
|
click: [{ type: Output }],
|
|
139
|
+
isLoading: [{ type: Input }],
|
|
140
|
+
isLoadingChange: [{ type: Output }],
|
|
121
141
|
calculWidth: [{ type: ViewChild, args: ['calculWidth',] }],
|
|
122
142
|
calculWidthDelete: [{ type: ViewChild, args: ['calculWidthDelete',] }]
|
|
123
143
|
};
|
|
124
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
144
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFnQixTQUFTLEVBQWMsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUUsU0FBUyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ25ILE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDaEMsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBTTNDLE1BQU0sT0FBTyxlQUFlO0lBdUYxQjtRQXJGQSxpQkFBWSxHQUFHLFNBQVMsQ0FBQztRQUd6QixVQUFLLEdBQUcsRUFBRSxDQUFDO1FBR1gsU0FBSSxHQUFHLEVBQUUsQ0FBQztRQU1WLGNBQVMsR0FBRyxLQUFLLENBQUM7UUFHbEIsOEJBQXlCLEdBQWdDLFFBQVEsQ0FBQztRQUdsRSxpQkFBWSxHQUFHLEVBQUUsQ0FBQztRQUdsQixjQUFTLEdBQUcsS0FBSyxDQUFDO1FBR2xCLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFHakIscUJBQWdCLEdBQUcsS0FBSyxDQUFDO1FBR3pCLFlBQU8sR0FBRyxLQUFLLENBQUM7UUFHaEIsY0FBUyxHQUFHLEtBQUssQ0FBQztRQUdsQixtQkFBYyxHQUFHLEtBQUssQ0FBQztRQUd2QixrQkFBYSxHQUFHLEVBQUUsQ0FBQztRQUduQixrQkFBYSxHQUFHLEtBQUssQ0FBQztRQUd0QixzQkFBaUIsR0FBRyxFQUFFLENBQUM7UUFHdkIsMEJBQXFCLEdBQUcsT0FBTyxDQUFDO1FBRWYsVUFBSyxHQUE2QixJQUFJLFlBQVksRUFBRSxDQUFDO1FBUTVELG9CQUFlLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztRQU1oRCxlQUFVLEdBQVks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LFdBQVcsR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsQ0FBQyxXQUFXLENBQUM7YUFDL0Q7WUFDRCxJQUFJLElBQUksQ0FBQyxhQUFhLEVBQUU7Z0JBQ3RCLElBQUksQ0FBQyxpQkFBaUIsR0FBRyxJQUFJLENBQUMsaUJBQWlCLENBQUMsYUFBYSxDQUFDLFdBQVcsQ0FBQzthQUMzRTtRQUNILENBQUMsRUFBRSxJQUFJLENBQUMsQ0FBQztJQUNYLENBQUM7OztZQTdLRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLFlBQVk7Z0JBQ3RCLDBtRUFBc0M7YUFDdkM7Ozs7MkJBRUUsS0FBSztvQkFHTCxLQUFLO21CQUdMLEtBQUs7dUJBR0wsS0FBSzt3QkFHTCxLQUFLO3dDQUdMLEtBQUs7MkJBR0wsS0FBSzt3QkFHTCxLQUFLO3VCQUdMLEtBQUs7K0JBR0wsS0FBSztzQkFHTCxLQUFLO3dCQUdMLEtBQUs7NkJBR0wsS0FBSzs0QkFHTCxLQUFLOzRCQUdMLEtBQUs7Z0NBR0wsS0FBSztvQ0FHTCxLQUFLO29CQUdMLE1BQU07d0JBRU4sS0FBSzs4QkFNTCxNQUFNOzBCQXFCTixTQUFTLFNBQUMsYUFBYTtnQ0FHdkIsU0FBUyxTQUFDLG1CQUFtQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7QWZ0ZXJWaWV3SW5pdCwgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCwgVmlld0NoaWxkfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IGludGVydmFsIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyB0YWtlV2hpbGUgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3dhYy1idXR0b24nLFxuICB0ZW1wbGF0ZVVybDogJy4vYnV0dG9uLmNvbXBvbmVudC5odG1sJ1xufSlcbmV4cG9ydCBjbGFzcyBCdXR0b25Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIEFmdGVyVmlld0luaXQge1xuICBASW5wdXQoKVxuICBleHRyYUNsYXNzZXMgPSAnaXMtaW5mbyc7XG5cbiAgQElucHV0KClcbiAgbGFiZWwgPSAnJztcblxuICBASW5wdXQoKVxuICBpY29uID0gJyc7XG5cbiAgQElucHV0KClcbiAgaWNvbk5leHQ6IHN0cmluZztcblxuICBASW5wdXQoKVxuICB3aWR0aEF1dG8gPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBjb250ZW50SG9yaXpvbnRhbFBvc2l0aW9uOiAnbGVmdCcgfCAnY2VudGVyJyB8ICdyaWdodCcgPSAnY2VudGVyJztcblxuICBASW5wdXQoKVxuICBpY29uRm9udFNpemUgPSAxMjtcblxuICBASW5wdXQoKVxuICBoYXNMb2FkZXIgPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBkaXNhYmxlZCA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpXG4gIHdoaXRlU3BhY2VOb3dyYXAgPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBvcGFjaXR5ID0gZmFsc2U7XG5cbiAgQElucHV0KClcbiAgYW5pbWF0aW9uID0gZmFsc2U7XG5cbiAgQElucHV0KClcbiAgYW5pbWF0aW9uUmlnaHQgPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBhbmltYXRpb25UZXh0ID0gJyc7XG5cbiAgQElucHV0KClcbiAgY29uZmlybURlbGV0ZSA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpXG4gIGNvbmZpcm1EZWxldGVUZXh0ID0gJyc7XG5cbiAgQElucHV0KClcbiAgY29uZmlybURlbGV0ZVBvc2l0aW9uID0gJ3JpZ2h0JztcblxuICBAT3V0cHV0KCkgcHVibGljIGNsaWNrOiBFdmVudEVtaXR0ZXI8TW91c2VFdmVudD4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cbiAgQElucHV0KCkgc2V0IGlzTG9hZGluZyhpc0xvYWRpbmcgOiBib29sZWFuKSB7XG4gICAgdGhpcy5faXNMb2FkaW5nID0gaXNMb2FkaW5nO1xuICAgIHRoaXMuaXNMb2FkaW5nQ2hhbmdlLm5leHQoaXNMb2FkaW5nKTtcbiAgICB0aGlzLnRvZ2dsZUxvYWRpbmcoKTtcbiAgfVxuXG4gIEBPdXRwdXQoKSBpc0xvYWRpbmdDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XG5cbiAgZ2V0IGlzTG9hZGluZygpIDogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMuX2lzTG9hZGluZztcbiAgfVxuXG4gIHByaXZhdGUgX2lzTG9hZGluZzogYm9vbGVhbiA9IGZhbHNlO1xuXG5cbiAgaW50ZXJ2YWwgPSBudWxsO1xuXG4gIHdhaXRGb3JDb25maXJtRGVsZXRlID0gZmFsc2U7XG5cbiAgYnV0dG9uTWF4V2lkdGggPSAnMHB4JztcbiAgYnV0dG9uV2lkdGggPSAnMHB4JztcblxuICBidXR0b25NYXhXaWR0aERlbGV0ZSA9ICcwcHgnO1xuICBidXR0b25XaWR0aERlbGV0ZSA9ICcwcHgnO1xuXG4gIGN1cnJlbnRMb2FkaW5nID0gMDtcblxuICBAVmlld0NoaWxkKCdjYWxjdWxXaWR0aCcpXG4gIGNhbGN1bFdpZHRoOiBFbGVtZW50UmVmO1xuXG4gIEBWaWV3Q2hpbGQoJ2NhbGN1bFdpZHRoRGVsZXRlJylcbiAgY2FsY3VsV2lkdGhEZWxldGU6IEVsZW1lbnRSZWY7XG5cbiAgY29uc3RydWN0b3IoKSB7fVxuXG4gIG5nT25Jbml0KCkge1xuICAgIGlmICh0aGlzLmNvbmZpcm1EZWxldGUpIHtcbiAgICAgIHRoaXMud2FpdEZvckNvbmZpcm1EZWxldGUgPSB0cnVlO1xuICAgIH1cbiAgfVxuXG4gIHRvZ2dsZUxvYWRpbmcoKSB7XG4gICAgdGhpcy5jdXJyZW50TG9hZGluZyA9IHRoaXMuaXNMb2FkaW5nID8gMTAgOiAxMDA7XG5cbiAgICBpbnRlcnZhbCgyMDApLnBpcGUodGFrZVdoaWxlKCB0aW1lPT4gdGhpcy5pc0xvYWRpbmcpKS5zdWJzY3JpYmUoXG4gICAgICAoKSA9PiB7XG4gICAgICAgIGlmICh0aGlzLmN1cnJlbnRMb2FkaW5nIDwgODUpIHtcbiAgICAgICAgICB0aGlzLmN1cnJlbnRMb2FkaW5nICs9IE1hdGguZmxvb3IoTWF0aC5yYW5kb20oKSAqIDE1KTtcbiAgICAgICAgfVxuICAgICAgfVxuICAgICk7XG4gICAgLyogdGhpcy5pbnRlcnZhbCA9IHNldEludGVydmFsKCgpID0+IHtcblxuICAgICAgaWYgKHRoaXMuY3VycmVudExvYWRpbmcgPCA4NSkge1xuICAgICAgICB0aGlzLmN1cnJlbnRMb2FkaW5nICs9IE1hdGguZmxvb3IoTWF0aC5yYW5kb20oKSAqIDE1KTtcbiAgICAgIH1cblxuICAgICAgaWYgKCF0aGlzLmlzTG9hZGluZykge1xuICAgICAgICB0aGlzLmN1cnJlbnRMb2FkaW5nID0gMTAwO1xuXG4gICAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICAgIGNsZWFySW50ZXJ2YWwodGhpcy5pbnRlcnZhbCk7XG4gICAgICAgIH0sIDEwMCk7XG4gICAgICB9XG4gICAgfSwgMjAwKTsgKi9cbiAgfVxuXG4gIGFkZE1heFdpZHRoKCkge1xuICAgIHRoaXMuYnV0dG9uTWF4V2lkdGggPSB0aGlzLmJ1dHRvbldpZHRoICsgJ3B4JztcbiAgfVxuXG4gIHJlc2V0TWF4V2lkdGgoKSB7XG4gICAgdGhpcy5idXR0b25NYXhXaWR0aCA9ICcwcHgnO1xuICB9XG5cbiAgYWRkTWF4V2lkdGhEZWxldGUoKSB7XG4gICAgdGhpcy5idXR0b25NYXhXaWR0aERlbGV0ZSA9IHRoaXMuYnV0dG9uV2lkdGhEZWxldGUgKyAncHgnO1xuICB9XG5cbiAgcmVzZXRNYXhXaWR0aERlbGV0ZSgpIHtcbiAgICB0aGlzLmJ1dHRvbk1heFdpZHRoRGVsZXRlID0gJzBweCc7XG4gICAgdGhpcy53YWl0Rm9yQ29uZmlybURlbGV0ZSA9IHRydWU7XG4gIH1cblxuICBvbkJ1dHRvbkNsaWNrKGV2ZW50KXtcbiAgICBldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICBpZiAodGhpcy5kaXNhYmxlZCkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICBpZiAodGhpcy5oYXNMb2FkZXIpIHtcbiAgICAgIHRoaXMuaXNMb2FkaW5nID0gZmFsc2U7XG4gICAgICBzZXRUaW1lb3V0KCgpID0+IHsgLy8gdHJpY2sgdG8gcmVzZXQgdGhlIGFuaW1hdGlvbiBsb2FkaW5nXG4gICAgICAgIHRoaXMuaXNMb2FkaW5nID0gdHJ1ZTtcbiAgICAgIH0sIDApO1xuICAgIH1cblxuICAgIGlmICghdGhpcy53YWl0Rm9yQ29uZmlybURlbGV0ZSkge1xuICAgICAgdGhpcy5jbGljay5lbWl0KGV2ZW50KTtcbiAgICAgIGlmICh0aGlzLmNvbmZpcm1EZWxldGUpIHtcbiAgICAgICAgdGhpcy5yZXNldE1heFdpZHRoRGVsZXRlKCk7XG4gICAgICB9XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMud2FpdEZvckNvbmZpcm1EZWxldGUgPSBmYWxzZTtcbiAgICB9XG4gIH1cblxuICBuZ0FmdGVyVmlld0luaXQoKSB7XG4gICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICBpZiAodGhpcy5hbmltYXRpb24pIHtcbiAgICAgICAgdGhpcy5idXR0b25XaWR0aCA9IHRoaXMuY2FsY3VsV2lkdGgubmF0aXZlRWxlbWVudC5vZmZzZXRXaWR0aDtcbiAgICAgIH1cbiAgICAgIGlmICh0aGlzLmNvbmZpcm1EZWxldGUpIHtcbiAgICAgICAgdGhpcy5idXR0b25XaWR0aERlbGV0ZSA9IHRoaXMuY2FsY3VsV2lkdGhEZWxldGUubmF0aXZlRWxlbWVudC5vZmZzZXRXaWR0aDtcbiAgICAgIH1cbiAgICB9LCAxMDAwKTtcbiAgfVxufVxuIl19
|
|
@@ -3,8 +3,8 @@ import { Component, ViewEncapsulation, Input, EventEmitter, Output, Directive, H
|
|
|
3
3
|
import { CommonModule, DOCUMENT } from '@angular/common';
|
|
4
4
|
import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
5
5
|
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
|
|
6
|
-
import { Subject, ReplaySubject } from 'rxjs';
|
|
7
|
-
import { takeUntil, debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
|
|
6
|
+
import { Subject, ReplaySubject, interval } from 'rxjs';
|
|
7
|
+
import { takeUntil, debounceTime, distinctUntilChanged, tap, takeWhile } from 'rxjs/operators';
|
|
8
8
|
import { OverlayContainer } from '@angular/cdk/overlay';
|
|
9
9
|
import { CdkTableModule } from '@angular/cdk/table';
|
|
10
10
|
import { trigger, transition, style, animate, state } from '@angular/animations';
|
|
@@ -595,7 +595,8 @@ class ButtonComponent {
|
|
|
595
595
|
this.confirmDeleteText = '';
|
|
596
596
|
this.confirmDeletePosition = 'right';
|
|
597
597
|
this.click = new EventEmitter();
|
|
598
|
-
this.
|
|
598
|
+
this.isLoadingChange = new EventEmitter();
|
|
599
|
+
this._isLoading = false;
|
|
599
600
|
this.interval = null;
|
|
600
601
|
this.waitForConfirmDelete = false;
|
|
601
602
|
this.buttonMaxWidth = '0px';
|
|
@@ -604,29 +605,40 @@ class ButtonComponent {
|
|
|
604
605
|
this.buttonWidthDelete = '0px';
|
|
605
606
|
this.currentLoading = 0;
|
|
606
607
|
}
|
|
608
|
+
set isLoading(isLoading) {
|
|
609
|
+
this._isLoading = isLoading;
|
|
610
|
+
this.isLoadingChange.next(isLoading);
|
|
611
|
+
this.toggleLoading();
|
|
612
|
+
}
|
|
613
|
+
get isLoading() {
|
|
614
|
+
return this._isLoading;
|
|
615
|
+
}
|
|
607
616
|
ngOnInit() {
|
|
608
617
|
if (this.confirmDelete) {
|
|
609
618
|
this.waitForConfirmDelete = true;
|
|
610
619
|
}
|
|
611
620
|
}
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
}
|
|
616
|
-
this.isLoading = true;
|
|
617
|
-
this.currentLoading = 10;
|
|
618
|
-
this.interval = setInterval(() => {
|
|
621
|
+
toggleLoading() {
|
|
622
|
+
this.currentLoading = this.isLoading ? 10 : 100;
|
|
623
|
+
interval(200).pipe(takeWhile(time => this.isLoading)).subscribe(() => {
|
|
619
624
|
if (this.currentLoading < 85) {
|
|
620
625
|
this.currentLoading += Math.floor(Math.random() * 15);
|
|
621
626
|
}
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
627
|
+
});
|
|
628
|
+
/* this.interval = setInterval(() => {
|
|
629
|
+
|
|
630
|
+
if (this.currentLoading < 85) {
|
|
631
|
+
this.currentLoading += Math.floor(Math.random() * 15);
|
|
632
|
+
}
|
|
633
|
+
|
|
634
|
+
if (!this.isLoading) {
|
|
635
|
+
this.currentLoading = 100;
|
|
636
|
+
|
|
637
|
+
setTimeout(() => {
|
|
638
|
+
clearInterval(this.interval);
|
|
639
|
+
}, 100);
|
|
640
|
+
}
|
|
641
|
+
}, 200); */
|
|
630
642
|
}
|
|
631
643
|
addMaxWidth() {
|
|
632
644
|
this.buttonMaxWidth = this.buttonWidth + 'px';
|
|
@@ -643,20 +655,24 @@ class ButtonComponent {
|
|
|
643
655
|
}
|
|
644
656
|
onButtonClick(event) {
|
|
645
657
|
event.stopPropagation();
|
|
646
|
-
if (
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
+
if (this.disabled) {
|
|
659
|
+
return;
|
|
660
|
+
}
|
|
661
|
+
if (this.hasLoader) {
|
|
662
|
+
this.isLoading = false;
|
|
663
|
+
setTimeout(() => {
|
|
664
|
+
this.isLoading = true;
|
|
665
|
+
}, 0);
|
|
666
|
+
}
|
|
667
|
+
if (!this.waitForConfirmDelete) {
|
|
668
|
+
this.click.emit(event);
|
|
669
|
+
if (this.confirmDelete) {
|
|
670
|
+
this.resetMaxWidthDelete();
|
|
658
671
|
}
|
|
659
672
|
}
|
|
673
|
+
else {
|
|
674
|
+
this.waitForConfirmDelete = false;
|
|
675
|
+
}
|
|
660
676
|
}
|
|
661
677
|
ngAfterViewInit() {
|
|
662
678
|
setTimeout(() => {
|
|
@@ -672,7 +688,7 @@ class ButtonComponent {
|
|
|
672
688
|
ButtonComponent.decorators = [
|
|
673
689
|
{ type: Component, args: [{
|
|
674
690
|
selector: 'wac-button',
|
|
675
|
-
template: "<a\n [class]=\"'wac-button ' + extraClasses\"\n (click)=\"confirmDelete && waitForConfirmDelete ? addMaxWidthDelete() : '';onButtonClick($event);\"\n (mouseleave)=\"animation ? resetMaxWidth() : '';\"\n (mouseenter)=\"animation ? addMaxWidth() : '';\"\n wzAutoHide (clickOutside)=\"confirmDelete && !waitForConfirmDelete ? resetMaxWidthDelete() : ''\"\n [ngClass]=\"[\n label === '' ? 'alone' : '',\n animationRight ? 'animation-right' : '',\n animation ? 'animationText' : '',\n isLoading ? 'is-loading' : '',\n opacity ? 'opacity' : '',\n disabled ? 'disabled' : '',\n widthAuto ? 'width-auto' : '',\n whiteSpaceNowrap ? 'white-space-no-wrap' : '',\n !waitForConfirmDelete && confirmDelete ? 'step-delete' : '',\n confirmDelete ? 'deletePosition-' + confirmDeletePosition : ''\n ]\"\n [ngStyle]=\"{\n 'text-align': contentHorizontalPosition\n }\"\n>\n <span class=\"wac-button__wrapper\">\n <i *ngIf=\"icon !== ''\" [ngClass]=\"icon\" [style.font-size.px]=\"iconFontSize\"></i>\n {{ label }}\n <i *ngIf=\"iconNext !== ''\" [ngClass]=\"iconNext\" [style.font-size.px]=\"iconFontSize\"></i>\n </span>\n <span class=\"wac-button__animation\" [style.maxWidth]=\"buttonMaxWidth\" [style.width]=\"buttonWidth + 'px'\">\n <span #calculWidth class=\"wac-button__animation__text\" [innerHTML]=\"animationText\"></span>\n </span>\n <span class=\"wac-button__confirmDelete\" [style.maxWidth]=\"buttonMaxWidthDelete\" [style.width]=\"buttonWidthDelete + 'px'\">\n <span #calculWidthDelete class=\"wac-button__confirmDelete__text\" [innerHTML]=\"confirmDeleteText\"></span>\n </span>\n <span\n class=\"wac-button__loader\"\n [ngClass]=\"extraClasses.includes('is-outlined') ? 'outlined' : ''\"\n *ngIf=\"isLoading
|
|
691
|
+
template: "<a\n [class]=\"'wac-button ' + extraClasses\"\n (click)=\"confirmDelete && waitForConfirmDelete ? addMaxWidthDelete() : '';onButtonClick($event);\"\n (mouseleave)=\"animation ? resetMaxWidth() : '';\"\n (mouseenter)=\"animation ? addMaxWidth() : '';\"\n wzAutoHide (clickOutside)=\"confirmDelete && !waitForConfirmDelete ? resetMaxWidthDelete() : ''\"\n [ngClass]=\"[\n label === '' ? 'alone' : '',\n animationRight ? 'animation-right' : '',\n animation ? 'animationText' : '',\n isLoading ? 'is-loading' : '',\n opacity ? 'opacity' : '',\n disabled ? 'disabled' : '',\n widthAuto ? 'width-auto' : '',\n whiteSpaceNowrap ? 'white-space-no-wrap' : '',\n !waitForConfirmDelete && confirmDelete ? 'step-delete' : '',\n confirmDelete ? 'deletePosition-' + confirmDeletePosition : ''\n ]\"\n [ngStyle]=\"{\n 'text-align': contentHorizontalPosition\n }\"\n>\n <span class=\"wac-button__wrapper\">\n <i *ngIf=\"icon !== ''\" [ngClass]=\"icon\" [style.font-size.px]=\"iconFontSize\"></i>\n {{ label }}\n <i *ngIf=\"iconNext !== ''\" [ngClass]=\"iconNext\" [style.font-size.px]=\"iconFontSize\"></i>\n </span>\n <span class=\"wac-button__animation\" [style.maxWidth]=\"buttonMaxWidth\" [style.width]=\"buttonWidth + 'px'\">\n <span #calculWidth class=\"wac-button__animation__text\" [innerHTML]=\"animationText\"></span>\n </span>\n <span class=\"wac-button__confirmDelete\" [style.maxWidth]=\"buttonMaxWidthDelete\" [style.width]=\"buttonWidthDelete + 'px'\">\n <span #calculWidthDelete class=\"wac-button__confirmDelete__text\" [innerHTML]=\"confirmDeleteText\"></span>\n </span>\n <span\n class=\"wac-button__loader\"\n [ngClass]=\"extraClasses.includes('is-outlined') ? 'outlined' : ''\"\n *ngIf=\"isLoading\"\n [style.width]=\"currentLoading + '%'\"\n >\n <span *ngIf=\"extraClasses.includes('is-outlined')\">\n <i *ngIf=\"icon !== ''\" [ngClass]=\"icon\" [style.font-size.px]=\"iconFontSize\"></i>\n {{ label }}\n <i *ngIf=\"iconNext !== ''\" [ngClass]=\"iconNext\" [style.font-size.px]=\"iconFontSize\"></i>\n </span>\n\n </span>\n</a>\n"
|
|
676
692
|
},] }
|
|
677
693
|
];
|
|
678
694
|
ButtonComponent.ctorParameters = () => [];
|
|
@@ -695,6 +711,8 @@ ButtonComponent.propDecorators = {
|
|
|
695
711
|
confirmDeleteText: [{ type: Input }],
|
|
696
712
|
confirmDeletePosition: [{ type: Input }],
|
|
697
713
|
click: [{ type: Output }],
|
|
714
|
+
isLoading: [{ type: Input }],
|
|
715
|
+
isLoadingChange: [{ type: Output }],
|
|
698
716
|
calculWidth: [{ type: ViewChild, args: ['calculWidth',] }],
|
|
699
717
|
calculWidthDelete: [{ type: ViewChild, args: ['calculWidthDelete',] }]
|
|
700
718
|
};
|