@wizishop/angular-components 0.0.111 → 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 +25 -20
- 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 +27 -21
- package/fesm2015/wizishop-angular-components.js +26 -22
- package/fesm2015/wizishop-angular-components.js.map +1 -1
- package/lib/components/button/button.component.d.ts +1 -1
- 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.111.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';
|
|
@@ -29,11 +31,9 @@ export class ButtonComponent {
|
|
|
29
31
|
this.currentLoading = 0;
|
|
30
32
|
}
|
|
31
33
|
set isLoading(isLoading) {
|
|
32
|
-
if (isLoading) {
|
|
33
|
-
this.launchLoading();
|
|
34
|
-
}
|
|
35
34
|
this._isLoading = isLoading;
|
|
36
35
|
this.isLoadingChange.next(isLoading);
|
|
36
|
+
this.toggleLoading();
|
|
37
37
|
}
|
|
38
38
|
get isLoading() {
|
|
39
39
|
return this._isLoading;
|
|
@@ -43,24 +43,27 @@ export class ButtonComponent {
|
|
|
43
43
|
this.waitForConfirmDelete = true;
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
}
|
|
50
|
-
this.isLoading = true;
|
|
51
|
-
this.currentLoading = 10;
|
|
52
|
-
this.interval = setInterval(() => {
|
|
46
|
+
toggleLoading() {
|
|
47
|
+
this.currentLoading = this.isLoading ? 10 : 100;
|
|
48
|
+
interval(200).pipe(takeWhile(time => this.isLoading)).subscribe(() => {
|
|
53
49
|
if (this.currentLoading < 85) {
|
|
54
50
|
this.currentLoading += Math.floor(Math.random() * 15);
|
|
55
51
|
}
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
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); */
|
|
64
67
|
}
|
|
65
68
|
addMaxWidth() {
|
|
66
69
|
this.buttonMaxWidth = this.buttonWidth + 'px';
|
|
@@ -81,7 +84,10 @@ export class ButtonComponent {
|
|
|
81
84
|
return;
|
|
82
85
|
}
|
|
83
86
|
if (this.hasLoader) {
|
|
84
|
-
this.
|
|
87
|
+
this.isLoading = false;
|
|
88
|
+
setTimeout(() => {
|
|
89
|
+
this.isLoading = true;
|
|
90
|
+
}, 0);
|
|
85
91
|
}
|
|
86
92
|
if (!this.waitForConfirmDelete) {
|
|
87
93
|
this.click.emit(event);
|
|
@@ -107,7 +113,7 @@ export class ButtonComponent {
|
|
|
107
113
|
ButtonComponent.decorators = [
|
|
108
114
|
{ type: Component, args: [{
|
|
109
115
|
selector: 'wac-button',
|
|
110
|
-
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"
|
|
111
117
|
},] }
|
|
112
118
|
];
|
|
113
119
|
ButtonComponent.ctorParameters = () => [];
|
|
@@ -135,4 +141,4 @@ ButtonComponent.propDecorators = {
|
|
|
135
141
|
calculWidth: [{ type: ViewChild, args: ['calculWidth',] }],
|
|
136
142
|
calculWidthDelete: [{ type: ViewChild, args: ['calculWidthDelete',] }]
|
|
137
143
|
};
|
|
138
|
-
//# 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';
|
|
@@ -606,11 +606,9 @@ class ButtonComponent {
|
|
|
606
606
|
this.currentLoading = 0;
|
|
607
607
|
}
|
|
608
608
|
set isLoading(isLoading) {
|
|
609
|
-
if (isLoading) {
|
|
610
|
-
this.launchLoading();
|
|
611
|
-
}
|
|
612
609
|
this._isLoading = isLoading;
|
|
613
610
|
this.isLoadingChange.next(isLoading);
|
|
611
|
+
this.toggleLoading();
|
|
614
612
|
}
|
|
615
613
|
get isLoading() {
|
|
616
614
|
return this._isLoading;
|
|
@@ -620,24 +618,27 @@ class ButtonComponent {
|
|
|
620
618
|
this.waitForConfirmDelete = true;
|
|
621
619
|
}
|
|
622
620
|
}
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
}
|
|
627
|
-
this.isLoading = true;
|
|
628
|
-
this.currentLoading = 10;
|
|
629
|
-
this.interval = setInterval(() => {
|
|
621
|
+
toggleLoading() {
|
|
622
|
+
this.currentLoading = this.isLoading ? 10 : 100;
|
|
623
|
+
interval(200).pipe(takeWhile(time => this.isLoading)).subscribe(() => {
|
|
630
624
|
if (this.currentLoading < 85) {
|
|
631
625
|
this.currentLoading += Math.floor(Math.random() * 15);
|
|
632
626
|
}
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
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); */
|
|
641
642
|
}
|
|
642
643
|
addMaxWidth() {
|
|
643
644
|
this.buttonMaxWidth = this.buttonWidth + 'px';
|
|
@@ -658,7 +659,10 @@ class ButtonComponent {
|
|
|
658
659
|
return;
|
|
659
660
|
}
|
|
660
661
|
if (this.hasLoader) {
|
|
661
|
-
this.
|
|
662
|
+
this.isLoading = false;
|
|
663
|
+
setTimeout(() => {
|
|
664
|
+
this.isLoading = true;
|
|
665
|
+
}, 0);
|
|
662
666
|
}
|
|
663
667
|
if (!this.waitForConfirmDelete) {
|
|
664
668
|
this.click.emit(event);
|
|
@@ -684,7 +688,7 @@ class ButtonComponent {
|
|
|
684
688
|
ButtonComponent.decorators = [
|
|
685
689
|
{ type: Component, args: [{
|
|
686
690
|
selector: 'wac-button',
|
|
687
|
-
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"
|
|
688
692
|
},] }
|
|
689
693
|
];
|
|
690
694
|
ButtonComponent.ctorParameters = () => [];
|