@wizishop/angular-components 0.0.110 → 0.0.113

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

@@ -941,9 +941,10 @@
             get: function () {
                 return this._isLoading;
             },
-            set: function (value) {
-                this._isLoading = value;
-                this.isLoadingChange.next(value);
+            set: function (isLoading) {
+                this._isLoading = isLoading;
+                this.isLoadingChange.next(isLoading);
+                this.toggleLoading();
             },
             enumerable: false,
             configurable: true
@@ -953,25 +954,14 @@
                 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);
+            });
         };
         ButtonComponent.prototype.addMaxWidth = function () {
             this.buttonMaxWidth = this.buttonWidth + 'px';
@@ -987,21 +977,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;
@@ -1019,7 +1014,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 []; };
@@ -3742,6 +3737,7 @@
 
     var SelectedListComponent = /** @class */ (function () {
         function SelectedListComponent() {
+            this._options = [];
             this.enableSelectAll = true;
             this.selectedItemsIndex = new i0.EventEmitter();
             this.selectedItemsAll = new i0.EventEmitter();
@@ -3749,53 +3745,52 @@
             this.selectedOptionIndex = [];
             this.switchSelectAll = false;
         }
+        Object.defineProperty(SelectedListComponent.prototype, "options", {
+            get: function () {
+                return this._options;
+            },
+            set: function (options) {
+                this._options = options;
+                this.handleSwitchSelectAll();
+            },
+            enumerable: false,
+            configurable: true
+        });
         SelectedListComponent.prototype.ngOnInit = function () {
-            if (typeof this.options !== typeof undefined) {
-                this.checkSelectedItem();
-                if (this.selectedOptionIndex.length === this.options.length) {
-                    this.switchSelectAll = true;
-                }
-            }
         };
-        SelectedListComponent.prototype.selectAll = function () {
-            var _this = this;
-            this.selectedOptionIndex = [];
-            this.options.forEach(function (eln, i) {
-                _this.options[i].checked = true;
-                _this.selectedOptionIndex.push(i);
+        SelectedListComponent.prototype.onSelectAll = function () {
+            this.selectedOptionIndex = this.options.map(function (option, index) {
+                option.checked = true;
+                return index;
             });
             this.switchSelectAll = true;
             this.selectedItemsAll.emit(this.selectedOptionIndex);
         };
-        SelectedListComponent.prototype.checkSelectedItem = function () {
-            var _this = this;
-            this.selectedOptionIndex = [];
-            this.options.forEach(function (eln, i) {
-                if (eln.checked) {
-                    _this.selectedOptionIndex.push(i);
-                }
-            });
-        };
-        SelectedListComponent.prototype.unSelectAll = function () {
-            var _this = this;
-            this.selectedOptionIndex = [];
-            this.options.forEach(function (eln, i) {
-                _this.options[i].checked = false;
+        SelectedListComponent.prototype.onUnSelectAll = function () {
+            this.selectedOptionIndex = this.options.map(function (option, index) {
+                option.checked = false;
+                return index;
             });
             this.switchSelectAll = false;
             this.unSelectedItemsAll.emit(this.selectedOptionIndex);
         };
-        SelectedListComponent.prototype.selectItem = function (i) {
-            this.options[i].checked = !this.options[i].checked;
-            this.checkSelectedItem();
-            this.selectedItemsIndex.emit(i);
+        SelectedListComponent.prototype.onSelectItem = function (index) {
+            this.options[index].checked = !this.options[index].checked;
+            this.handleSwitchSelectAll();
+            this.selectedItemsIndex.emit(index);
+        };
+        SelectedListComponent.prototype.areAllOptionsChecked = function () {
+            return !this.options.some(function (option) { return !option.checked; });
+        };
+        SelectedListComponent.prototype.handleSwitchSelectAll = function () {
+            this.switchSelectAll = this.areAllOptionsChecked();
         };
         return SelectedListComponent;
     }());
     SelectedListComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-selected-list',
-                    template: "<div class=\"selected-list\">\n  <div class=\"selected-list__wrapper\">\n    <div class=\"selected-list__wrapper__head\">\n      <p *ngIf=\"label\" [innerHTML]=\"label\"></p>\n      <span *ngIf=\"textSelectAll && !switchSelectAll\" [innerHTML]=\"textSelectAll\" (click)=\"selectAll()\"></span>\n      <span *ngIf=\"textUnSelectAll && switchSelectAll\" [innerHTML]=\"textUnSelectAll\" (click)=\"unSelectAll()\"></span>\n    </div>\n    <div class=\"selected-list__wrapper__content\">\n      <div class=\"selected-list__wrapper__content__item\" *ngFor=\"let item of options;let i = index;\" [ngClass]=\"{'active': item.checked}\" (click)=\"selectItem(i)\">\n        <span [innerHTML]=\"item.label\"></span>\n        <i class=\"fas fa-check\"></i>\n      </div>\n    </div>\n  </div>\n</div>\n"
+                    template: "<div class=\"selected-list\">\n  <div class=\"selected-list__wrapper\">\n    <div class=\"selected-list__wrapper__head\">\n      <p *ngIf=\"label\" [innerHTML]=\"label\"></p>\n      <span *ngIf=\"textSelectAll && !switchSelectAll\" [innerHTML]=\"textSelectAll\" (click)=\"onSelectAll()\"></span>\n      <span *ngIf=\"textUnSelectAll && switchSelectAll\" [innerHTML]=\"textUnSelectAll\" (click)=\"onUnSelectAll()\"></span>\n    </div>\n    <div class=\"selected-list__wrapper__content\">\n      <div class=\"selected-list__wrapper__content__item\" *ngFor=\"let item of options;let i = index;\" [ngClass]=\"{'active': item.checked}\" (click)=\"onSelectItem(i)\">\n        <span [innerHTML]=\"item.label\"></span>\n        <i class=\"fas fa-check\"></i>\n      </div>\n    </div>\n  </div>\n</div>\n"
                 },] }
     ];
     SelectedListComponent.propDecorators = {