@wizishop/angular-components 0.0.109 → 0.0.112

package/bundles/wizishop-angular-components.umd.js

@@ -927,7 +927,8 @@
             this.confirmDeleteText = '';
             this.confirmDeletePosition = 'right';
             this.click = new i0.EventEmitter();
-            this.isLoading = false;
+            this.isLoadingChange = new i0.EventEmitter();
+            this._isLoading = false;
             this.interval = null;
             this.waitForConfirmDelete = false;
             this.buttonMaxWidth = '0px';
@@ -936,30 +937,45 @@
             this.buttonWidthDelete = '0px';
             this.currentLoading = 0;
         }
+        Object.defineProperty(ButtonComponent.prototype, "isLoading", {
+            get: function () {
+                return this._isLoading;
+            },
+            set: function (isLoading) {
+                this._isLoading = isLoading;
+                this.isLoadingChange.next(isLoading);
+                this.toggleLoading();
+            },
+            enumerable: false,
+            configurable: true
+        });
         ButtonComponent.prototype.ngOnInit = function () {
             if (this.confirmDelete) {
                 this.waitForConfirmDelete = true;
             }
         };
-        ButtonComponent.prototype.launchLoading = function () {
+        ButtonComponent.prototype.toggleLoading = function () {
             var _this = this;
-            if (this.isLoading || this.interval !== null) {
-                return;
-            }
-            this.isLoading = true;
-            this.currentLoading = 10;
-            this.interval = setInterval(function () {
+            this.currentLoading = this.isLoading ? 10 : 100;
+            rxjs.interval(200).pipe(operators.takeWhile(function (time) { return _this.isLoading; })).subscribe(function () {
                 if (_this.currentLoading < 85) {
                     _this.currentLoading += Math.floor(Math.random() * 15);
                 }
-                if (!_this.isLoading) {
-                    _this.currentLoading = 100;
-                    setTimeout(function () {
-                        clearInterval(_this.interval);
-                        _this.interval = null;
-                    }, 100);
-                }
-            }, 200);
+            });
+            /* this.interval = setInterval(() => {
+        
+              if (this.currentLoading < 85) {
+                this.currentLoading += Math.floor(Math.random() * 15);
+              }
+        
+              if (!this.isLoading) {
+                this.currentLoading = 100;
+        
+                setTimeout(() => {
+                  clearInterval(this.interval);
+                }, 100);
+              }
+            }, 200); */
         };
         ButtonComponent.prototype.addMaxWidth = function () {
             this.buttonMaxWidth = this.buttonWidth + 'px';
@@ -975,21 +991,26 @@
             this.waitForConfirmDelete = true;
         };
         ButtonComponent.prototype.onButtonClick = function (event) {
+            var _this = this;
             event.stopPropagation();
-            if (!this.disabled) {
-                if (this.hasLoader) {
-                    this.launchLoading();
-                }
-                if (!this.waitForConfirmDelete) {
-                    this.click.emit(event);
-                    if (this.confirmDelete) {
-                        this.resetMaxWidthDelete();
-                    }
-                }
-                else {
-                    this.waitForConfirmDelete = false;
+            if (this.disabled) {
+                return;
+            }
+            if (this.hasLoader) {
+                this.isLoading = false;
+                setTimeout(function () {
+                    _this.isLoading = true;
+                }, 0);
+            }
+            if (!this.waitForConfirmDelete) {
+                this.click.emit(event);
+                if (this.confirmDelete) {
+                    this.resetMaxWidthDelete();
                 }
             }
+            else {
+                this.waitForConfirmDelete = false;
+            }
         };
         ButtonComponent.prototype.ngAfterViewInit = function () {
             var _this = this;
@@ -1007,7 +1028,7 @@
     ButtonComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-button',
-                    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 || interval !== null\"\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"
+                    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"
                 },] }
     ];
     ButtonComponent.ctorParameters = function () { return []; };
@@ -1030,6 +1051,8 @@
         confirmDeleteText: [{ type: i0.Input }],
         confirmDeletePosition: [{ type: i0.Input }],
         click: [{ type: i0.Output }],
+        isLoading: [{ type: i0.Input }],
+        isLoadingChange: [{ type: i0.Output }],
         calculWidth: [{ type: i0.ViewChild, args: ['calculWidth',] }],
         calculWidthDelete: [{ type: i0.ViewChild, args: ['calculWidthDelete',] }]
     };