@wizishop/angular-components 0.0.111 → 0.0.114

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

@@ -596,7 +596,44 @@
         isActive: [{ type: i0.Input, args: ['zIndexToggle',] }]
     };
 
-    var directives = [DebounceKeyupDirective, AbstractDebounceDirective, AutoHideDirective, ZindexToggleDirective];
+    var VarDirective = /** @class */ (function () {
+        function VarDirective(templateRef, vcRef) {
+            this.templateRef = templateRef;
+            this.vcRef = vcRef;
+            this.context = {
+                $implicit: null,
+                ngVar: null,
+            };
+            this.hasView = false;
+        }
+        Object.defineProperty(VarDirective.prototype, "ngVar", {
+            // https://stackoverflow.com/questions/38582293/how-to-declare-a-variable-in-a-template-in-angular
+            set: function (context) {
+                this.context.$implicit = this.context.ngVar = context;
+                if (!this.hasView) {
+                    this.vcRef.createEmbeddedView(this.templateRef, this.context);
+                    this.hasView = true;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return VarDirective;
+    }());
+    VarDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[ngVar]',
+                },] }
+    ];
+    VarDirective.ctorParameters = function () { return [
+        { type: i0.TemplateRef },
+        { type: i0.ViewContainerRef }
+    ]; };
+    VarDirective.propDecorators = {
+        ngVar: [{ type: i0.Input }]
+    };
+
+    var directives = [DebounceKeyupDirective, AbstractDebounceDirective, AutoHideDirective, ZindexToggleDirective, VarDirective];
     var SharedDirectives = /** @class */ (function () {
         function SharedDirectives() {
         }
@@ -942,11 +979,9 @@
                 return this._isLoading;
             },
             set: function (isLoading) {
-                if (isLoading) {
-                    this.launchLoading();
-                }
                 this._isLoading = isLoading;
                 this.isLoadingChange.next(isLoading);
+                this.toggleLoading();
             },
             enumerable: false,
             configurable: true
@@ -956,25 +991,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';
@@ -990,12 +1014,16 @@
             this.waitForConfirmDelete = true;
         };
         ButtonComponent.prototype.onButtonClick = function (event) {
+            var _this = this;
             event.stopPropagation();
             if (this.disabled) {
                 return;
             }
             if (this.hasLoader) {
-                this.launchLoading();
+                this.isLoading = false;
+                setTimeout(function () {
+                    _this.isLoading = true;
+                }, 0);
             }
             if (!this.waitForConfirmDelete) {
                 this.click.emit(event);
@@ -1023,7 +1051,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 []; };
@@ -3746,60 +3774,42 @@
 
     var SelectedListComponent = /** @class */ (function () {
         function SelectedListComponent() {
+            this.options = [];
             this.enableSelectAll = true;
             this.selectedItemsIndex = new i0.EventEmitter();
             this.selectedItemsAll = new i0.EventEmitter();
             this.unSelectedItemsAll = new i0.EventEmitter();
             this.selectedOptionIndex = [];
-            this.switchSelectAll = false;
         }
         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.selectedItemsIndex.emit(index);
+        };
+        SelectedListComponent.prototype.areAllOptionsChecked = function () {
+            return !this.options.some(function (option) { return !option.checked; });
         };
         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      <ng-container *ngVar=\"(options | areAllOptionsSelected) as areAllOptionsSelected\">\n        <span *ngIf=\"textSelectAll && !areAllOptionsSelected\" [innerHTML]=\"textSelectAll\" (click)=\"onSelectAll()\"></span>\n        <span *ngIf=\"textUnSelectAll && areAllOptionsSelected\" [innerHTML]=\"textUnSelectAll\" (click)=\"onUnSelectAll()\"></span>\n      </ng-container>\n\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 = {
@@ -3945,9 +3955,25 @@
                 },] }
     ];
 
+    var AreAllOptionsSelectedPipe = /** @class */ (function () {
+        function AreAllOptionsSelectedPipe() {
+        }
+        AreAllOptionsSelectedPipe.prototype.transform = function (options) {
+            return !options.some(function (option) { return !option.checked; });
+        };
+        return AreAllOptionsSelectedPipe;
+    }());
+    AreAllOptionsSelectedPipe.decorators = [
+        { type: i0.Pipe, args: [{
+                    name: 'areAllOptionsSelected',
+                    pure: false
+                },] }
+    ];
+
     var exportedPipes = [FormatObjectToRecursifTreePipe, FormatObjectToSimpleTreePipe];
     var pipes$1 = [
-        SelectFiltersPipe
+        SelectFiltersPipe,
+        AreAllOptionsSelectedPipe
     ];
     var SharedPipes = /** @class */ (function () {
         function SharedPipes() {
@@ -4186,19 +4212,21 @@
     exports.WzEditInPlaceComponent = WzEditInPlaceComponent;
     exports.ZindexToggleDirective = ZindexToggleDirective;
     exports.ɵa = DomService;
-    exports.ɵb = PaginationModule;
-    exports.ɵc = PagniationArrayTotalPages;
-    exports.ɵd = PagniationIsLastPage;
-    exports.ɵe = PagniationText;
-    exports.ɵf = TableModule;
-    exports.ɵg = InputSearchModule;
-    exports.ɵh = InputModule;
-    exports.ɵi = TooltipModule;
-    exports.ɵj = ProgressBarModule;
-    exports.ɵk = LoaderModule;
-    exports.ɵl = CheckboxModule;
-    exports.ɵm = inOutY;
-    exports.ɵn = inOutX;
+    exports.ɵb = VarDirective;
+    exports.ɵc = AreAllOptionsSelectedPipe;
+    exports.ɵd = PaginationModule;
+    exports.ɵe = PagniationArrayTotalPages;
+    exports.ɵf = PagniationIsLastPage;
+    exports.ɵg = PagniationText;
+    exports.ɵh = TableModule;
+    exports.ɵi = InputSearchModule;
+    exports.ɵj = InputModule;
+    exports.ɵk = TooltipModule;
+    exports.ɵl = ProgressBarModule;
+    exports.ɵm = LoaderModule;
+    exports.ɵn = CheckboxModule;
+    exports.ɵo = inOutY;
+    exports.ɵp = inOutX;
 
     Object.defineProperty(exports, '__esModule', { value: true });